Я пытаюсь создать объект класса Panel
с разными элементами. В основном это связано с настольным приложением в ExtJS.
DetailView.js
Ext.define("App.view.DetailView", {
extend : 'Ext.panel.Panel',
alias : 'widget.asset-panel',
itemId : 'Detail-view',
region : 'center',
initComponent : function() {
this.items = [ comboboxes, customPanel ];
this.callParent(arguments);
}
});
Я пытаюсь создать компонент items
как с помощью xtype
, так и с помощью Ext.create()
. Я не уверен, что правильно и как мне об этом узнать. Ниже приведена переменная comboboxes
внутри DetailView.js
var comboboxes = {
xtype : 'form',
border : false,
padding : '5 5 5 5',
items : [ {
layout : 'column',
border : false,
width : 600,
items : [ {
xtype : 'combobox',
columnWidth : .15,
itemId : 'filter-1',
store : [ 'Employee', 'Manager', 'TeamLead' ]
}, {
xtype : 'combobox',
columnWidth : .15,
margin : '0, 0, 0, 15',
store : [ 'Keywords', 'Names' ]
}, {
xtype : 'combobox',
columnWidth : .15,
margin : '0, 0, 0, 15',
store : [ 'Some Data here' ]
}]
} ]
};
Пока все хорошо, если я сохраняю this.items = [comboboxes]
в классе DetailView
, он работает нормально без каких-либо проблем. но когда я пытаюсь добавить другой компонент, например customPanel внутри DetailView.js
var custom = Ext.create('Ext.panel.Panel', {
itemId : 'panel_1',
height : 300,
border : false,
layout : 'card',
items : [ {
xtype : 'container',
itemId : 'listCt',
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
margin : 2
},
items : []
}, {
xtype : 'container',
itemId : 'fitCt',
layout : 'fit'
} ]
});
Я пробовал как инициализировать панель, как показано выше, так и с помощью initComponent()
, но каждый раз выдает ошибку:
Uncaught TypeError: Cannot set property 'component' of null ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.finishRenderItems ext-all.js:22
Ext.cmd.derive.finishRender ext-all.js:22
Ext.cmd.derive.privates.finishRenderChildren ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.afterRender ext-all.js:22
Ext.cmd.derive.privates.finishRender ext-all.js:22
Ext.cmd.derive.render ext-all.js:22
Ext.cmd.derive.privates.doAutoRender ext-all.js:22
Ext.cmd.derive.show ext-all.js:22
Ext.define.restoreWindow Desktop.js?_dc=1406637300888:388
Ext.define.onShortcutItemClick Desktop.js?_dc=1406637300888:199
fire ext-all.js:22
doFireEvent ext-all.js:22
a.doFireEvent ext-all.js:22
fireEventArgs ext-all.js:22
fireEvent ext-all.js:22
Ext.cmd.derive.processUIEvent ext-all.js:22
Ext.cmd.derive.handleEvent ext-all.js:22
Ext.cmd.derive.doFire ext-all.js:22
Ext.cmd.derive.fire ext-all.js:22
Ext.cmd.derive.doDispatchEvent ext-all.js:22
Ext.cmd.derive.dispatch ext-all.js:22
Ext.cmd.derive.dispatch ext-all.js:22
Ext.cmd.derive.doPublish ext-all.js:22
Ext.cmd.derive.publish ext-all.js:22
Ext.cmd.derive.onDelegatedEvent ext-all.js:22
(anonymous function)
выдает ошибку при переинициализации окна. т.е. работает только в первом исполнении, но не во втором. Я сомневаюсь, что компоненты правильно визуализируются и уничтожаются. Что может быть возможной причиной? любое возможное решение?