2016-11-11 2 views
1

Возможно, существует лучший способ сделать это, и, пожалуйста, предоставьте мне рекомендации относительно того, как достичь его, если это возможно, но мне было интересно, есть ли способ, нажав Tab Click, для явного вызова что контейнеры функции initComponent? То есть контейнер, который находится внутри этой панели вкладок.Явный вызов initComponent класса extJS

В настоящее время у меня есть компонент initComponent на панели, который загружает Grid Panel с несколькими Property Grids. Магазин изменяется, когда пользователь нажимает кнопку на другой вкладке для обновления хранилища панелей, поэтому я хотел бы снова вызвать initComponent, чтобы обновить Property Grids с обновленным хранилищем.

Вот фрагмент кода другой кнопки вкладок, которые программно переключается вкладки:

buttons: [{ 
    text: 'Configure', 
    handler: function() { 
     // Get name of role 
     var roleList = Ext.getCmp('chefRoleRunListInformationGrid'); 

     if (roleList.getSelectionModel().hasSelection()) { 
     var roleName = roleList.getSelectionModel().getSelection(); 
     roleName = roleName[0]['raw'][0]; 

     // Get Role Setup form 
     Ext.getCmp('chefRoleSetupFormPanel').getForm().setValues({ 
      roleName: roleName 
     }); 
     } 

     var chefTabPanel = Ext.getCmp('chefTabPanel'); 
     chefTabPanel.setActiveTab(1); 

     var chefRoleRunListInformationStore = Ext.getStore('chefRoleRunListInformationStore'); 
     var chefRequiredCookbooksGrid = Ext.getCmp('chefRequiredCookbooksGrid'); 
     var roleRunListInfoGrid = Ext.getCmp('chefRoleRunListInformationGrid'); 

     roleRunListInfoGridColumns = roleRunListInfoGrid.columns; 

     chefRequiredCookbooksGrid.reconfigure(chefRoleRunListInformationStore); 
    } 
    }] 

После chefTabPanel.setActiveTab (1), я хотел бы вызвать функцию InitComponent, если это возможно, чтобы перезагрузить эта вкладка с новым магазином.

Вот мой код для контейнера, который живет в указанном Tab:

Ext.define('chefCreateAndPinRolesLayoutContainer', { 
    extend: 'Ext.panel.Panel', 

    layout: 'fit', 
    items: [{ 
     xtype: 'container', 
     layout: { 
      type: 'hbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      xtype: 'container', 
      flex: 1, 
      layout: { 
       type: 'vbox', 
       align: 'stretch' 
      }, 
      border: 1, 
      items: [{ 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefRequiredCookbooksGridPanel') 
       ] 
      }, { 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefRoleSetupFormPanel') 
       ] 
      }] 
     }, { 
      xtype: 'container', 
      flex: 1, 
      layout: { 
       type: 'vbox', 
       align: 'stretch' 
      }, 
      items: [{ 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefOptionalCookbooksGridPanel') 
       ] 
      }, { 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefAttributeGridContainer') 
       ] 
      }] 
     }] 
    }], 

    initComponent: function() { 
     var me = this; 
     var chefRCS = Ext.create('chefRequiredCookbooksStore'); 

     var requiredCookbooksStore = Ext.getStore('chefRequiredCookbooksStore'); 
     var chefAttributesGridContainer = Ext.getCmp('chefAttributesGridContainer'); 

     requiredCookbooksStore.load({ 
      scope: this, 
      callback: function(records, operation, success) { 
       requiredCookbooksStore.data.each(function(item, index, totalItems) { 
        var cookbookName = item['raw'][0]; 
        var cookbookVersion = item['raw'][1]; 

        var attributesGrid = Ext.create('Ext.grid.property.Grid', { 
         width: 450, 
         id: cookbookName, 
         source: { 
          "Cookbook": cookbookName, 
          "Version": cookbookVersion 
         }, 
         viewConfig: { 
          scroll: 'false', 
          style: { 
           overflow: 'auto', 
           overflowX: 'hidden' 
          } 
         } 
        }); 
        chefAttributesGridContainer.add(attributesGrid); 
        chefAttributesGridContainer.doLayout(); 
       }); 
      } 
     }); 

     me.callParent(arguments); 
    } 
}); 

Любые идеи?

ответ

2

Ваш код initComponent ничего не делает, что нуждается в, чтобы быть там. Так почему бы не просто извлечь его в метод initStore, а затем просто вызвать его так же, как и любой другой метод из initComponent и при изменении вкладок.

Другое предложение, не связанное с вопросом: избегать использования Ext.getCmp, это приведет к очень плотной связи и плохой архитектуре.

+0

Это именно то, что я сделал, и это закончилось тем, что отлично работает. Спасибо, Стюарт! –

+0

Отличный материал, рад, что вы его работали. – Stuart

Смежные вопросы