我已经定义了我的面板类,我想根据特定条件对其进行自定义,例如以下伪代码:
if (foo =='A') {
//Draw only button1
}
else {
//Draw button1 & button2
}
但是,我不知道如何在 MyPanel 类中包含这个 if 语句。
Ext.define('MyApp.view.Main', {
extend : 'Ext.panel.Panel',
xtype : 'main',
width: 500,
height: 400,
items:[{
xtype: 'mypanel',
html: 'This is panel1',
foo: 'A',
},{
xtype: 'mypanel',
html: 'This is panel2',
foo: 'B',
}]
});
Ext.define('MyApp.view.MyPanel', {
extend : 'Ext.panel.Panel',
xtype : 'mypanel',
initComponent: function () {
foo = this.foo;
this.callParent(arguments);
},
header: {
items: [{
xtype: 'button',
text: 'button1',
},{
xtype: 'button',
text: 'button2',
}]
},
width: 500,
height: 200,
});
我准备了一个Fiddle example
提前致谢。
答案 0 :(得分:1)
只需在 'initComponent' 方法中设置 header 属性或使用特殊方法,它会根据条件返回 'header' 配置对象。
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mypanel',
initComponent: function () {
foo = this.foo;
this.header = {
items: [{
xtype: 'button',
text: 'button1'
}, {
xtype: 'button',
text: 'button2',
hidden: (foo === 'A'),
}]
};
this.callParent(arguments);
},
width: 500,
height: 200,
});
特殊方法:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mypanel',
initComponent: function () {
this.header = this.getMyCustomHeader();
this.callParent(arguments);
},
getMyCustomHeader: function () {
var customHeader = {
items: [{
xtype: 'button',
text: 'button1'
}, {
xtype: 'button',
text: 'button2'
}]
}
if (this.foo === 'A') {
customHeader = {
items: [{
xtype: 'button',
text: 'button1'
}]
}
}
return customHeader;
},
width: 500,
height: 200
});