0

折りたたみ可能なパネルでツールバーを使用してグリッドをレンダリングする際に問題があります。下部のコードでわかるように、リーダー、ストア、bbar とパネルを備えたグリッドがあります。パネルの折りたたみ可能なプロパティをfalseグリッドのツールバーに設定すると、完全にレンダリングされます。しかし、パネルの折りたたみ可能なプロパティをtrueに設定してからパネルを展開すると、ツールバーが表示されません。ツールバーでグリッドを表示し、パネルのデータを問題なく展開したい。このコードを修復するにはどうすればよいですか?

ありがとうございます。

var reader_DailyActivity = new Ext.data.JsonReader({
    totalProperty       : 'total',
    successProperty : 'success',
    root            : 'data',
    fields          : [
                        {name: 'date'},
                        {name: 'time'},
                {name: 'description'},
                {name: 'speed'},
                {name: 'distance'},
                {name: 'type'},
                {name: 'source'}
            ]
});

var store_DailyActivity = new Ext.data.Store({
    id      : 'dailyActivityStoreID',
    reader      : reader_DailyActivity
});

var pagingToolbar = new Ext.PagingToolbar({
    pageSize    : 20,
    buttonAlign     : 'center',
    store       : store_DailyActivity
});

var DailyActivityGrid = new Ext.grid.GridPanel({
    id          : 'dailyActivityGrid',
    store           : store_DailyActivity,
    loadMask        : true,
    height          : 300,
    autoScroll      : true,
    viewConfig      : { 
        emptyText       : 'No Record Found',
        deferEmptyText  : false,
        forceFit        : true
    },
    columns         :[
                    {header: 'Date', dataIndex: 'date'},
                    {header: 'Time', dataIndex: 'time'},
                    {header: 'Description', dataIndex: 'description'},
                    {header: 'Speed', dataIndex: 'speed'},
                    {header: 'Distance', dataIndex: 'distance'},
                    {header: 'Type', dataIndex: 'type'},
                    {header: 'Source', dataIndex: 'source'}
                ],
    bbar        : pagingToolbar
});

var VehicleDetail = new Ext.Panel({
    title       : 'Activity Details',
    id      : 'panel_DetailID',
    collapsible : true,
    collapsed   : true,
renderTo    : 'renderedDivID',
    items       : DailyActivityGrid,
    listeners   : {
        'expand' : function(hede)
        {
            var panelMask = Ext.getCmp('panel_DetailID');
            // mask grid panel
            panelMask.getEl().mask('Please Wait');

        Ext.Ajax.request({                 
                url: 'url comes here',
                params: 
                {
                    param1  : reqParam1,
            start   : 0,
            limit   : 20
                },
                success: function (result, request) 
                {                   
                    var resData = Ext.util.JSON.decode(result.responseText);
                    store_DailyActivity.loadData(resData);
                    // unmask grid panel
                    panelMask.getEl().unmask();
                },
                failure: function ()
                {
                    console.log('error');
                }
        });
        }
    }
});
4

2 に答える 2

4

GridPanel の高さを削除してみてください。エキスパンダーにグリッドをロードしようとしていた RowExpander で同じ問題が発生しました。私の場合、グリッドは正常に表示されましたが、高さの制約により tbar と bbar は表示されませんでした。したがって、グリッドの高さを削除しようとしたところ、成功しました。あなたの問題は私のものと似ているように見えるので、この提案を試してみてください。それがうまくいくことを願っています！

于 2012-11-02T07:57:03.410 に答える
1

あなたが試すことができるいくつかのこと：

  1. 含まれているパネルにレイアウト構成を与えますlayout: 'fit'。
  2. 明示的なドッキングアイテムを使用します。つまり、削除して次のようbbar: pagingToolbarに配置します。
dockedItems: [{
    xtype: 'pagingtoolbar',
    dock: 'bottom',
    pageSize: 20,
    buttonAlign: 'center',
    store: store_DailyActivity
}],
于 2012-05-17T15:58:11.963 に答える