Как я могу сделать окно на 100% высотой и шириной с ExtJs? - PullRequest
Новая
       4

Как я могу сделать окно на 100% высотой и шириной с ExtJs?

4 голосов
/ 26 июля 2011

Это не сработало: 

new Ext.Window({
    width:'100%',
    height: '100%'
}).show();

Я должен быть плавным, поэтому при изменении размера окна приходится менять размеры.

Ответы [ 2 ]

4 голосов
/ 26 июля 2011

Этого можно достичь только путем мониторинга события window.resize. 

Ext.onReady(function() {
    var win = new Ext.Window({
        draggable: false
    });

    win.show();

    win.setSize(Ext.getBody().getViewSize());
    win.setPagePosition(0, 0);
    Ext.fly(window).on('resize', function(e, w) {
        win.setSize(Ext.getBody().getViewSize());
        win.setPagePosition(0, 0);
    });
});

Обратите внимание, что мой пример работает правильно, если body имеет overflow: hidden. В противном случае будут показаны нежелательные полосы прокрутки.

Проверьте это скрипка .

1 голос
/ 27 июля 2011

Этого также можно добиться, создав Viewport, который предназначен для выполнения именно того, о чем вы просите. Вот быстрый пример, и он показывает, что вам не нужно указывать высоту / ширину: 

Ext.onReady(function(){

    var thisView = new Ext.Viewport({
        layout:'anchor',
        items:[
            {   title: 'Section 1'
                ,html: 'some content'
            }
            ,{  title: 'Section 2'
                ,html: 'some more content'
            }
        ]
    });

});

Вы заметите, что вам даже не нужно его "показывать".

РЕДАКТИРОВАТЬ: О, я хотел также отметить, что если вы добавите более длинный контент в эти HTML-разделы, вы увидите, что если вы измените размер окна вашего браузера, они автоматически изменят свою высоту, чтобы весь контент был виден.

...