View Full Version : NestedList Root -> DetailCard

2 Feb 2011, 2:42 AM
Hi all,

Firstly, thanks for such a wonderful product, although it's bloody confusing at times and for an Ext newbie (coming from jQuery), it's extremely powerful and flexible.

I'm currently implementing a NestedList into a floating TabPanel, this works well and I have everything working! It looks awesome :D

My problem is that I am unable to create the NestedList without level items between the root and detail card. The PHP I'm using to generate the JSON is:

$nodes[] = array(
'text' => 'Advisor',
'items' =>
'text' => 'Contact Advisor',
'advisor' => true,
'leaf' => true,
'phone' => 'NUMBER',
'email' => '[email protected]',
'skype' => '<img src="images/skype_com.gif" alt="Skype" /> NUMBER',
'image' => 'images/team/picture.jpg'
It's almost perfect, although due to the "text" property in the "third" array, a middle level is created. Is there anyway to stop this from happening?


3 Feb 2011, 12:56 AM

If this isn't possible, then could someone at least tell me so? The extra level is super annoying.

4 Feb 2011, 3:18 AM
This is fixed too.

I use a normal List component, then on itemtap, create a new panel, add it to its parent and then slide to it.


4 Feb 2011, 8:04 AM

Would you mind posting the code you used to do this?

7 Feb 2011, 1:09 AM

I know it's messy, but it works a treat. Even accounts for floating overlays without having moving elements due to the need to doLayout() (I think that's how it works)

var nestedContacts = new Ext.Panel({
floating: true,
modal: true,
height: 150,
width: 300,
ui: 'canvas',

cls: 'contactOverlay',
id: 'contactList',
layout: 'card',

items: [{
xtype: 'list',
itemTpl: '<tpl for="."><div class="contactSelect">{name}</div></tpl>',
itemSelector: 'div.contactSelect',
store: contactStore,
listeners: {
scope: this,
itemtap: function(list, index) {

var rec = list.store.getAt(index),
contacts = nestedContacts.items.last(),
itemID = rec.get('name').replace(/ /g, '') + '-card',
c = nestedContacts.getComponent(itemID);

if(!c) {
c = new Ext.Panel({
renderTo: nestedContacts.el.dom.childNodes[0].id,
ui: 'canvas',
id: itemID,
layout: 'card',
html: rec.get('phone'),
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'canvas',
title: rec.get('name'),
items: [{
text: 'Back',
ui: 'action',
handler: function() {
nestedContacts.setActiveItem(0, {
type: 'slide',
reverse: true


nestedContacts.setActiveItem(c, 'slide');