coldfusion - CFGRID 水平滚动

Question

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

我一直在寻找如何向网格添加水平滚动条，以便网格可以在页面内但滚动列，但我找不到工作示例或有关如何执行此操作的答案。

我已经解决了这个问题。

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

谢谢，

Answer 1

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

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 网格水平滚动，而不是 CFGRID 以找到更多示例。