ExtJS изменяемые размеры окна, поддерживающие соотношение сторон

Question

Я пытаюсь изменить размер окон в ExtJS 6, и они изменяют размер в порядке, но я хотел бы изменить их размер, сохраняя соотношение сторон, но до сих пор после обширного поиска в Google и поиска многих опций, Кажется, я не могу найти решение.

У меня есть простое окно с двумя панелями с текстовым полем в одном и с кнопкой в ​​другом, чтобы начать с того, что я понял это - ниже пример кода, в который я пытаюсь применить это.

Ext.define('SenchaApp.view.MainView', { 
extend: 'Ext.window.Window', 

autoShow: true, 
height: 600, 
width: 600, 
constrainHeader: true, 
title: 'Main View', 

items:[{ 
    xtype: 'panel', 
    height: 200, 
    width: 600, 

     items:[{ 
      xtype: 'displayfield', 
      text: 'my button' 
     }] 
    }, 
    { 
    xtype: 'panel', 
    height: 200, 
    width: 600, 

     items:[{ 
      xtype: 'button', 
      text: 'my button' 
     }] 
    } 
] 
}); 

Answer 1

Используйте resizable конфигурации в окне, которое может быть конфиг объектом Ext.resizer.Resizer. Класс Resizer имеет конфигурацию preserveRatio для того, что вы хотите.

resizable: { 
    preserveRatio: true 
} 

Вот скрипку, чтобы продемонстрировать:

https://fiddle.sencha.com/#fiddle/11rh