Hi, I've been trying for hours to include show a panel into a card layout container without any success. The main problem is that, when i use a panel with my items it works, but when i use a panel with card layout that should display the items panel in a card, it doesn't. Here is my code.
First of all the working part that gives the following :
panel.png
Code:
Ext.define("SAIMobile.view.OpenedTasks", {
extend: 'Ext.Container',
xtype:'openedtaskpage',
config: {
title: 'Opened',
iconCls: 'add',
cls: 'agenda',
layout: 'vbox',
items:[
{
xtype: 'titlebar',
id: 'navTitlebar',
docked: 'top',
title: 'Nav',
items: [
{
xtype:'button',
iconCls: 'arrow_left',
action: 'back',
align: 'left'
},{
xtype:'button',
iconCls: 'refresh',
action: 'refresh',
align: 'left'
},{
xtype:'button',
iconCls: 'settings',
action: 'filter',
align: 'right'
},{
xtype:'button',
iconCls: 'arrow_right',
action: 'next',
align: 'right'
}
],
flex: 1
},{
xtype: 'list',
store: {
fields: ['name'],
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '{name}',
flex:10
}
]
}
});
Now i want to put this into a card so i create another item containing this :
Code:
Ext.define('SAIMobile.view.EntriesNavigator',{
extend: 'Ext.Panel',
xtype:'entriesnavigator',
itemId: '#nav',
layout: 'vbox',
scrollbar: 'vertical',
items: [
{
xtype: 'titlebar',
id: 'navTitlebar',
docked: 'top',
title: 'Nav',
items: [
{
xtype:'button',
iconCls: 'arrow_left',
action: 'back',
align: 'left'
},{
xtype:'button',
iconCls: 'refresh',
action: 'refresh',
align: 'left'
},{
xtype:'button',
iconCls: 'settings',
action: 'filter',
align: 'right'
},{
xtype:'button',
iconCls: 'arrow_right',
action: 'next',
align: 'right'
}
],
flex: 1
},{
xtype: 'list',
store: {
fields: ['name'],
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '{name}',
flex:10
}
]
})
and i create on the fly the element in the previous panel and add it to the items
Code:
Ext.define("SAIMobile.view.OpenedTasks", {
extend: 'Ext.Container',
xtype:'openedtaskpage',
config: {
title: 'Opened',
iconCls: 'add',
cls: 'agenda',
layout: 'card',
items:[
]
},
initComponent: function(){
var nav = Ext.create('SAIMobile.view.EntriesNavigator');
this.add(nav)
}
});
The code executes without any error but i've a blank panel like if nothing were created, i also tried with this.setActiveItem, it doesn't work better.
Another try i did was to put inside the items[] array an element of type 'entriesnavigator'...but i still have a blank panel.
I'm having this problem all the time so there is obviously something that i didn't get.
Any help would be greatly appreciated
Thank in advance