#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).