ExtJS。适合网格宽度到面板

我有一个网格，它被调整到它的面板容器（布局：适合），但是当我对面板进行膨胀时，网格不会调整到新的宽度。如果我没有弄错，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>

有人能帮助我吗？

比你

来源

2011-11-24 Juan Ramón

这里的从工作程序的相关代码，介意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'}}); 
     } 
    } 
    });

来源

2011-11-25 13:18:16 peter

非常感谢您，但我一直无法解决问题，我会继续努力。 –

这帮我解决了我的问题 – LDAdams

更换下面

layout:'fit'

与此

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

来源

2012-02-03 13:35:08

ExtJS。适合网格宽度到面板

回答

相关问题