ExtJS4 表格的嵌套 rowExpander應用
更新時間:2014年05月02日 11:42:17 作者:
今天做一個grid,里面的數據需要帶明細,思來想去還是搞個表格嵌套吧,需要的朋友可以參考下
今天做一個grid,里面的數據需要帶明細,思來想去還是搞個表格嵌套吧!看下圖
對于grid中每一條記錄點擊左邊的+號能展開一個明細的子表格 所有數據包括列名均從后臺獲得,子表格的數據暫時在本地以做測試
在此貼一些代碼留下記錄
function displayInnerGrid(renderId) {
//Model for the inside grid store
Ext.define('TestModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Field1' },
{ name: 'Field2' },
{ name: 'Field3' }
]
});
//dummy data for the inside grid
var dummyDataForInsideGrid = [
['a', 'a', 'a'],
['b', 'b', 'b'],
['c', 'c', 'c']
];
var insideGridStore = Ext.create('Ext.data.ArrayStore', {
model: 'TestModel',
data: dummyDataForInsideGrid
});
innerGrid = Ext.create('Ext.grid.Panel', {
store: insideGridStore,
selModel: {
selType: 'cellmodel'
},
columns: [
{ text: "明細1", dataIndex: 'Field1' },
{ text: "明細2", dataIndex: 'Field2' },
{ text: "明細3", dataIndex: 'Field3' }
],
columnLines: true,
autoWidth: true,
autoHeight: true,
//width: 400,
//height: 200,
frame: false,
// iconCls: 'icon-grid',
renderTo: renderId
});
/* innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]); */
}
function destroyInnerGrid(record) {
var parent = document.getElementById(record.get('id'));
var child = parent.firstChild;
while (child) {
child.parentNode.removeChild(child);
child = child.nextSibling;
}
}
grid_huizong.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
//console.log(record.get('id'));
displayInnerGrid(record.get('id'));
});
grid_huizong.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
});
以上代碼為grid綁定事件。。具體代碼啥意思應該能看懂
注意在定義grid的時候使用
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<div id="{id}">',
'</div>'
]
}],
這個是rowexpander插件。。網上有人說用的時候需要引用,但是我沒引用什么也可以用了?
注意上面三段代碼中關鍵的id,這個id你可以改,但是需要改成后臺發(fā)過來的數據中fields中的第一項。。我這個例子后臺發(fā)過來的fields第一項是id

對于grid中每一條記錄點擊左邊的+號能展開一個明細的子表格 所有數據包括列名均從后臺獲得,子表格的數據暫時在本地以做測試
在此貼一些代碼留下記錄
復制代碼 代碼如下:
function displayInnerGrid(renderId) {
//Model for the inside grid store
Ext.define('TestModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Field1' },
{ name: 'Field2' },
{ name: 'Field3' }
]
});
//dummy data for the inside grid
var dummyDataForInsideGrid = [
['a', 'a', 'a'],
['b', 'b', 'b'],
['c', 'c', 'c']
];
var insideGridStore = Ext.create('Ext.data.ArrayStore', {
model: 'TestModel',
data: dummyDataForInsideGrid
});
innerGrid = Ext.create('Ext.grid.Panel', {
store: insideGridStore,
selModel: {
selType: 'cellmodel'
},
columns: [
{ text: "明細1", dataIndex: 'Field1' },
{ text: "明細2", dataIndex: 'Field2' },
{ text: "明細3", dataIndex: 'Field3' }
],
columnLines: true,
autoWidth: true,
autoHeight: true,
//width: 400,
//height: 200,
frame: false,
// iconCls: 'icon-grid',
renderTo: renderId
});
/* innerGrid.getEl().swallowEvent([
'mousedown', 'mouseup', 'click',
'contextmenu', 'mouseover', 'mouseout',
'dblclick', 'mousemove'
]); */
}
function destroyInnerGrid(record) {
var parent = document.getElementById(record.get('id'));
var child = parent.firstChild;
while (child) {
child.parentNode.removeChild(child);
child = child.nextSibling;
}
}
復制代碼 代碼如下:
grid_huizong.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
//console.log(record.get('id'));
displayInnerGrid(record.get('id'));
});
grid_huizong.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
destroyInnerGrid(record);
});
以上代碼為grid綁定事件。。具體代碼啥意思應該能看懂
注意在定義grid的時候使用
復制代碼 代碼如下:
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<div id="{id}">',
'</div>'
]
}],
這個是rowexpander插件。。網上有人說用的時候需要引用,但是我沒引用什么也可以用了?
注意上面三段代碼中關鍵的id,這個id你可以改,但是需要改成后臺發(fā)過來的數據中fields中的第一項。。我這個例子后臺發(fā)過來的fields第一項是id
您可能感興趣的文章:
- Extjs grid添加一個圖片狀態(tài)或者按鈕的方法
- ExtJS[Desktop]實現(xiàn)圖標換行示例代碼
- 解決Extjs上傳圖片無法預覽的解決方法
- ExtJs之帶圖片的下拉列表框插件
- ExtJS 4.2 Grid組件單元格合并的方法
- ExtJS4的文本框(textField)使用正則表達式進行驗證(Regex)的方法
- ExtJS4給Combobox設置列表中的默認值示例
- ExtJS4如何自動生成控制grid的列顯示、隱藏的checkbox
- extJS中常用的4種Ajax異步提交方式
- extjs4 treepanel動態(tài)改變行高度示例
- ExtJS4中的requires使用方法示例介紹
- extjs4圖表繪制之折線圖實現(xiàn)方法分析
相關文章
EXTJS記事本 當CompositeField遇上RowEditor
用RowEditor作批量編輯器時,遇到一個問題,想要在Roweditor中使用三個下拉列表組成級聯(lián)式選擇控件2011-07-07Extjs中ComboBoxTree實現(xiàn)的下拉框樹效果(自寫)
最近涉及到的一個項目中,需要實現(xiàn)ComboBoxTree的效果,由于在Extjs中是沒有這種效果,所以看看別人的資料自己寫了一個,感興趣的朋友可以參考下哈2013-05-05Ext中下拉列表ComboBox組件store數據格式用法介紹
本文為大家詳細介紹下Ext中下拉列表ComboBox組件store數據格式的基本用法,感興趣的朋友可以參考下哈,希望對大家有所幫助2013-07-07extjs 3.31 TreeGrid實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面
extjs 3.31 TreeGrid 我的小改動,實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面2013-04-04