Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Горизонтальная прокрутка в gridPanel (https://javascript.ru/forum/extjs/6007-gorizontalnaya-prokrutka-v-gridpanel.html)

mwnuke 06.11.2009 14:08

Горизонтальная прокрутка в gridPanel
 
Здравствуйте!
Имеется GridPanel, с большим количеством столбцов.
Все столбцы, естественно, на экран не влезают.

Необходимо добавить горизонтальную прокрутку.
Поиск по данному вопросу, увы, не дал внятного ответа.

ExtJS 3.0

Код такой (генерится скриптом):
Ext.onReady(function(){

    var store = new Ext.data.JsonStore({
            root: 'items',
            totalProperty: 'totalCount',
            idProperty: 'guid',
            remoteSort: true,
            fields: ["guid","id","name","md5","email","last_activity","reg_date","group","uname","ulastname","ufather","ubirthday","side","region","sity","sex","active","deact","rpass_id","passportS","passportN","address","admin","userAgent","currentIP","workPlace","validThru","createdBy"],
                proxy: new Ext.data.HttpProxy({
                url: '/data/get/'
            })
        });
    var colModel = new Ext.grid.ColumnModel([{"dataIndex":"guid","header":"GUID","sortable":true},{"dataIndex":"name","header":"\u041b\u043e\u0433\u0438\u043d","sortable":true},{"dataIndex":"md5","header":"\u041f\u0430\u0440\u043e\u043b\u044c","sortable":true},{"dataIndex":"email","header":"\u041c\u044b\u043b\u043e","sortable":true},{"dataIndex":"last_activity","header":"last_activity","sortable":true},{"dataIndex":"reg_date","header":"reg_date","sortable":true},{"dataIndex":"group","header":"group","sortable":true},{"dataIndex":"uname","header":"uname","sortable":true},{"dataIndex":"ulastname","header":"ulastname","sortable":true},{"dataIndex":"ufather","header":"ufather","sortable":true},{"dataIndex":"ubirthday","header":"ubirthday","sortable":true},{"dataIndex":"side","header":"side","sortable":true},{"dataIndex":"region","header":"region","sortable":true},{"dataIndex":"sity","header":"sity","sortable":true},{"dataIndex":"sex","header":"sex","sortable":true},{"dataIndex":"active","header":"active","sortable":true},{"dataIndex":"deact","header":"deact","sortable":true},{"dataIndex":"rpass_id","header":"rpass_id","sortable":true},{"dataIndex":"passportS","header":"passportS","sortable":true},{"dataIndex":"passportN","header":"passportN","sortable":true},{"dataIndex":"address","header":"address","sortable":true},{"dataIndex":"admin","header":"admin","sortable":true},{"dataIndex":"userAgent","header":"userAgent","sortable":true},{"dataIndex":"currentIP","header":"currentIP","sortable":true},{"dataIndex":"workPlace","header":"workPlace","sortable":true}]);
    var gridView = new Ext.grid.GridView({
        autoScroll: true
    });
    var selModel = new Ext.grid.RowSelectionModel({
    singleSelect : true
    });
    var grid = new Ext.grid.EditorGridPanel({
        title : 'превед!!',
        renderTo : Ext.getBody(),
        autoHeight : true,
        width: 700,
        autoScroll: true,
        store : store,
        view : gridView,
        colModel : colModel,
        selModel : selModel,
        autoSizeColumns: true,
        sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
        frame: true,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: 'Отображаются с {0} по {1}. Всего: {2}',
            emptyMsg: "Нет объектов для отображения"
        })
    });

    store.setDefaultSort('guid', 'desc');
    store.load({params:{start:0, limit:10}});
});


Надеюсь на вашу помощь.
Что нужно сделать, чтобы горизонтальный скроллбар появился?

Заранее спасибо! :)

mwnuke 06.11.2009 17:22

Проблема решилась.
Оказывается необходимо четко указать height и никаких autoHeight не должно быть. :)

Snowcore 09.11.2009 19:25

эту проблему еще можно решить, добавив css свойство overflow: auto


Часовой пояс GMT +3, время: 19:50.