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