Вопрос по extjs, resize, panel – autoWidth и autoHeight, похоже, не работают для меня (Ext-JS 4.2.1).

4

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

Благодарю.

Ваш Ответ

5   ответов
13
Ext.EventManager.onWindowResize(function(w, h){
    panel.doComponentLayout();
});

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

В ExtJS 6 EventManager устарел, поэтому используйтеExt.GlobalEvents вместо:Ext.GlobalEvents.on('resize', function(w, h) { ... }); ccallendar
Спасибо. Этот пост помог мне с совершенно другой проблемой. MarthyM
Это решение, которое я искал! Мне пришлось изменить размер окна, поэтому я просто передал анонимные функции высоту и ширину в функцию setSize.window.setSize(w, h) avn
0

ебольшие изменения в этом решении, заменив 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, похоже, не работают для меня (Ext-JS 4.2.1).

0

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

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

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

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

4

ows Resize Event.

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

Ext.EventManager.onWindowResize(function () {

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

    panel.setSize(width, height);

});

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

Ты можешьчитать об этом здесь.

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

Похожие вопросы