Я пытался создать окно с вкладками в макете портала, похожее на это http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html. Окно, верхняя строка, нижний колонтитул, метка, поле со списком и диаграмма все выглядит хорошо, но когда я размещаю вкладки в окно, они не отображаются. Ниже мой код
//portal.js that is calling
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.RegHosts', 'Ext.app.ChartPortlet', 'Ext.app.RougeHosts'],
getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Working...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header-complete',
xtype: 'box',
region: 'north',
height: 40,
html: ''
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'regehosts',
title: 'Registered Hosts',
tools: this.getTools(),
items: Ext.create('Ext.app.RegeHosts'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'rouge',
title: 'Rouge Hosts',
tools: this.getTools(),
items: Ext.create('Ext.app.Rouge'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},
{
id: 'col-3',
items: [{
id: 'devices',
title: 'Devices',
tools: this.getTools(),
items: Ext.create('Ext.app.Devices'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}
]
}]
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
// function contents that is called
requires:["*"],
,initComponent:function()
{Ext.apply(this,{layout: {
type: 'fit'
}
,width:550,height:420,items:
[
{xtype:"label",fieldLabel: text, name:'txt',text:text,
id:'devicesLabel',style:'width:300px;'},
{
xtype:'tabpanel',
width: 400,
height: 400,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
}
]
});this.callParent(arguments)}});