Блог

Главная - Вопросы по программированию - изменение размера панели extjs при изменении размера окна

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

#extjs #resize #panel

#extjs #изменение размера #панель

Вопрос:

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

Спасибо.

Ответ №1:

 Ext.EventManager.onWindowResize(function(w, h){
    panel.doComponentLayout();
});

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

Комментарии:

1. Спасибо. Этот пост помог мне с совершенно другой проблемой.

2. Это решение, которое я искал! Мне пришлось изменить размер окна, поэтому я просто передал анонимные функции height и width функции setSize. window.setSize(w, h)

3. В ExtJS 6 EventManager устарел, поэтому вместо него используйте Ext.GlobalEvents : Ext.GlobalEvents.on('resize', function(w, h) { ... });

Ответ №2:

Как писал @deniztt, вы должны подписаться на класс EventManager в событии изменения размера Windows.

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

 Ext.EventManager.onWindowResize(function () {

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

    panel.setSize(width, height);

});

Где panel — ссылка на вашу панель

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

Комментарии:

1. Идеально подходит для того, что я хотел. Спасибо!

Ответ №3:

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

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

Ответ №4:

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

Комментарии:

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

Ответ №5:

Спасибо Гегори и Джозефу за решение 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);
    });
});

Кажется, что автоматическая ширина и автоматическая высота у меня не работают (Ext-JS 4.2.1).