ExtJS4表格的嵌套rowExpander应用
今天做一个网格,里面的数据需要带明细,思来想去还是搞个表格嵌套吧!看下图
对于格子中每一条记录点击左边的号能展开一个明细的子表格所有数据包括列名均从后台获得,子表格的数据暂时在本地以做测试在此贴一些代码留下记录复制代码代码如下:函数displayInnerGrid(renderId){//内部网格存储区外部定义的模型(' TestModel ',{ extend: 'Ext.data.Model ',字段3360[{ name : ' field 1 ' },{ name: 'Field2' },{ name : ' field 3 ' }]});//内部网格var dummyDataForInsideGrid的伪数据=[ ['a ',' a ',' a'],['b ',' b ',' b'],['c ',' c ',' c '];var insideGridStore=ext。创建(' ext。数据。arraystore ',{ model: 'TestModel ',data : dummy data or side grid });innerGrid=ext。创建(' ext。网格。panel ',{ store: insideGridStore,sel model : { sel type : ' cell model ' },第3360列[{ text : '明细1 ',数据索引: '字段1' },{文本: '明细2 ',数据索引: '字段2' },{文本: '明细3 ',dataIndex: 'Field3' } ],columnLines: true,autoWidth: true,autoHeight: true,//width: 400,//height: 200,frame: false,//iconcl 3360 ' icon-grid ',render to 3360 render id });/* innerGrid.getEl().swalloweevent(['鼠标向下','鼠标向上','单击',' contextmenu ',' mouseover ',' mouseout ',' dblclick ','鼠标移动']);*/}函数destroyInnerGrid(记录){ var parent=document。getelementbyid(记录。get(' id ');var child=parent . first childwhile(child){ child。父节点。移除子(child);child=child.nextSibling} }复制代码代码如下: grid _ huizon。查看。on(' expandBody ',函数(rowNode,record,expandorl,eOpts){//console。日志(记录。get(' id '));显示内部网格(记录。get(' id ');});网格_惠宗。查看。打开('折叠体',函数(rowNode,record,expandRow,eOpts){ destroyInnerGrid(record);});以上代码为格子绑定事件。具体代码啥意思应该能看懂注意在定义格子的时候使用复制代码代码如下:插件:[{ ptype : ' rowexpander ',rowBodyTpl : [ 'div id='{id} ','/div' ] }],这个是rowexpander插件。网上有人说用的时候需要引用,但是我没引用什么也可以用了?注意上面三段代码中关键的id,这个编号你可以改,但是需要改成后台发过来的数据中田地(复数);场;域;字段中的第一项。我这个例子后台发过来的田地(复数);场;域;字段第一项是编号
版权声明:ExtJS4表格的嵌套rowExpander应用是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。