User 5842 User 5842 - 26 days ago 9
Javascript Question

Explicitly Calling initComponent of extJS Class

There is probably a better way to do this and please provide guidance for me as to how to achieve it if possible but I was wondering if there was a way, on a Tab Click, to explicitly call that containers initComponent function? That is, the container that lives inside of that Tab Panel.

I currently have an initComponent in said panel that loads a Grid Panel with several Property Grids. The store changes when the user clicks a button on another Tab to update said panels store,so I'd like to call the initComponent again to refresh the Property Grids with the newly updated store.

Here is a code snippet of the other Tabs button that programatically switches tabs:

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);
}
}]


After the chefTabPanel.setActiveTab(1), I'd like to call the initComponent function if possible to reload that tab with the new store.

Here is my code for the container that lives in said 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);
}
});


Any ideas?

Answer

Your initComponent code isn't doing anything that needs to be in there. So why not just extract it into an initStore method and then just call it as you would any other method from the initComponent and when you change tabs.

Another suggestion unrelated to the question: avoid using Ext.getCmp it will lead to very tight coupling and bad architecture.