View Full Version : Creating and showing panel from nested list

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 () {

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"

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".