Databases
StackOverflow2013
Postsdbo
POExtjs Grid Width Calculated Wrong
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExtjs Grid Width Calculated Wrong
    text
    copied!<p>I am trying to create a Extjs Grid with no vertical and horizontal scroll bars. it means that the grid should expand to infinity in both direction.</p> <p>here is my code:</p> <pre><code>Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*' ]); Ext.onReady(function() { Ext.QuickTips.init(); // setup the state provider, all state information will be saved to a cookie //Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider')); var cols = 50; var colsData = []; var fields = []; for(var i=1;i&lt;cols;i++){ colsData.push( { text : 'COLUMN - ' + i, //flex : 1, width : 120, sortable : true, dataIndex: 'COL'+i }); fields.push( {name: 'COL'+i, type: 'int'} ); } var myData = []; //create data for(var i=1;i&lt;500; i++){ var subData = []; for(var j=1;j&lt;cols; j++){ subData.push(Math.floor((Math.random()*10000)+1)); } myData.push(subData); } function change(val) { return val; } // create the data store var store = Ext.create('Ext.data.ArrayStore', { fields: fields, data: myData }); // create the Grid var grid = Ext.create('Ext.grid.Panel', { store: store, stateful: true, //stateId: 'stateGrid', autoHeight: true, autoWidth: true, autoScroll: false, //containerScroll: false, columns: colsData, //height: 100, //width: 600, title: 'Array Grid', renderTo: 'grid-example', viewConfig: { //stripeRows: false, //forceFit: false } }); }); </code></pre> <p>i'm rendering my grid to a div element so practically i don't use any layout or etc. </p> <pre><code>&lt;div id="grid-example" class="myDiv"&gt;&lt;/div&gt; </code></pre> <p>and the styles:</p> <pre><code>&lt;style type="text/css"&gt; body{ overflow: visible; } .myDiv{ display: block; /*float: left;*/ overflow: visible; } &lt;/style&gt; </code></pre> <p>Here is my browser's screen shot that shows the vertical scroll bar [just like I expected]. </p> <p><strong>THE PROBLEM IS</strong> </p> <p>There is <strong>NO horizontal scroll bar</strong> and part of columns just cut off from page and there is no way to see the data they are presenting. <img src="https://i.stack.imgur.com/bmLe1.png" alt="enter image description here"></p> <p>i can see that extjs tries to calculate the height and the width for the grids. in case of height it's correct but for width it's not, the calculated width is equals to my browser's width, not to the sum of columns which are in the grid. <img src="https://i.stack.imgur.com/bcaYi.png" alt="enter image description here"></p> <p>I appreciate any suggestion or words from your side, thank you. any one can help me with that?</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