Размер панели extjs при изменении размера окна - PullRequest
Новая
       22

Размер панели extjs при изменении размера окна

4 голосов
/ 04 мая 2011

У меня есть панель с макетом «форма», содержащая несколько кнопок.Теперь я хочу включить изменение размера этой панели в соответствии с изменением размера окна.Как я могу это сделать?

спасибо.

Ответы [ 5 ]

13 голосов
/ 31 августа 2012 
Ext.EventManager.onWindowResize(function(w, h){
    panel.doComponentLayout();
});

Предполагается, что у вас есть панель с именем 'panel' со встроенным автоматическим определением размеров (например, height: "100%"). В противном случае новая ширина и высота окна передаются в анонимную функцию, передаваемую в onWindowResize().

5 голосов
/ 26 ноября 2011

Как писал @deniztt, вы должны подписаться на класс EventManager onWindows Resize Event.

Это может быть что-то вроде этого: 

Ext.EventManager.onWindowResize(function () {

    var width = Ext.getBody().getViewSize().width - 160;
    var height = Ext.getBody().getViewSize().height - 140;

    panel.setSize(width, height);

});

Где панель - это ссылка на вашу панель

Вы можете прочитать об этом здесь .

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

Вы можете изменить размер панели, установив параметр конфигурации 'resizable', см. Документацию по различным параметрам: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html.

Что касается взаимодействия компонентов формы, вам необходимо установить привязки, если вы хотите использовать макет формы или переключиться на настройку типа hbox / vbox с различными настройками flex.

0 голосов
/ 31 января 2014

Спасибо Гегори и Джозефу за решение EventManager.Я сделал несколько небольших изменений в этом решении, заменив getBody () на DIV и установив начальную ширину / высоту моей диаграммы (или любого другого компонента): 

<div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div>
....
Ext.onReady(function() {
    var renderDiv = Ext.get('chart_div');
    var chart = Ext.create('Ext.chart.Chart', {
        renderTo: renderDiv,
        width: renderDiv.getWidth(),
        height: renderDiv.getHeight() - 50,
        ...
    });

    Ext.EventManager.onWindowResize(function () {
        var height = renderDiv.getHeight() -50;
        var width = renderDiv.getWidth();
        chart.setSize(width, height);
    });
});

autoWidth и autoHeight don 'мне кажется, что он работает (Ext-JS 4.2.1).

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

Вы можете установить размер окна и установить атрибуты autoHeight и autoWidth дочерней панели в значение true. Другой способ - перехватить событие resize окна и изменить размер дочерней панели в соответствии с новыми значениями размера.

...