Не удалось сохранить 100% ширину и высоту структуры в extjs - PullRequest
Новая
       10

Не удалось сохранить 100% ширину и высоту структуры в extjs

2 голосов
/ 02 апреля 2010

Я новичок в extjs. Я хочу построить страницу, используя extjs.

_________________________
| HD ______________________ |
| p1 <| p2 | <br /> | | | -> будет окном просмотра (будет изменять размер окна без изменения размера
| | | Полоса прокрутки
| | |
| | |
| | |
| ____________ | _______________ |

  • HD -> курс с шириной 100

  • p1 -> панель 1, которая рухнет на запад и расколется = true

  • p2 -> панель 2, которая займет оставшееся место

Я строю структуру, но не смог сохранить ее на 100% даже при изменении размера окна

КОД SNIPPET 

EditorUi = Ext.extend(Ext.Viewport, {
    layout: 'fit',
    initComponent: function() {
        this.items = [{
            xtype: 'panel',
            title: 'Heading',
            autoHeight: true,
            autoWidth: true,
            layout: 'hbox',
            items: [{
                xtype: 'panel',
                title: 'Navigation',
                collapsible: true,
                region: 'west',
                width: 200,
                split: 'true',
                margins: '3 0 3 3',
                cmargins: '3 3 3 3'
            }, {
                xtype: 'panel',
                title: 'container',
                region: 'center',
                autoHeight: true,
                autoWidth: true,
                split: 'true',
                margins: '3 0 3 3',
                cmargins: '3 3 3 3'
            }]
        }];
        EditorUi.superclass.initComponent.call(this);
    }
});


Ext.onReady(function() {
    new EditorUi();
})

Как я могу это реализовать?

Пожалуйста, помогите мне.

1 Ответ

5 голосов
/ 02 апреля 2010

Похоже, что вы действительно хотите BorderLayout? Кроме того, когда вы используете макеты Ext, не используйте autoHeight - это означает, что «позволить браузеру определять высоту на основе содержимого» - не то, что вам нужно. Кроме того, нет необходимости переопределять initComponent только для предоставления настроек по умолчанию. Попробуйте это вместо (не проверено): 

EditorUi = Ext.extend(Ext.Viewport, {
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        height: 100,                
        title: 'Heading',
    },{
        xtype: 'panel',
        title: 'Navigation',
        collapsible: true,
        region:'west',
        width:200,
        split:'true',
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    },{
        xtype: 'panel',
        title: 'container',
        region:'center',
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    }];
});

Ext.onReady(function(){
    new EditorUi();
});
...