Ext的Grid自適應問題解決方案

應該是Ext的bug,當給grid的寬度設爲100%時,其寬度會變成10000px,高度設置爲100%,其內容自適應,而不是根據其容器自適應。
無奈只能經過其高度寬度設置爲固定值(很管用的)
這樣不論頁面寬度怎麼變化grid都會自適應頁面容器了。ide

js代碼以下:
   // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", sortable: true, dataIndex: 'company'},
            {header: "Price", sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        frame:true,
        plugins: new Ext.ux.PanelResizer({
            minHeight: 100
        }),orm

        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            plugins: new Ext.ux.ProgressBarPager()
        })
    });事件

    grid.render('grid-example');
    grid.setWidth(document.body.clientWidth-10);
    grid.setHeight(document.body.clientHeight-50);ip

    store.load({params:{start:0, limit:10}});
    //當窗口固定時觸發的事件
    window.onresize=function(){
        grid.setWidth(document.body.clientWidth-10);
        grid.setHeight(document.body.clientHeight-50);
    };
});
 it

相關文章
相關標籤/搜索