ExtJS的。使網格寬度適合面板

Question

我是ExtJ的新手，無法解決問題。

我有一個已調整為適合其面板容器的網格（布局：fit），但是當我合攏面板時，該網格無法調整為新的寬度。 如果我沒記錯的話，ExtJs可以自動執行此操作。

這是我的代碼

Ext.create('Ext.Viewport', {
    id: 'myview',
    layout: 'border',
    items:
        [
            {
                //Top region
                region: 'north',
                title: "My north Title",
                //split: false,
                tbar: CreateTButtons() //Create some toolbar buttons
            }, {
                //South region
                region: 'south',
                contentEl: 'footer',
                split: true,
                height: 25,
                minSize: 100,
                maxSize: 200,
                collapsible: false,
                collapsed: false,
                margins: '0 0 0 0',
                align:'right'
            }, {
                //East region
                xtype: 'tabpanel',
                id: 'eastTabPanel',
                region: 'east',
                title: "My east title",
                dockedItems: GetEastItems(), //Create East Items
                animCollapse: true,
                collapsible: true,
                split: false,
                width: 225,
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                activeTab: 1,
                tabPosition: 'bottom'
            }, {
                //West items
                region: 'west',
                id: 'west-panel',
                title: 'West',
                split: true,
                width: 200,
                minWidth: 175,
                maxWidth: 400,
                collapsible: true,
                animCollapse: true,
                margins: '0 0 0 0',
                layout: 'accordion',
                items: GetWestItems() //Create west items
            },
            objTabPanel //Here is my problem. Center region is a TabPanel
        ]
});

//objTabPanel
objTabPanel = Ext.create('Ext.tab.Panel', {
    region: 'center',
    id: 'mainTabPanel',
    /*forceFit: true,*/
    layout: 'fit',
    viewConfig: {forceFit: true}, //Very important to autosize to the container layer
    //deferredRender: false,
    activeTab: 0,
    items: CMainContent() //Creates a very simple grid
})

//This is the very simple grid

grid = new Ext.grid.GridPanel({
    title: "My Grid Title",
    store: store,
    stripeRows: true,
    //forceFit: true,
    layout: 'fit',
    // grid columns
    columns:
        [
            {
                id: 'id',
                header: "Id",
                dataIndex: 'Id',
                width: 50,
                sortable: true
            }, {
                id: 'name',
                header: "Name",
                dataIndex: 'Name',
                width: 100,
                sortable: true
            }
        ],
    viewConfig: { forceFit: true }, //Very important to autosize to the container layer
    tbar: //tbar = TopBar
        [
            {
                text: "Add",
                iconCls: 'btn-add',
                scope: this,
                handler: addHandler
            }
        ],
    // paging bar on the bottom
    //bbar = BottomBar
    bbar: new Ext.PagingToolbar({
        pageSize: 50,
        store: myStore,
        displayInfo: true,
        emptyMsg: "No topics to display"
    })

});


//To render the grid
grid.render('panel');

//My initial HTML Code
<body>
    <div id="content">
        <div id="panel"></div>
    </div>
</body>

有人能幫我嗎？

比你

Answer 1

替換以下

layout:'fit'

有了這個

layout:{
        type:'fit',
        align:'stretch',
        pack:'start'
}

Answer 2

這里是一個正在運行的應用程序的相關代碼，請注意網格中的autoHeight，網格的錨點布局和布局：“適合”視口和選項卡，希望這對您有所幫助

Ext.onReady(function() {
  tabs = new Ext.TabPanel({
    margins:'0 0 0 0',
    padding:'0 0 0 0',
    activeTab: 0,
    layoutOnTabChange:false,
    id: 'tabs',
    items:[
      {
         id: 'status',
         title: 'status',
         layout:'fit',
         items: [gridStatus]
      },
      {
         id: 'jobs',
         title: 'jobs',
         layout:'fit',
         items: [gridJobs]
      },
      {
         id: 'logs',
         title: 'logs',
         layout:'fit',
         items: [gridLogs]
      }
    ]
  });

  viewport = new Ext.Viewport({
   layout:'border',
   items:[{
     region: 'center',
     layout:'fit',
     title: 'Monitor',
     id:'center',
     border: true,
     items:[tabs]
   }]
  });
});

gridStatus = new Ext.grid.EditorGridPanel({
    id              : "gridStatus",
    enableDragDrop  : false,
    loadMask        : true,
    clicksToEdit    : 1,
    layout          :'anchor',
    autoHeight      : true,
    cm              : cmStatus,
    columnLines     : true,
    store           : storeStatus,
    selModel        : new Ext.grid.RowSelectionModel({singleSelect:true}),
    viewConfig: {
      forceFit: true,
      emptyText: "Geen data gevonden",
      loadMask  : {msg :  'Bezig met laden...'}
    },
    listeners: {
      'rowdblclick': function(grid, index, event){
        var job_id = grid.getStore().getAt(index).get('job_id');
        tabs.setActiveTab(2);
        storeLogs.load({params:{job_id: job_id, limit: 300, start: 0, sort: 'id', dir: 'desc'}});
      }
    } 
  });

ExtJS的。使網格寬度適合面板

問題描述

2 個解決方案

解決方案1
5 2012-02-03 13:35:08

解決方案2
2 2011-11-25 13:18:16

ExtJS的。 使網格寬度適合面板

問題描述

2 個解決方案

解決方案1 5 2012-02-03 13:35:08

解決方案2 2 2011-11-25 13:18:16

ExtJS的。使網格寬度適合面板

解決方案1
5 2012-02-03 13:35:08

解決方案2
2 2011-11-25 13:18:16