CFGRID水平滚动

Question

我有一个包含多个列的CFGRID，由于列的数量，网格超过了页面大小。

我一直在寻找如何将水平滚动条添加到网格中，以便网格可以在页面内，但滚动列，但我无法找到一个有效的例子或如何做到这一点的答案。

我已经解决了这个问题。

原来您需要同时指定高度和宽度列，我只指定了宽度列。

谢谢,

Answer 1

原来您需要同时指定高度和宽度列，我只指定了宽度列。

Answer 2

如果您定义了网格的宽度，它应该滚动以查看其他列。这就是这个例子：

http://jsfiddle.net/YRraU/2/

变量

 grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: [
            {
                text     : 'Company',
                flex     : 1,
                sortable : false,
                dataIndex: 'company',
                width    : 100
            },
            {
                text     : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                text     : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            },
            {
                text     : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            },
            {
                text     : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            },
            {
                xtype: 'actioncolumn',
                width: 50,
                items: [{
                    icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert("Sell " + rec.get('company'));
                    }
                }, {
                    getClass: function(v, meta, rec) {          // Or return a class from a function
                        if (rec.get('change') < 0) {
                            this.items[1].tooltip = 'Hold stock';
                            return 'alert-col';
                        } else {
                            this.items[1].tooltip = 'Buy stock';
                            return 'buy-col';
                        }
                    },
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company'));
                    }
                }]
            }
        ],
        height: 350,
        width: 300, // 30 pixel width defined here
        title: 'Array Grid',
        renderTo: 'grid',
        viewConfig: {
            stripeRows: true
        },
        listeners: {
            viewready: function(){
                var c = this.columns[5];
                var p = c.getPosition();

                this.scrollByDeltaX(p[0]);
            }
        }
    });
});

你也可以在extjs grid horizontal scrol上搜索，而不是在CFGRID上搜索，以找到更多示例。