ExtJS样例总结 -4

 

1、联动菜单

  
  
  
  
  1. var provinces = [ [ 1, '北京' ], [ 2, '上海' ] ]; 
  2. var cities = new Array(); 
  3. cities[1] = [ [ 11, '海淀' ], [ 22, '东城' ] ]; 
  4. cities[2] = [ [ 33, '黄埔' ], [ 44, '浦东' ], [ 55, '静安' ] ]; 
  5.  
  6. var comboProvinces = new Ext.form.ComboBox({ 
  7.  
  8.     store : new Ext.data.SimpleStore({ 
  9.         fields : [ "provinceId""provinceName" ], 
  10.         data : provinces 
  11.     }), 
  12.  
  13.     listeners : { 
  14.         select : function(combo, record, index) { 
  15.             comboCities.clearValue(); 
  16.             comboCities.store.loadData(cities[record.data.provinceId]); 
  17.         } 
  18.     }, 
  19.  
  20.     valueField : "provinceId"
  21.     displayField : "provinceName"
  22.     mode : 'local'
  23.     forceSelection : true
  24.     blankText : '请选择省份'
  25.     emptyText : '请选择省份'
  26.     hiddenName : 'provinceId'
  27.     editable : false
  28.     triggerAction : 'all'
  29.     allowBlank : true
  30.     fieldLabel : '请选择省份'
  31.     name : 'provinceId'
  32.     width : 80 
  33.  
  34. }); 
  35.  
  36. var comboCities = new Ext.form.ComboBox({ 
  37.     store : new Ext.data.SimpleStore({ 
  38.         fields : [ "cityId"'cityName' ], 
  39.         data : [] 
  40.     }), 
  41.  
  42.     valueField : "cityId"
  43.     displayField : "cityName"
  44.     mode : 'local'
  45.     forceSelection : true
  46.     blankText : '选择地区'
  47.     emptyText : '选择地区'
  48.     hiddenName : 'cityId'
  49.     editable : false
  50.     triggerAction : 'all'
  51.     allowBlank : true
  52.     fieldLabel : '选择地区'
  53.     name : 'cityId'
  54.     width : 80 
  55. }); 
  56.  
  57. new Ext.Window({ 
  58.     width : 300, 
  59.     height : 200, 
  60.     layout : 'column'
  61.     items : [ comboProvinces, comboCities ] 
  62. }).show(); 

2、让window最小化:重写minimize方法

  
  
  
  
  1. var window = new Ext.Window({ 
  2.         width : 400, 
  3.         height : 300, 
  4.         title : 'my window'
  5.         minimizable :true
  6.         minimize : function() { 
  7.             window.hide(); 
  8.         }, 
  9.         maximizable : true 
  10.     }); 
  11.     window.show(); 

3、灵活的javascript

  
  
  
  
  1. function Animal(name) { 
  2.     this.name = name; 
  3.     this.age = 0; 
  4. }; 
  5.  
  6. alert(Animal); //赋值功能。输出函数本身
  7. alert(Animal());//执行函数。undefined,执行函数但无返回值
  8. alert(new Animal());//object 
  9. alert(new Animal);//object 

4、javascript的可变参数:定义时不需要指定输入参数个数

  
  
  
  
  1. function sum() { 
  2.     var s = 0; 
  3.     for(var i = 0; i < arguments.length ; i++){ 
  4.         s += arguments[i]; 
  5.     } 
  6.     return s; 
  7. }; 
  8.  
  9. alert(sum(1,2)); 
  10. alert(sum(1,2,3,4,5,6)); 

5、combo默认选中一个,且前台展示和后台传值存在mapping关系

  
  
  
  
  1. render : function(combo) {   
  2.                         combo.setValue("0");   //设置默认选中第一个值   
  3.                     }   

 

  
  
  
  
  1. data : [ ['all', '0'],['ip', '1'], ['cookie', '2']] 

默认前台会选中all 

6、combo从远程记载数据

  
  
  
  
  1. var mystore = new Ext.data.ArrayStore({  
  2.     fields : [ 'myId''displayText' ],  
  3.     //data : [ [ 1, 'ALL' ], [ 2, 'IP' ], [ 3, 'COOKIE' ] ] 
  4.     proxy: new Ext.data.HttpProxy({url: '../../blackList/searchCookieTypes.do'}),    
  5. });  
  6. var top = new Ext.FormPanel({  
  7.     width : 600,  
  8.     height : 400,  
  9.     title : 'hello',  
  10.     labelWidth: 50,  
  11.     labelAlign:'right',  
  12.     bodyStyle : 'padding:5px 5px 10 10',  
  13.     frame : true,  
  14.     defaults : {  
  15.         xtype : 'combo',  
  16.         width : 120,  
  17.         height : 20,  
  18.         typeAhead: true,  
  19.         triggerAction: 'all',  
  20.         lazyRender:true,  
  21.         mode: 'remote',  
  22.         valueField: 'myId',  
  23.         displayField: 'displayText'  
  24.     },  
  25.     items : [ {  
  26.         fieldLabel : 'lable1',  
  27.         store : mystore  
  28.     }  
  29.     , {  
  30.         fieldLabel : 'lable2',  
  31.         store : mystore  
  32.     }],  
  33.     buttons : [ {  
  34.         text : 'save'  
  35.     }, {  
  36.         text : 'cancel'  
  37.     } ]  
  38. });  
  39.  
  40. top.render(document.body);  

7、gridpanle的展示与数据传递分开

返回:回调ColumnModel的 renderer  方法

  
  
  
  
  1. header : "处罚方式"
  2. dataIndex : 'punishMode'
  3. //水印:0、断链:1、错误码(拦截):2 
  4. renderer : function(punishNumber) { 
  5.     if(punishNumber == 0){ 
  6.         return "水印"
  7.     } 
  8.     if(punishNumber == 1){ 
  9.         return "断链"
  10.     } 
  11.     if(punishNumber == 2){ 
  12.         return "错误码"
  13.     } 
  14.     return ""

下发数据:只能java代码处理,无法做映射回去

8、switch语句

  
  
  
  
  1. var submitObject = form.getValues(); 
  2.                         submitObject.appId = appId; 
  3.                         switch(submitObject.punishMode){ 
  4.                             case 'waterMark':submitObject.punishMode='0';break
  5.                             case 'disconnect':submitObject.punishMode='1';break
  6.                             case 'errorCode':submitObject.punishMode='2';break
  7.                             default:submitObject.punishMode=""
  8.                         } 

9、html中的靠左显示和靠右显示

 

<span style='float:left'>居左</span><span style='float:right'>居右</span>

<div style="float:left;">靠左显示</div>

<div style="float:right;">靠右显示</div> 

10、js中的续行 

js符是“\”
document.write("dsdddddd\
dffdsg\
gdfsgfd\
gfdgfdgdf";
是合法代码

11、顶部用户名显示:header_panel.body.update(topMenu);

  
  
  
  
  1. var header_panel = new Ext.Panel( 
  2.                     { 
  3.                         // frame : false, 
  4.                         // border : false, 
  5.                         autoScroll : false
  6.                         height : 60, 
  7.                         region : 'north'
  8.                         bodyStyle : 'background-color:#D5E2F2'
  9.                         listeners : { 
  10.                             afterrender : function(thiz) { 
  11.                                 Ext.Ajax.request({ 
  12.                                             url : '../../user/getUserName.do'
  13.                                             success : function(response, opts) { 
  14.                                                 var responseText = Ext.decode(response.responseText); 
  15.                                                 if (responseText.success) { 
  16.                                                     username = responseText.data[0]; 
  17.                                                 } else { 
  18.                                                     username = "customer"
  19.                                                 } 
  20.                                                 var topMenu = '<p><img alt="" src="logo.png"><a href="main.html">首页</a>&nbsp;\ 
  21.                                                     用户:'+ username + ' &nbsp;&nbsp;<a href="../others/others.html">退出系统</a></p>'; 
  22.                                                 header_panel.body.update(topMenu); 
  23.                                             } 
  24.                                         }); 
  25.                             } 
  26.                         }/*, 
  27.                         html : '<p><img alt="" src=\'#\'" /a>&nbsp;\ 
  28.                         用户:Admin'+ username + ' &nbsp;&nbsp;<a href="../others/others.html">退出系统</a></p>'*/ 
  29.                     }); 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(ExtJs)