Блог

Главная - Вопросы по программированию - Как сделать так, чтобы развернутое окно отображалось по всему экрану во внешнем JS?

Как сделать так, чтобы развернутое окно отображалось по всему экрану во внешнем JS?

#javascript #css #extjs #extjs4

#javascript #css — код #extjs #extjs4

Вопрос:

Я визуализирую окно, содержащее диаграмму, в div, чтобы оно отображалось в определенном месте на моей веб-странице. Когда я нажимаю на кнопку развернуть окно, я хочу, чтобы оно занимало весь экран. В настоящее время он просто максимизируется до размеров div, в котором он находится.

Я понимаю, что если я визуализирую окно в теле, то, когда окно максимизируется, оно занимает весь экран, однако проблема с этим подходом заключается в том, что тогда я теряю контроль над тем, где окно отображается на странице, поэтому я визуализирую его в div. Если кто-нибудь знает альтернативный способ позиционирования окна на странице, я был бы рад попробовать это.

Буду признателен за любую помощь,

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

1. Какую версию extjs вы используете?

2. Вы могли бы попробовать установить myWindow.constrain = false перед максимизацией.

3. Обходным путем, о котором я мог подумать, было бы создать новое окно, которое не ограничено, в событии максимизации исходного окна и переместить туда содержимое. Когда это окно закрыто или не развернуто, переместите содержимое обратно в окно ограничения.

Ответ №1:

Это может не подходить в зависимости от того, насколько строго расположено окно и макет вашего приложения, но вы можете использовать x и y настраивать свойства, чтобы указать Ext.Window , где отображать…

РЕДАКТИРОВАТЬ: вы также можете использовать window.setPosition(x, y); для указания окну переместиться в определенное положение. Вы могли бы подключиться к resize событию окна или… просто запустите его вручную из кода, который максимизирует / минимизирует ваше окно.

 Ext.create('Ext.window.Window', {
   title: 'Hello',
   height: 200,
   width: 400,
   layout: 'fit',
   x: 20,
   y: 20,
   items: {
      xtype: 'grid',
      border: false,
      columns: [{header: 'World'}],
      store: Ext.create('Ext.data.ArrayStore', {})
   }
}).show();
Метки: ,