CFGRID水平滚动

Question

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

我一直在研究如何在网格中添加水平滚动条，以便网格可以在页面中滚动，但无法找到如何做到这一点的工作示例或答案。

我已经解决了这个问题。

事实证明，您需要同时指定Height和Width列，我只指定了Width列。

谢谢，

Answer 1

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

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

var

 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网格的水平scrol上搜索，而不是在CFGRID上搜索，以找到更多的示例。

Answer 2

原来您需要同时指定Height和Width列，我只指定了Width列。