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> 

你可能感兴趣的:(JavaScript,function,ExtJs,callback,工具,stylesheet)