Coldfusion CFGRID水平卷轴

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

我一直在研究如何在网格中添加水平滚动条，这样网格就可以在页面中滚动，但我找不到一个有效的示例或答案

我已经解决了这个问题

---

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

---

谢谢，

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

变量

grid=Ext.create（'Ext.grid.Panel'{
店:店,，
有状态的：是的，
stateId:“stateGrid”，
栏目：[
{
文本：“公司”，
弹性：1，
可排序：false，
数据索引：“公司”，
宽度：100
},
{
文字：“价格”，
宽度：75，
可排序：是的，
"美国货币",，
数据索引：“价格”
},
{
文本：“更改”，
宽度：75，
可排序：是的，
渲染器：更改，
数据索引：“更改”
},
{
文本：'%Change'，
宽度：75，
可排序：是的，
渲染器：pctChange，
数据索引：“pctChange”
},
{
文本：“上次更新”，
宽度：85，
可排序：是的，
渲染器：Ext.util.Format.dateRenderer（'m/d/Y'），
数据索引：“上次更改”
},
{
xtype:'actioncolumn'，
宽度：50，
项目：[{
图标：'../shared/icons/fam/delete.gif'，//在图标配置中使用URL
工具提示：“卖出股票”，
处理程序：函数（网格、行索引、colIndex）{
var rec=store.getAt（行索引）；
警报（“出售”+记录获取（“公司”）；
}
}, {
getClass:function（v，meta，rec）{//或从函数返回一个类
if（rec.get（'change'）<0）{
this.items[1]。工具提示='Hold stock'；
返回“警报列”；
}否则{
this.items[1]。工具提示='Buy stock'；
返回“购买col”；
}
},
处理程序：函数（网格、行索引、colIndex）{
var rec=store.getAt（行索引）；
警报（（rec.get（'change'）<0？“Hold”）：“Buy”）+rec.get（'company'）；
}
}]
}
],
身高：350，
宽度：300，//30像素宽度在此定义
标题：“数组网格”，
renderTo:'网格'，
视图配置：{
stripeRows：对
},
听众：{
viewready:function（）{
var c=此.列[5]；
var p=c.getPosition（）；
这是一个很好的例子（p[0]）；
}
}
});
});

---

您还可以在extjs grid水平scrol上搜索，而不是在CFGRID上搜索，以查找更多示例。

结果表明，您需要同时指定“高度”和“宽度”列，我只指定了“宽度”列

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