1

我正在尝试创建一个没有垂直和水平滚动条的 Extjs Grid。这意味着网格应该在两个方向上扩展到无穷大。

这是我的代码：

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

我正在将我的网格渲染为一个 div 元素，所以实际上我不使用任何布局等。

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

和风格：

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

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

这是我的浏览器屏幕截图，显示了垂直滚动条[就像我预期的那样]。

问题是

没有水平滚动条，部分列刚刚从页面中截断，无法查看它们呈现的数据。 在此处输入图像描述

我可以看到 extjs 尝试计算网格的高度和宽度。在高度的情况下它是正确的但对于宽度它不是，计算的宽度等于我的浏览器的宽度，而不是网格中列的总和。 在此处输入图像描述

我感谢您的任何建议或言论，谢谢。任何人都可以帮助我吗？

4

2 回答 2

1

viewConfig.viewready我通过在等上注册多个侦听器解决了这个问题grid.columnresize。因此，每次渲染网格或调整列的大小/更改列的可见性时，我们都会计算列的总宽度。因此，我将网格扩展到计算出的大小。就像是：

             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();
                     }
                 }
             });
         });
于 2013-09-04T15:29:03.590 回答
0

也许您正在寻找autoScroll？不知道你想从问题中得到什么样的行为。

问题仍然存在，您希望网格有滚动条，还是希望 div 有滚动条，或者您希望浏览器有滚动条？

div 是 HTML 中的块级元素。它会自动填充浏览器的宽度，在您的示例中不多也不少。然后 ExtJS 将用网格填充该 div，使网格与浏览器的窗口一样大，仅此而已。由于您不允许网格有滚动条，多余的列将被切断。

如果您希望网格具有滚动条，请使用autoScrollset 为 true。

如果您希望 div 滚动，请设置overflow: auto而不是visible.myDiv。您还必须在网格本身上指定宽度，并使其与列的宽度一样宽。

我建议让 ExtJS 处理滚动条，因为如果允许，ExtJS 可以使用更高效的渲染（仅渲染实际可见的列和行）。

于 2013-08-30T20:18:09.703 回答