Databases
StackOverflow2013
Postsdbo
POExtJS. Fit Grid Width into a Panel
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExtJS. Fit Grid Width into a Panel
    text
    copied!<p>I'm very new on ExtJs and I can't solve a problem.</p> <p>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.</p> <p>Here is my code</p> <pre><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 &lt;body&gt; &lt;div id="content"&gt; &lt;div id="panel"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Can someone help me?</p> <p>Than you </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload