NestedList Root -> DetailCard

[jbrooksuk]

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

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' =>
        array(
            array(
                'text'      => 'Contact Advisor',
                'advisor'   => true,
                'leaf'      => true,
                'phone'     => 'NUMBER',
                'email'     => 'email@email.co.uk',
                '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?

Cheers,
James

[jbrooksuk]

BUMP.

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

[jbrooksuk]

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.

James

[irocker]

James,

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

[jbrooksuk]

@irocker,

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.add(c);
                	c.doLayout();
                }

                nestedContacts.setActiveItem(c, 'slide');
            }
        }
    }]
});