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 сетки, а не CFGRID, чтобы найти больше примеров.