ExtJs 4 - How to update Ext.window.Window layout when closable property was updated dinamically?

Question

I faced with a problem described in topic. I have ExtJs application. My task show popup window with filled grid. By default window.closable = false;

Somewhere in the controller I have defined window, it looks like that:

Ext.define('Return.controller.ViewportController', {
  extend: 'Ext.app.Controller',
  views:[
    'ModalWindow',
    'ProductsList'
  ],

  stores:[
    ...,
    'ProductsStore'
  ],

  models:[
    ...,
    'ProductsModel'
  ],


  resultWindow: Ext.create('Ext.window.Window', {
    itemId: 'popupWindow',
    id: 'popupWindow',
    title: 'Result List',
    layout:'fit',
    width: 900,
    height: 600,
    modal: true,
    closable: false,
    closeAction: 'hide',
    items:[]
  })


  onPopupShow: function() {
    // first add grid with store to popup window;
    // then need to load data into ProductsStore;
    // depending on values in store_stock column need to define
    // if I should show close button for Window or not.
    // By default button is invisible
    var prodStore = Ext.getStore('ProductsStore');
    this.resultWindow.add({xtype: 'ProductsList', border: true});
    prodStore.load({
      params: {
        stock_locations_id: 1,
        query: value
      },
      callback: function (result) {
        var app = this;
        if (result.length > 0) {
          //make window closable
          app.resultWindow.closable = (!prodStore.sum('stock'));
          //show and update Layout
          app.resultWindow.show().updateLayout();
          Ext.getCmp('ProductsList').getView().refresh();
          return;
        }
        //do smth else
      }, scope: this
    });
  }
);

User should do following actions: On popupShow find any row in the grid, click on it. After that popup will be hidden and selected row will be added to parent grid with all the data.

It works fine when prodStore.sum('stock') - means total sum of all values in column is more then zero. When all the values in 'stock' column are zero, user should be able just to close the window.

When I debug that piece of code, window gets closable property to true and can be displayed. But in normal running - no. The same time when trying to check in console Ext.getCmp('popupWidow').closable it returns true as I need.

I suppose layout should be updated. I do that right after window is showed. But unfortunately.

What other way here is applicable?

Thanks in advance.

Answer 1

Create resultWindow object in the callback function and set the closable property while initializing it.

So, you could do something like:

Ext.define('Return.controller.ViewportController', {
  extend: 'Ext.app.Controller',

  ...

 resultWindowConfig: {
   itemId: 'popupWindow',
   id: 'popupWindow',
   title: 'Result List',
   layout:'fit',
   width: 900,
   height: 600,
   modal: true,
   closable: false,
   closeAction: 'hide',
   items:[]
 },

 onPopupShow: function() {
   ...
   scope: this,
   callback: function (result) {
     var app = this;
     if (result.length > 0) {
      //make window closable
      app.resultWindowConfig.closable = (!prodStore.sum('stock'));

      var resultWindow = Ext.create('Ext.window.Window', app.resultWindowConfig);

      //If you want to set resultWindow as a property of the app object just do app.resultWindow = resultWindow;
      resultWindow.show();

      ...
      return;
     }
  });
});

If you look at the Ext.window.Window docs, you can see that there is no set function for this property, which means that you can't update the UI just by changing this property.