1

我想用rowexpander制作一个网格。我有一个模板和一个rowexpander，但我不想使用gridpanel 的store 来加载rowexpander 的模板数据。我想在 ajax 请求成功案例中动态创建 rowexpander（正如我用 TODO 字声明的那样），并想从 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]
});
4

0 回答 0