Чтобы сделать Ext GridPanel изменяемым по размеру внутри внешнего окна в Ext Js

Question

У меня есть Ext GridPanel внутри Ext Window. Для того, чтобы сделать Ext Window Resizeable, я сделал его свойство истинным, и он работал нормально.

Но, также, чтобы сделать сетку изменяемой по размеру. Итак, для этого я также пробовал с resizeable: true.

Отсутствие удачи!

Вот мой код GridPanel

new Ext.grid.GridPanel({ 
    height: 295, 
    id: 'productGrid', 
    store: productStore, 
    disableSelection: true, 
    loadMask: true, 
    stripeRows: true, 
    region: 'south', 
    resizeable: true, // not working 
    autoExpandColumn: 'auto-expand', 
    cm: new Ext.grid.ColumnModel({ 
      id: 'productColModel', 
       columns: [ 
       { 
        header: "column1", 
        dataIndex: 'name', 
        width: 110 
       }, { 
        header: "column2", 
        dataIndex: "age", 
        sortable: false, 
        align: 'left', 
        width: 80 
       }, { 
         id: 'auto-expand', 
         header: "Description", 
         dataIndex: 'description', 
         renderer: function(value, metaData, record) { 
         return Ext.util.Format.stripTags(value); 
        } 
       }, { 
         header: "Weight", 
         dataIndex: 'weight', 
         align: 'right', 
         width: 70 
       }, { 
         header: "List Price", 
         dataIndex: 'listPrice', 
         align: 'right', 
         renderer: 'usMoney', 
         width: 80 
       }, { 
         header: "Add", 
         width: 30, 
         dataIndex: 'id', 
         sortable: false, 
         renderer: function(value) { 
         return '<img class="columnHover" src="/scripts/shared/icons/fam/add.gif" height="16" width="16" />'; 
          } 
         } 
        ], 
     .... 
     .... 

Пожалуйста, скажите, что мне нужно сделать, или я делаю что-то неправильно.

Спасибо.

Answer 1

ExtJs имеет различные схемы, которые можно использовать в соответствии с вашими требованиями. Из вашего кода, похоже, вы не используете какой-либо макет для вашей панели гридов.

Обратитесь к этому http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html и попробуйте использовать различные комбинации компоновки.

Сначала попробуйте с layout: auto для вашей родительской сетки. После этого вы можете использовать разные макеты для дочерних панелей. Для вашей сетки вы можете попробовать

layout: auto, 
height: 'auto', 
autoHeight: true, 
region : north, // you can try center as well 

Answer 2

Проверить эту функцию в документации ExtJS

onWindowResize(fn, scope, [options]) 

Добавить слушателю получить уведомление, когда окно браузера изменяется и обеспечивает буферизацию изменения размера событий (100 миллисекунд), передает новую ширину окна проекции и высоты для обработчиков.

Пример кода выглядит как ниже (Вы должны добавить это событие, а затем запустите его.) Добавление события в компоненте инициализации выглядит, как показано ниже (в ниже это относится к области сетки)

this.addEvents('BROWSER_WINDOW_RESIZE'); 

Обжиг события в afterRender выглядит, как показано ниже

Ext.EventManager.onWindowResize(function() { 
      this.fireEvent('BROWSER_WINDOW_RESIZE') 
     }, this, {buffer: 150}); 

Вы должны слушать это событие и установить ширину и высоту для grid.Add ниже слушатель к вашей сети.

listeners: { 
     BROWSER_WINDOW_RESIZE: this.handleResize, 
     scope: this 
     } 

    handleResize:function(){ 
      this.setHeight(Ext.getBody().getViewSize().height - 270); 
      this.setWidth(Ext.getBody().getViewSize().width- 100); 
     } 

Надеется, что это помогает ...