rowexpander でグリッドを作りたいです。テンプレートと rowexpander がありますが、rowexpander のテンプレート データをロードするために gridpanel のストアを使用したくありません。ajax リクエストが成功した場合 (TODO ワードで述べたように)、rowexpander を動的に作成し、rowExpanderStore からデータをロードしたいと考えています。どうすればこれを行うことができますか?
私のコードは以下のとおりです。
var rowExpanderStore = new Ext.data.Store({
root : 'rowExpanderStoreRoot',
fields : [
{name: 'caption1'}, {name: 'caption2'}, {name: 'caption3'},
{name: 'caption4'}, {name: 'caption5'}, {name: 'caption6'}
]
});
var gridPanelStore = new Ext.data.Store({
successProperty : 'success',
root : 'gridPanelStoreRoot',
fields : [{name: 'id'}, {name: 'date'}, {name: 'time'}, {name: 'address'}]
});
var myTemplate = new Ext.Template(
'<table class="bgrGREYlight" width="100%" height="99%">' +
'<tbody>' +
'<tr>' +
'<th align="left" width="15%" class="tableTEXT2">Address1</th>' +
'<td width="85%" align="left" class="tableTEXT">{address1}</td>' +
'</tr>'+
'<tr>' +
'<th align="left" width="15%" class="tableTEXT2">Address2</th>' +
'<td width="85%" align="left" class="tableTEXT">{address2}</td>' +
'</tr>'+
'</tbody>' +
'</table>'
);
// row expander
myRowExpander = new Ext.ux.grid.RowExpander({
tpl : template
});
Ext.Ajax.request({
url : '/action/loadSmtData',
success: function ( result, request ) {
var jsonData = Ext.util.JSON.decode(result.responseText);
rowExpanderStore.loadData(jsonData);
// TODO: I want to create template and rowexpander here
// and I don't want to use grid's store, I want to use another store load template data
},
failure: function ( result, request ) {
Ext.MessageBox.alert('Failed', result.responseText);
}
});
Detail_Grid = new Ext.grid.GridPanel({
store : gridPanelStore,
loadMask : true,
maxHeight : 300,
autoHeight : true,
autoScroll : true,
layout : 'fit',
viewConfig : {
emptyText : 'no record found!',
deferEmptyText : false,
forceFit : true
},
autoExpandColumn: 2,
plugins : myRowExpander,
columns :[
myRowExpander,
{header: 'id', dataIndex: 'id'},
{header: 'date', dataIndex: 'date'},
{header: 'time', dataIndex: 'time'},
{header: 'address', dataIndex: 'address1'}
]
});
var Detail_Panel = new Ext.Panel({
title : 'Detail Panel',
padding : 5,
collapsible : true,
collapsed : true,
items : [Detail_Grid]
});