Возможно, существует лучший способ сделать это, и, пожалуйста, предоставьте мне рекомендации относительно того, как достичь его, если это возможно, но мне было интересно, есть ли способ, нажав 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);
}
});
Любые идеи?
Это именно то, что я сделал, и это закончилось тем, что отлично работает. Спасибо, Стюарт! –
Отличный материал, рад, что вы его работали. – Stuart