PDA

View Full Version : Creating and showing panel from nested list



bohboh
15 Aug 2011, 2:22 PM
I have a nested list where I use getDetailCard to display a details page when a leaf node has been clicked.
I have the nested list in a floating panel, i want to close the panel and display the details in the main panel.

I simple cannot get it to work.

This is my viewport.js


var menuButton = new Ext.Button({ iconCls: 'search',
iconMask: true,
text: 'Search'
});


var menu = new Ext.Panel({
items: [fullMenu],
layout: 'fit',
width: 250,
height: 300,
dock: 'left',
floating: true
});


menuButton.addListener('tap', function () {
console.log("tapped");
menu.showBy(this);
});


var Toolbar = new Ext.Toolbar({
dock : 'top',
title: 'Main Panel',
items: [menuButton]
});


App.views.Viewport = Ext.extend(Ext.TabPanel, {
id: "mainPanel",
fullscreen: true,
layout: 'card',
dockedItems: [Toolbar],
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', id: 'home' },
{ xtype: 'soeasycard', id: 'easy' },
{ xtype: 'languagecard' },
{ xtype: 'contactuscard' }
]
});
App.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});


This is the nested list code:


var fullMenu = App.views.Browsecard = Ext.extend(Ext.NestedList, { fullscreen: true,
displayField: 't',
store: store,
id: 'browsecard',
onItemDisclosure: true,
iconCls: "search",
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,
detailCard = new Ext.Panel({
id: "detailscard",
fullscreen: true,
scroll: 'vertical',
styleHtmlContent: true,
tpl: "hello"
});
this.backButton.setText(parentData.t);
Ext.getCmp('mainPanel').items.add(detailCard);
Ext.getCmp('mainPanel').setActiveItem('detailscard');
Ext.getCmp('detailscard').update(itemData);
menu.hide();
}
});


How do I display "hello" in the main panel ? All i am getting is a blank panel. It appears to slide to a new panel, but the panel is empty. I would expect it to display "hello".