zoukankan      html  css  js  c++  java

  • 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.             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.             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.             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.             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.             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.             500  
    5.         });  
    6.         toolbar.add(  
    7.             {text:'新建'},{text:'打开'},  
    8.             {text:'编辑'},{text:'保存'}, //加入按钮  
    9.             '-',                          //加入工具栏分隔符  
    10.             {     //加入表单元素  
    11.                 xtype:'textfield',  
    12.                 hideLabel : true,  
    13.                 150  
    14.             },  
    15.             '->',                        //加入一个充满工具栏的空白元素  
    16.             '<a href=#>超连接</div>',    //加入一个Element元素  
    17.             {xtype: 'tbspacer',  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.             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.             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.             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.             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.             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>  
  • 相关阅读:
    Azure HPC Pack Cluster添加辅助节点
    Azure HPC Pack 辅助节点模板配置
    Azure HPC Pack配置管理系列（PART6）
    Windows HPC Pack 2012 R2配置
    Azure HPC Pack 节点提升成域控制器
    Azure HPC Pack VM 节点创建和配置
    Azure HPC Pack 部署必要条件准备
    Azure HPC Pack 基础拓扑概述
    Azure VM 性能计数器配置
    Maven私仓配置
  • 原文地址：https://www.cnblogs.com/zhaoxd/p/3049219.html
Copyright © 2011-2022 走看看