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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="http://www.cnblogs.com/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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="http://www.cnblogs.com/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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="http://www.cnblogs.com/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="http://www.cnblogs.com/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="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
  13.   <script type="text/javascript" src="http://www.cnblogs.com/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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
    7.   <script type="text/javascript" src="http://www.cnblogs.com/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>  
posted @ 2013-04-28 14:20  赵雪丹  阅读(177)  评论(0)  编辑  收藏  举报