ExtJs4学习笔记一－－基础知识

最新推荐文章于 2021-10-25 10:50:47 发布
最新推荐文章于 2021-10-25 10:50:47 发布
阅读量725 收藏
点赞数
分类专栏： extjs4
开始学习ExtJs4，陆续记录学习过程，希望有所用处： 
特别注意：在这里有些写法还是沿用之前版本，效果依然能够出来，当时最好进行改动，例如new可以改为Ext.create 

一、基础知识 
1、JAON对象的例子 
Javascript代码   收藏代码
  1. <script type="text/javascript">  
  2.         var person  =  { //json对象定义开始  
  3.             name:'tom',  //字符串  
  4.             age:24,     //数字  
  5.             sex:'man',  
  6.             married:false,//布尔值  
  7.             books:[     //数组，在数组中又嵌入了两个json对象  
  8.                 {name:'历史',price:30},  
  9.                 {name:'文学',price:25}  
  10.             ]  
  11.         }//json对象定义结束  
  12.         //通过点号表示法来取得JSON对象的内部属性  
  13.         alert(person.name + ' ' + person.age + ' ' + person.sex);  
  14.         //通过中括号表示法来取得JSON对象的内部属性  
  15.         //alert(person["name"] + ' ' + person["age"] + ' ' + person["sex"]);  
  16.     </script>  


2、逗号分隔参数列表配置组件的例子 
Javascript代码   收藏代码
  1. Ext.Msg.alert('提示','逗号分隔参数列表');//这种配置方式非常常见  


3、JSON对象配置组件的例子 
Javascript代码   收藏代码
  1. Ext.onReady(function(){  
  2.         var config = {//定义配置对象  
  3.             title:'case01',  
  4.             msg: '我的配置很简单，不信来看看我的源代码吧！'  
  5.         }  
  6.         Ext.Msg.show(config);//将配置对象传入方法中  
  7.       });  


4、支持HTML格式化的Extjs信息提示框的例子 
Javascript代码   收藏代码
  1. Ext.onReady(function(){  
  2.         Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');  
  3.     });  


5、Ext.MessageBox的各种不同用法相关 
Javascript代码   收藏代码
  1. Ext.onReady(function(){  
  2.         //Ext.MessageBox.alert('提示','请单击我，确定',callBack);  
  3.                 Ext.MessageBox.show({  
  4.            title: '提示',  
  5.                      msg: '请单击我，确定',  
  6.                      buttons: Ext.MessageBox.OKCANCEL,  
  7.                      fn: callBack  
  8.         });  
  9.         function callBack(id){  
  10.             alert('单击的按钮ID是：'+id);  
  11.         }  


Javascript代码   收藏代码
  1. Ext.onReady(function(){  
  2.         Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);  
  3.         function callBack(id){  
  4.             alert('单击的按钮ID是：'+id);  
  5.         }  
  6.     });  


Javascript代码   收藏代码
  1. Ext.onReady(function(){  
  2.         Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");  
  3.         function callBack(id,msg){  
  4.             alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);  
  5.         }  
  6.       });  


Javascript代码   收藏代码
  1. Ext.MessageBox.show({  
  2.             title:'提示',  
  3.             msg:'我有三个按钮，和一个多行文本区。',  
  4.             modal:true,  
  5.             prompt:true,  
  6.             value:'请输入',  
  7.             fn:callBack,  
  8.             buttons:Ext.Msg.YESNOCANCEL,  
  9.             icon:Ext.Msg.QUESTION    
  10.         })  
  11.         function callBack(id,msg){  
  12.             alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);  
  13.         }  


Javascript代码   收藏代码
  1. //'ok'  
  2.         Ext.MessageBox.msgButtons[0].setText('确定');  
  3.         //'yes'  
  4.         Ext.MessageBox.msgButtons[1].setText('是');  
  5.         //'no'  
  6.         Ext.MessageBox.msgButtons[2].setText('否');  
  7.         //'cancel'  
  8.         Ext.MessageBox.msgButtons[3].setText('取消');  
  9.           
  10.         Ext.MessageBox.show({  
  11.             title:'提示',  
  12.             msg:'自定义按钮文字',  
  13.             modal:true,  
  14.             buttons:Ext.Msg.YESNOCANCEL  
  15.         });  


Javascript代码   收藏代码
  1. //多次设置信息提示框按钮文字//'ok'  
  2.         Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置  
  3.         Ext.MessageBox.alert('提示','提示信息一',function(){  
  4.             Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置  
  5.             Ext.MessageBox.alert('提示','提示信息二');  
  6.         });  


Javascript代码   收藏代码
  1. //通过调用updateText方法定时更新提示信息  
  2.         var msgBox = Ext.MessageBox.show({  
  3.             title:'提示',  
  4.             msg:'动态跟新的信息文字',  
  5.             modal:true,  
  6.             buttons:Ext.Msg.OK,  
  7.             fn:function(){  
  8.                 //停止定时任务  
  9.                 Ext.TaskManager.stop(task);  
  10.             }  
  11.         })  
  12.         //Ext.TaskManager是一个功能类，用来定时执行程序，  
  13.         //在这里我们使用它来定时触发提示信息的更新。  
  14.         var task = {  
  15.             run:function(){  
  16.                 msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));  
  17.             },  
  18.             interval:1000  
  19.         }  
  20.         Ext.TaskManager.start(task);  


Javascript代码   收藏代码
  1. //通过调用updateProgress方法同时更新提示信息和进度条  
  2.         var msgBox = Ext.MessageBox.show({  
  3.             title:'提示',  
  4.             msg:'动态跟新的进度条和信息文字',  
  5.             modal:true,  
  6.             width:300,  
  7.             progress:true  
  8.         })  
  9.   
  10.         var count = 0;//滚动条被刷新的次数  
  11.         var percentage = 0;//进度百分比  
  12.         var progressText = '';//进度条信息  
  13.   
  14.         var task = {  
  15.             run:function(){  
  16.                 count++;  
  17.                 //计算进度  
  18.                 percentage = count/10;  
  19.                 //生成进度条文字  
  20.                 progressText = '当前完成度：'+percentage*100 + "%";  
  21.                 //更新信息提示对话框  
  22.                 msgBox.updateProgress(percentage,progressText,  
  23.                     '当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));  
  24.                 //刷新10次后关闭信息提示对话框  
  25.                 if(count > 10){  
  26.                     Ext.TaskManager.stop(task);  
  27.                     msgBox.hide();  
  28.                 }  
  29.                   
  30.             },  
  31.             interval:1000  
  32.         }  
  33.   
  34.         Ext.TaskManager.start(task);  


Javascript代码   收藏代码
  1. //等待提示框会显示一个自动更新的进度条  
  2. Ext.MessageBox.wait('请等待，操作需要很长时间！','提示',{  
  3.             text : '进度条上的文字'  
  4.         });  


6、进度条的使用 
Javascript代码   收藏代码
  1. //手动模式的进度条  
  2. var ProgressBar = new Ext.ProgressBar({  
  3.             width:300,//设定进度条的宽度  
  4.             renderTo:'ProgressBar'  
  5.         });  
  6.         var count = 0;//滚动条被刷新的次数  
  7.         var percentage = 0;//进度百分比  
  8.         var progressText = '';//进度条信息  
  9.   
  10.         Ext.TaskManager.start({  
  11.             run:function(){  
  12.                 count++;  
  13.                 //刷新10次后关闭信息提示对话框  
  14.                 if(count > 10){  
  15.                     ProgressBar.hide();  
  16.                 }  
  17.                 //计算进度  
  18.                 percentage = count/10;  
  19.                 progressText = percentage * 100 + '%'  
  20.                 //更新信息提示对话框  
  21.                 ProgressBar.updateProgress(percentage,progressText,true);  
  22.             },  
  23.             interval:1000,//设置时间间隔  
  24.             repeat : 6//设置执行次数  
  25.         });  

Javascript代码   收藏代码
  1. //自动模式的进度条  
  2.         var ProgressBar = new Ext.ProgressBar({  
  3.             width:300,//设定进度条的宽度  
  4.             renderTo:'ProgressBar'  
  5.         });  
  6.         ProgressBar.wait({  
  7.             duration:10000,//进度条持续更新10秒钟  
  8.             interval:1000,//每1秒钟更新一次  
  9.             increment:10,//进度条分10次更新完毕  
  10.             scope:this,//回调函数的执行范围  
  11.             text : 'waiting',//进度条上的文字  
  12.             fn:function(){//更新完成后调用的回调函数  
  13.                 alert('更新完毕');  
  14.             }  
  15.         });  


Css代码   收藏代码
  1. <STYLE TYPE="text/css">  
  2.     .custom .x-progress-inner {  
  3.         height:17px;  
  4.         background: #fff;  
  5.     }  
  6.     .custom .x-progress-bar {  
  7.         height:15px;  
  8.         background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;  
  9.         border-top:1px solid #BEBEBE;  
  10.         border-bottom:1px solid #EFEFEF;  
  11.         border-right:0;  
  12.     }     
  13.   </STYLE>  
Javascript代码   收藏代码
  1. //自定义样式的进度条样式  
  2.         var ProgressBar = new Ext.ProgressBar({  
  3.             width:300,//设定进度条的宽度  
  4.             renderTo:'ProgressBar',  
  5.             cls:'custom'//使用自定义样式  
  6.         });  
  7.         ProgressBar.wait({  
  8.             duration:10000,//进度条持续更新10秒钟  
  9.             interval:1000,//每1秒钟更新一次  
  10.             increment:10//进度条分10次更新完毕  
  11.         });  

7、工具栏、菜单栏相关 
Javascript代码   收藏代码
  1. //简单的工具栏  
  2.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
  3.             renderTo:'toolbar',  
  4.             width:300  
  5.         });  
  6.   
  7.         toolbar.add([//向工具栏中添加按钮  
  8.             {  
  9.                 text:'新建',//按钮上显示的文字  
  10.                 handler:onButtonClick,//点击按钮的处理函数  
  11.                 iconCls:'newIcon'//在按钮上显示的图标  
  12.             },  
  13.             {text:'打开',handler:onButtonClick,iconCls:'openIcon'},  
  14.             {text:'保存',handler:onButtonClick,iconCls:'saveIcon'}  
  15.         ]);  
  16.   
  17.         function onButtonClick(btn){//点击按钮时调用的处理函数  
  18.             alert(btn.text);//取得按钮上的文字  
  19.         }  

Javascript代码   收藏代码
  1. //使用add方法加入多种元素的复杂工具栏  
  2.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
  3.             renderTo:'toolbar',  
  4.             width:500  
  5.         });  
  6.         toolbar.add(  
  7.             {text:'新建'},{text:'打开'},  
  8.             {text:'编辑'},{text:'保存'}, //加入按钮  
  9.             '-',                          //加入工具栏分隔符  
  10.             {     //加入表单元素  
  11.                 xtype:'textfield',  
  12.                 hideLabel : true,  
  13.                 width:150  
  14.             },  
  15.             '->',                        //加入一个充满工具栏的空白元素  
  16.             '<a href=#>超连接</div>',    //加入一个Element元素  
  17.             {xtype: 'tbspacer', width: 50},//加入一个空白元素，宽度为50像素  
  18.             '静态文本'                   //加入一个简单字符串  
  19.         );  

Html代码   收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>启用和禁用工具栏</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
  11.             renderTo:'toolbar',  
  12.             width:200,  
  13.             items :[{  
  14.                 text:'新建',//按钮上显示的文字  
  15.                 handler:onButtonClick//点击按钮的处理函数  
  16.             },  
  17.             {text:'打开',handler:onButtonClick},  
  18.             {text:'保存',handler:onButtonClick}]  
  19.         });  
  20.   
  21.         function onButtonClick(btn){//点击按钮时调用的处理函数  
  22.             alert(btn.text);//取得按钮上的文字  
  23.         }  
  24.           
  25.         Ext.get('enabledBtn').on('click',function(){  
  26.             //启用工具栏  
  27.             toolbar.enable();  
  28.         });  
  29.         Ext.get('disabledBtn').on('click',function(){  
  30.             //禁用工具栏  
  31.             toolbar.disable();  
  32.         });  
  33.     });  
  34.   </script>  
  35.  </HEAD>  
  36.  <BODY STYLE="margin: 10px">  
  37.     <div id='toolbar'></div>  
  38.     <input type=button value='启用工具栏' id='enabledBtn'>  
  39.     <input type=button value='禁用工具栏' id='disabledBtn'>  
  40.  </BODY>  
  41. </HTML>  

Html代码   收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>简单的菜单栏</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
  11.             renderTo:'toolbar',  
  12.             width:300  
  13.         });  
  14.         var fileMenu = new Ext.menu.Menu({//文件创建菜单  
  15.             shadow : 'frame',//设置菜单四条边都有阴影  
  16.             allowOtherMenus : true,  
  17.             items : [  
  18.                 new Ext.menu.Item({  
  19.                     text: '新建',//菜单项名称  
  20.                     menuHideDelay:1000,  
  21.                     handler:onMenuItem//菜单项处理函数  
  22.                 }),//添加菜单项  
  23.                 {text: '打开',handler:onMenuItem},  
  24.                 {text: '关闭',handler:onMenuItem}  
  25.             ]  
  26.         });  
  27.         var editMenu = new Ext.menu.Menu({//编辑创建菜单  
  28.             shadow : 'drop',//设置菜单在右下两条边有阴影  
  29.             allowOtherMenus : true,  
  30.             items : [  
  31.                 {text: '复制',handler:onMenuItem},//添加菜单项  
  32.                 {text: '粘贴',handler:onMenuItem},  
  33.                 {text: '剪切',handler:onMenuItem}  
  34.             ]  
  35.         });  
  36.         toolbar.add(  
  37.             {text : '文件',   menu : fileMenu},//将菜单加入工具栏  
  38.             {text : '编辑',   menu : editMenu}  
  39.         );  
  40.         function onMenuItem(item){//菜单项的回调方法  
  41.             alert(item.text);//取得菜单项的text属性  
  42.         }  
  43.     });  
  44.   </script>  
  45.  </HEAD>  
  46.  <BODY STYLE="margin: 10px">  
  47.     <div id='toolbar'></div>  
  48.  </BODY>  
  49. </HTML>  

Html代码   收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>多级菜单栏</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
  11.             renderTo:'toolbar',  
  12.             width:300  
  13.         });  
  14.         var infoMenu = new Ext.menu.Menu({//一级菜单  
  15.             ignoreParentClicks : true,//忽略父菜单的单击事件  
  16.             plain : true,  
  17.             items : [  
  18.                 {  
  19.                     text: '个人信息',  
  20.                     menu: new Ext.menu.Menu({//二级菜单  
  21.                         ignoreParentClicks : true,//忽略父菜单的单击事件  
  22.                         items:[  
  23.                             {  
  24.                                 text: '基本信息',  
  25.                                 menu : new Ext.menu.Menu({//三级菜单  
  26.                                     items:[  
  27.                                         {text: '身高',handler:onMenuItem},  
  28.                                         {text: '体重',handler:onMenuItem}  
  29.                                     ]  
  30.                             })}  
  31.                         ]  
  32.                     })  
  33.                 },//添加菜单项  
  34.                 {text: '公司信息'}  
  35.             ]  
  36.         });  
  37.         Toolbar.add(  
  38.             {text : '设置',   menu : infoMenu}//将菜单加入工具栏  
  39.         );  
  40.         function onMenuItem(item){//选择菜单项的处理函数  
  41.             alert(item.text);//取得菜单项的text属性  
  42.         }  
  43.     });  
  44.   </script>  
  45.  </HEAD>  
  46.  <BODY STYLE="margin: 10px">  
  47.     <div id='toolbar'></div>  
  48.  </BODY>  
  49. </HTML>  

Html代码   收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>将更多组件加入菜单</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <STYLE TYPE="text/css">  
  7.     .userManagerIcon { background-image: url(images/userManager.gif) !important; }  
  8.     .newIcon { background-image: url(images/new.gif) !important; }  
  9.     .openIcon { background-image: url(images/open.gif) !important; }  
  10.     .saveIcon { background-image: url(images/save.gif) !important; }  
  11.   </STYLE>  
  12.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  13.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  14.   <script type="text/javascript">  
  15.     Ext.onReady(function(){  
  16.   
  17.         var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
  18.             renderTo:'toolbar',  
  19.             width:300  
  20.         });  
  21.   
  22.         var fileMenu = new Ext.menu.Menu({//文件创建菜单  
  23.             items : [{  
  24.                     xtype : 'textfield',//创建表单字段  
  25.                     hideLabel: true,  
  26.                     width : 100  
  27.                 },{  
  28.                     text:"颜色选择",   
  29.                     menu : new Ext.menu.ColorPicker()  
  30.                 },  
  31.                 {xtype: 'datepicker'},//添加日期选择器组件  
  32.                 {  
  33.                     xtype: 'buttongroup',//添加按钮组组件  
  34.                     columns: 3,  
  35.                     title: '按钮组',  
  36.                     items: [{  
  37.                         text: '用户管理',  
  38.                         scale: 'large',  
  39.                         colspan : 3,  
  40.                         width : 170,  
  41.                         iconCls: 'userManagerIcon',  
  42.                         iconAlign: 'top'  
  43.                     },{  
  44.                         text: '新建', iconCls: 'newIcon'  
  45.                     },{  
  46.                         text: '打开', iconCls: 'openIcon'  
  47.                     },{  
  48.                         text: '保存', iconCls: 'saveIcon'  
  49.                     }]  
  50.                 }  
  51.             ]  
  52.         });  
  53.   
  54.         Toolbar.add(  
  55.             {text : '文件',   menu : fileMenu}//将菜单加入工具栏  
  56.         );  
  57.     });  
  58.   </script>  
  59.  </HEAD>  
  60.  <BODY STYLE="margin: 10px">  
  61.     <div id='toolbar'></div>  
  62.  </BODY>  
  63. </HTML>  

Html代码   收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>具有选择框的菜单</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.   
  11.         var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
  12.             renderTo:'toolbar',  
  13.             width:300  
  14.         });  
  15.         var themeMenu = new Ext.menu.Menu({//文件创建菜单  
  16.             items : [{  
  17.                 text:'主题颜色',  
  18.                 menu:new Ext.menu.Menu({  
  19.                     items:[{  
  20.                         text: '红色主题',  
  21.                         checked: true,//初始为选中状态  
  22.                         group: 'theme',//为单选项进行分组  
  23.                         checkHandler: onItemCheck  
  24.                     },{  
  25.                         text: '蓝色主题',  
  26.                         checked: false,//初始为未选中状态  
  27.                         group: 'theme',  
  28.                         checkHandler: onItemCheck  
  29.                     },{  
  30.                         text: '黑色主题',  
  31.                         checked: false,  
  32.                         group: 'theme',  
  33.                         checkHandler: onItemCheck  
  34.                     }]  
  35.                 })  
  36.             },{  
  37.                 text:'是否启用',  
  38.                 checked : false  
  39.             }]  
  40.         });  
  41.   
  42.         toolbar.add(  
  43.             {text : '风格选择', menu : themeMenu}//将菜单加入工具栏  
  44.         );  
  45.         function onItemCheck(item){//菜单项的回调方法  
  46.             alert(item.text);//取得菜单项的text属性  
  47.         }  
  48.     });  
  49.   </script>  
  50.  </HEAD>  
  51.  <BODY STYLE="margin: 10px">  
  52.     <div id='toolbar'></div>  
  53.  </BODY>  
  54. </HTML>  
wuyongde0922
关注
专栏目录
extjs 学习笔记（一） 一些基础知识
10-29
以上知识点涵盖了ExtJS学习笔记中的核心内容，通过这些知识点的学习和实践，开发者能够入门并逐渐深入理解ExtJS框架，并将这些知识应用到实际的开发工作中去。对于希望深入学习ExtJS的开发者来说，理解这些基础知识...
ExtJS4 相关
最新发布
Lyndon的专栏
06-30 290
在Ext中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。与Ext.Container相似，所有的布局类也有一个共同的超类Ext。凡是继承自该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了Ext中完整的布局系统。另外要说明的是我们经常使用Viewport对整个页面进行布局，而且每个页面只能有一个Viewport。1.Auto自动布局（系统默认）
ExtJs4基础
Clare Tung
12-12 1006
JSON结构 JSON有数组和对象两种结构： 对象结构：用大括号作为开始和结尾{}，中间可以用0个或多个，（逗号）分隔的”key/value“列表组成，关键字和值之间用：（冒号）分隔。 { key1:value1, key2:value2, … } 其中关键字是字符串，值可以是字符串、数值、true、false、null对象或数组。 数组结构:用中括号开始和结尾[]。中间有0个或多个，（逗号）...
extjs4简介
不了了之专栏
12-06 1538
Ext JS 4简介 Ext JS 4目前是Sencha的产品，4.x的正式版本号是4.0.7。Ext JS 4提供商业版本，但如果您的项目是开源的，则可以免费使用Ext JS 4。Ext JS的论坛目前非常活跃；Ext JS还在不但地升级改进，据Sencha官方统计，使用Ext JS的开发者数目在一百万以上。 Ext JS 4与之前版本的比较 渲染效率提高 所有类都经过调
ExtJS 4 树
weixin_34268310的博客
04-03 112
本文原地址http://www.showframework.com/2012/08/extjs-4-trees/ Tree Panel是ExtJS中最多能的组件之一，它非常适合用于展示分层的数据。Tree Panel和Grid Panel继承自相同的基类，所以所有从Grid Panel能获得到的特性、扩展、插件等带来的好处，在Tree Panel中也同样可以获得。列、...
入门基础学习 ExtJS笔记（一）
10-28
本文将基于标题“入门基础学习 ExtJS笔记（一）”和描述，介绍ExtJS的基础知识，特别是如何创建一个基本的界面框架。 首先，要使用ExtJS，我们需要引入必要的CSS样式表和JavaScript库。在HTML文件中，我们看到引用...
Extjs学习笔记之一 初识Extjs之MessageBox
10-29
【ExtJS MessageBox 知识点详解】 ExtJS 是一个用于构建富客户端Web应用的JavaScript库，提供了丰富的组件和用户界面元素。在初识ExtJS的过程中，我们常常会遇到`MessageBox`，它是一个非常实用的弹出对话框组件，...
Extjs4——表单与输入控件
weixin_30707875的博客
09-16 226
1.表单的简单形式： var form = new Ext.form.FormPanel({ title: 'form', defaultType: 'textfield', buttonAlign: 'center', frame: true, width: 220, ...
ExtJS 4.2.4 完整版本
08-26
ExtJS 4.2.4 完整版本 Release Notes for Ext JS 4.2.4 Release Date: July 29, 2015 Version Number: 4.2.4.1720
extjs4自定义深蓝色主题
11-17
之前项目使用的一个深蓝色主题，继承自extjs4原生classic主题。 先引入ext-ux-all.css，再引入fixed.css
extjs4实例
03-26
NULL 博文链接：https://wcf0987.iteye.com/blog/1166232
ExtJS4组件_Grid配置-属性-方法详解-案例
heitdf
12-10 5771
1、Ext.grid.GridPanel 主要配置项： store：表格的数据集 columns：表格列模式的配置数组，可自动创建ColumnModel列模式 autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0 stripeRows：表格是否隔行换色，默认为false cm、colModel：表格的列模式，渲染表格时必须设置该配置项 sm、sel
Extjs4教程一之入门教学
qq_17522839的专栏
08-14 2532
最近刚到一家新公司
ExtJS4——Ext.onReady、Ext.define、Ext.create基础方法
ヾ凉秋的博客
10-25 1057
Ext.onReady 说明：onReady内的语句块会在页面上下文加载后再执行 例子： rel="stylesheet" type="text/css" /> Ext.onReady(function () { //获取页面元素，元素ID为“onReady” var input = Ext.get("onReady"); Ext.Msg.alert("隐藏控件内容",input.dom.value); });
extjs4知识点汇总
chimu9074的博客
08-20 251
1.Config Options 和Public Properties区别： 配置项是在创建组件时生成，相当于构造函数的参数；属性是在组件创建后能取到的组件属性，相当于成员变量 2.初始化执行过程 controller的init方法优先于application的lau...
ExtJS 4 数据(包)详解
xiaoshang的专栏
01-15 619
data包是负责加载和保存应用中的数据的包，有41个类，其中三个是最重要的：Model,Store,Ext.data.proxy.Proxy，几乎每个应用都要用到它们，有若干个支持类辅助它们： Models and Stores 模型和存储器 data包的中心是Ext.data.Model，模型代表了应用中的一些数据类型，例如电子商务应用中可能会有Users,Products,
ExtJs知识点概述
热门推荐
晨港飞燕的专栏
06-29 1万+
1.前言 ExtJS的前身是YUI(Yahoo User Interface)。经过不断的发展与改进，ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基础库之一,利用ExtJS构建的WEB应用具有与桌面程序一样的标准用户界面和操作方式，并能够跨不同的浏览器平台使用。 就目前的市场趋势，现在用户对体验的要求越来越高。涌现出很多优秀的前台java
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值