Ext开发代码片段搜集

[javascript] view plaincopy

1. listeners : {  
2.    'render':function(){  
3.     var _grid = Ext.getCmp('GridId');  
4.      _grid.store.load();  
5.      _grid.getSelectionModel().selectFirstRow();  
6.     //  _grid.getSelectionModel().selectRow(0);  
7.    
8.    }  
9. }  

2.  表格单元设置连接方式之一

 

[javascript]  view plain copy

1. function showUrl(value){                            
2.   
3.        return "<a href="http://"+value+"" mce_href="http://"+value+"" target=_blank'>"+value+"</a>";  
4.   
5.  }  

3.  Grid下方分页组件的分页数combox控制

 

[javascript]  view plain copy

1.   bbar: new Ext.PagingToolbar({  
2.           pageSize: 8,  
3.           store: CRMDisBaseInfoStore,  
4.           displayInfo: true,  
5.           displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',  
6.           emptyMsg: "没有记录",items:[G_P_paging()]  
7.      })  
8. var G_P_paging = function(){  
9.        return new Ext.form.ComboBox({  
10.             store: [['5','5'],['10','10'],['50','50'],['100','100']],  
11.             emptyText: '请选择',  
12.             width:80,  
13.             mode: 'local',  
14.             triggerAction: 'all',  
15.             valueField: 'value',  
16.             displayField: 'text',  
17.             readOnly:true,  
18.             listeners:{  
19.                 select:function(_combo , _record , _index){  
20.                     var _b=_combo.findParentByType('paging');  
21.                     var paging_value =_combo.getValue();  
22.                     if(paging_value==""){  
23.                             _b.pageSize=10;  
24.                             _combo.findParentByType('editorgrid').getStore().load({params:{start:0, limit:10}});  
25.                         }else{  
26.                             _b.pageSize=paging_value;  
27.                             _combo.findParentByType('editorgrid').getStore().load({params:{start:0, limit:paging_value}});  
28.                         }  
29.                                   
30.                     _combo["selectItem"] = _record ;  
31.                 }  
32.             }  
33.       })  
34. }  

 

4. grid 的store操作常用代码

 

[c-sharp]  view plain copy

1. firstGrid.on({  
2.             'rowdblclick' : function() {  
3.                 var m = firstGrid.getSelectionModel().getSelections();  
4.                 for (var i = 0; i < m.length; i++) {  
5.                     secondGrid.getStore().add(m[i]);  
6.                     firstGrid.getStore().remove(m[i]);  
7.                 }  
8.             }  
9.         });  
10.           
11.         secondGrid.on({  
12.             'rowdblclick' : function() {  
13.                 var m = secondGrid.getSelectionModel().getSelections();  
14.                 for (var i = 0; i < m.length; i++) {  
15.                     firstGrid.getStore().add(m[i]);  
16.                     secondGrid.getStore().remove(m[i]);  
17.                 }  
18.             }  
19.         });  
20.     //将选中的行到右边  
21.     function toRight() {  
22.         var m = firstGrid.getSelectionModel().getSelections();  
23.         for (var i = 0; i < m.length; i++) {  
24.             secondGrid.getStore().add(m[i]);  
25.             firstGrid.getStore().remove(m[i]);  
26.         }  
27.     }  
28.       
29.     //将选中的行到左边  
30.     function toLeft() {  
31.         var m = secondGrid.getSelectionModel().getSelections();  
32.         for (var i = 0; i < m.length; i++) {  
33.             firstGrid.getStore().add(m[i]);  
34.             secondGrid.getStore().remove(m[i]);  
35.         }  
36.     }  
37.     //左边选中的数据全部到右边  
38.     function toAllRight() {  
39.         firstGrid.getSelectionModel().selectAll();  
40.         var num = firstGrid.getStore().getCount();  
41.         var m = firstGrid.getSelectionModel().getSelections();  
42.         firstGrid.getStore().removeAll();  
43.         for (var i = 0; i < num; i++) {  
44.             secondGrid.getStore().add(m[i]);  
45.         }  
46.     }  
47.       
48.     //右边选中的数据全部到左边  
49.     function toAllLeft() {  
50.         secondGrid.getSelectionModel().selectAll();  
51.         var num = secondGrid.getStore().getCount();  
52.         var m = secondGrid.getSelectionModel().getSelections();  
53.         secondGrid.getStore().removeAll();  
54.         for (var i = 0; i < num; i++) {  
55.             firstGrid.getStore().add(m[i]);  
56.         }  
57.     }  
58.   
59.     function removeRight() {  
60.         secondGrid.getStore().removeAll();  
61.         firstGrid.getStore().reload();  
62.     }  

 

5. EXtJs界面开发中遇到的问题

   页面报错:未结束的字符串常量

   可能原因js文件出现了中文乱码问题，可以在如下引入js文件
   <script type="text/javascript" src="../../extJs-lib/scripts/ext/ext-lang-zh_CN.js"    charset="utf-8">

  视图界面展示报错: events 为空
   代码段某个组件最后一个配置参数多了一个逗号

  组件设置了滚动条配置参数，但界面展示未能出现滚动条
    需要在对相应组件设置高度

  在form里面不能显示textfield等组件的标签
    需要把相应组件的布局设置为form

  布局中均匀拉伸效果

   保证上层组件布局为border,下层组件配置 anchor属性即可实现。

   Ext弹出框口让其他处于最前面：modal:true

 

6.Ext grid中得到选择行的方法 

 在Ext grid中假设有一个名称为grid的对象。

(1)grid.getStore().getRange(0,store.getCount());//得到grid所有的行

(2)grid.getSelectionModel().getSelections()//得到选择所有行

(3)grid.selModel.selections.items;//得到选择所有行

(4)grid.getSelectionModel().getSelected();//得到选择行的第一行

 

7. ExtJS如何给textfield赋值的三个方法：

var value="值";

(1) fs.form.findField(id/name).setValue(value);

(2) Ext.get(id/name).setValue(value);

(3) Ext.getCmp(id).setValue(value);

取值方法类似，只需改写名称set为get即可

 

8.  extjs控制组件样式代码

 

        {
               text : '查询',
               id:'query_id',
               iconCls:'icon_query'
         }

icon_query即为css文件里定义的样式名称。

 

9.  渲染函数的语法

 

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){   

 

}    

value 是当前单元格的值   

cellmeta  里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。   

record 是这行的所有数据，你想要什么，record.data["id"]这样就获得了。   

rowIndex  是行号，不是从头往下数的意思，而是计算了分页以后的结果。   

columnIndex  列号太简单了。   

      Store这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用 

      开发中用到第一个参数较多。简略形式为

renderer:function(value){  

}