Extjs Grid Width Calculated Wrong

Question

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.

here is my 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<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<500; i++){
                 var subData = [];
                 for(var j=1;j<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
                 }
             });
         });

i'm rendering my grid to a div element so practically i don't use any layout or etc.

<div id="grid-example" class="myDiv"></div>

and the styles:

<style type="text/css">
    body{
        overflow: visible;
    }

    .myDiv{
        display: block;
        /*float: left;*/
        overflow: visible;
    }
</style>

Here is my browser's screen shot that shows the vertical scroll bar [just like I expected].

THE PROBLEM IS

There is NO horizontal scroll bar and part of columns just cut off from page and there is no way to see the data they are presenting.

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.

I appreciate any suggestion or words from your side, thank you. any one can help me with that?

Answer 1

I solved this problem by registering a numbers of listeners on viewConfig.viewready, grid.columnresize and etc. So we calculate the total width of columns each time we render a grid or resize/change a visibility of a column. consequently, I expand the grid to the calculated size. something like:

             var grid = Ext.create('Ext.grid.Panel', {
                 store: store,
                 stateful: true,
                 autoHeight: true,
                 columns: colsData,
                 title: 'Array Grid',
                 renderTo: 'grid-example',
                 viewConfig: {
                     listeners: {
                         viewready:function(){
                             var totalWidth = 0;
                             Ext.each(grid.columns, function(column, index) {
                                    if (column.isHidden() == false)
                                       totalWidth += column.width;
                                });

                             //console.log("Width: " + totalWidth);
                             grid.setWidth(totalWidth);
                         } 
                     }
                 }
                 ,listeners: {
                     columnresize: function(){
                         grid.viewConfig.listeners.viewready();
                     },
                     columnhide: function(){
                         grid.viewConfig.listeners.viewready();
                     },
                     columnshow: function(){
                         grid.viewConfig.listeners.viewready();
                     }
                 }
             });
         });

Answer 2

Perhaps you are loking for autoScroll? Don't know what kind of behaviour you want from the question.

The question remains, do you want the grid to have scrollbars, or do you want the div to have scrollbars, or do you want the browser to have scrollbars?

The div is a block level element in HTML. It will automatically fill the browser's width, no more, no less in your example. ExtJS will then fill that div with the grid, making the grid as large as the browser's window, no more. Since you do not allow the grid to have scrollbars, the excess columns are cut off.

If you want the grid to have scrollbars, use autoScroll set to true.

If you want the div to scroll instead, set overflow: auto instead of visible on .myDiv. You would have to specify width on the grid itself too, and make it as wide as the width of the columns.

I recommend letting ExtJS handle the scrollbar as ExtJS can use more efficient rendering if you let it (only render columns and rows that are actually visible).