Ext开发代码片段搜集

1.  表格数据加载后默认选中第一条

   可以在表格的render 添加如下监听事件

  listeners : { 'render':function(){ var _grid = Ext.getCmp('GridId'); _grid.store.load(); _grid.getSelectionModel().selectFirstRow(); // _grid.getSelectionModel().selectRow(0); } }

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

  function showUrl(value){ return "<a href="http://"+value+"" mce_href="http://"+value+"" target=_blank'>"+value+"</a>"; }

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

 

bbar: new Ext.PagingToolbar({ pageSize: 8, store: CRMDisBaseInfoStore, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录",items:[G_P_paging()] }) var G_P_paging = function(){ return new Ext.form.ComboBox({ store: [['5','5'],['10','10'],['50','50'],['100','100']], emptyText: '请选择', width:80, mode: 'local', triggerAction: 'all', valueField: 'value', displayField: 'text', readOnly:true, listeners:{ select:function(_combo , _record , _index){ var _b=_combo.findParentByType('paging'); var paging_value =_combo.getValue(); if(paging_value==""){ _b.pageSize=10; _combo.findParentByType('editorgrid').getStore().load({params:{start:0, limit:10}}); }else{ _b.pageSize=paging_value; _combo.findParentByType('editorgrid').getStore().load({params:{start:0, limit:paging_value}}); } _combo["selectItem"] = _record ; } } }) }

 

4. grid 的store操作常用代码

 

firstGrid.on({ 'rowdblclick' : function() { var m = firstGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { secondGrid.getStore().add(m[i]); firstGrid.getStore().remove(m[i]); } } }); secondGrid.on({ 'rowdblclick' : function() { var m = secondGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { firstGrid.getStore().add(m[i]); secondGrid.getStore().remove(m[i]); } } }); //将选中的行到右边 function toRight() { var m = firstGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { secondGrid.getStore().add(m[i]); firstGrid.getStore().remove(m[i]); } } //将选中的行到左边 function toLeft() { var m = secondGrid.getSelectionModel().getSelections(); for (var i = 0; i < m.length; i++) { firstGrid.getStore().add(m[i]); secondGrid.getStore().remove(m[i]); } } //左边选中的数据全部到右边 function toAllRight() { firstGrid.getSelectionModel().selectAll(); var num = firstGrid.getStore().getCount(); var m = firstGrid.getSelectionModel().getSelections(); firstGrid.getStore().removeAll(); for (var i = 0; i < num; i++) { secondGrid.getStore().add(m[i]); } } //右边选中的数据全部到左边 function toAllLeft() { secondGrid.getSelectionModel().selectAll(); var num = secondGrid.getStore().getCount(); var m = secondGrid.getSelectionModel().getSelections(); secondGrid.getStore().removeAll(); for (var i = 0; i < num; i++) { firstGrid.getStore().add(m[i]); } } function removeRight() { secondGrid.getStore().removeAll(); firstGrid.getStore().reload(); }

 

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){  

}