ExtJS. Fit Grid Width into a Panel

2
votes

I'm very new on ExtJs and I can't solve a problem.

I have a grid that it is adjusted to its panel container (layout:fit) but when I colapse the panel, the grid doesn't adjust to the new Width. If I'm not mistaken, ExtJs can do this automaticaly.

Here is my code

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>

Can someone help me?

Than you

2
extjsgridpaneltabcontainer

2 Answers

5
votes

replace the below 

layout:'fit'

with this

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

here an the relevant code from a working app, mind the autoHeight in the grid, the anchor layout of the grid and the layout: 'fit' in the viewport and tabs, hope this is helpfull Cheers

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'}});
      }
    } 
  });