Как мне разместить сетку в области просмотра и сделать так, чтобы сетка отображала вертикальную полосу прокрутки? - PullRequest
Новая
       8

Как мне разместить сетку в области просмотра и сделать так, чтобы сетка отображала вертикальную полосу прокрутки?

0 голосов
/ 10 мая 2011

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

Я проверил это в IE, Firefox и Chrome, и у меня такое же поведение, так что я верю, что пропускаю какие-то настройки. 

    var grid4 = Ext.create('Ext.grid.Panel', {
    title: 'My Title',
    id:'button-grid',
    store: getLocalStore(),
    layout:'fit',
    columns: [
        { text : 'A', width: 50,dataIndex: 'a', sortable: true},
        { text : 'B',flex: 1, dataIndex: 'b', sortable: true},
        { text : 'C Name',width: 120, dataIndex: 'c', sortable: true},
        { text : 'D',width: 100, dataIndex: 'd', sortable: true},
        { text : 'E',width: 50, dataIndex: 'e', sortable: true},
        { text : 'F',width: 70, dataIndex: 'f', sortable: true},
        { text : 'G info',width: 60, dataIndex: 'g', sortable: true},
        { text : 'H Address',flex: 1, dataIndex: 'h', sortable: true},
        { text : 'I',width: 80, dataIndex: 'i', sortable: true},
        { text : 'J by',width: 80, dataIndex: 'j', sortable: true},
        { text : 'K Date',width: 90, dataIndex: 'k', sortable: true}
    ],
    columnLines: true,
    selModel: selModel,
    iconCls: 'icon-grid',
    // inline buttons
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        },
        items: [{
            minWidth: 80,
            text: 'remove'
        },{
            minWidth: 80,
            text: 'Disable'
        }]
    }, {
        xtype: 'toolbar',
        items: [{
            text:'Click here',
            tooltip:'Add a new row',
            iconCls:'add',
            handler : function(){
                win.show();
            }
        }]
    }]
});



// viewport
Ext.onReady(function(){
Ext.QuickTips.init();

var application = new Ext.Viewport({
    renderTo: document.body,
    layout:'fit',
    items: [{
        region: 'center',
        frame: true,
        border: false,
        items: grid4
    }]
});

Спасибо

Ответы [ 2 ]

1 голос
/ 10 мая 2011

Вы чрезмерно вкладываете сетку, либо:

a) Сделайте сетку первым дочерним элементом окна просмотра.б) Добавьте макет, подходящий для первого дочернего элемента окна просмотра.

a - лучший вариант.

0 голосов
/ 10 мая 2011

Установите свойство autoScroll для панели сетки yout: 

autoScroll: true

По умолчанию это свойство имеет значение false. Включение этого свойства добавляет переполнение: 'auto' к элементу макета компонентов и автоматически отображает полосы прокрутки при необходимости.

...