How to Embed a NestedList in a TabPanel?

I'm trying to create a tabpanel view that contains a splitview controller on the first tab. Think "kitchen sink" demo placed into one tab of a tabpanel.

The others do not contain the nestedlist.

http://dev.sencha.com/deploy/touch/examples/production/kitchensink/

enter image description here

I've tried placing the nestedlist into a container, which you can see in some of the commented code shown below.

At the moment, this working code only shows the nestlist taking up the entire section on the first tab:

Ext.application({
    name: 'Test',

    requires: [
        'Ext.dataview.NestedList',
        'Ext.navigation.Bar'
    ],

    launch: function() {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [{
                id: 'tab4',
                title: 'Tab4',
                iconCls: 'star',
                xtype: 'container',
                items: [{
                    xtype: 'nestedlist',
                    displayField: 'text',
                    docked: 'left',
                    store: store
                }, {
                    html: 'Detail View'
                }]
            }, {
                id: 'tab2',
                title: 'Tab2',
                iconCls: 'star',

                html: 'No nav bar?'
            }, {
                id: 'tab3',
                title: 'Tab3',
                iconCls: 'star',

                html: 'Screen3'
            }]
        }).setActiveItem(0);
    }
});

Store setup:

Ext.Loader.setConfig({ enabled: true });

var data = {
  text: 'Groceries',
  items: [{
    text: 'Drinks',
    items: [{
      text: 'Water',
      items: [{
        text: 'Sparkling',
        leaf: true
      },{
        text: 'Still',
        leaf: true
      }]
    },{
      text: 'Coffee',
      leaf: true
    },{
      text: 'Espresso',
      leaf: true
    },{
      text: 'Redbull',
      leaf: true
    },{
      text: 'Coke',
      leaf: true
    },{
      text: 'Diet Coke',
      leaf: true
    }]
  },{
    text: 'Fruit',
    items: [{
      text: 'Bananas',
      leaf: true
    },{
      text: 'Lemon',
      leaf: true
    }]
  },{
    text: 'Snacks',
    items: [{
      text: 'Nuts',
      leaf: true
    },{
      text: 'Pretzels',
      leaf: true
    }, {
      text: 'Wasabi Peas',
      leaf: true
    }]
  }
]};

Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
                name: 'text',
                type: 'string'
        }]
    }
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'ListItem',
    defaultRootProperty: 'items',
    root: data
});

Solution

Okay. I have created this example for you: http://www.senchafiddle.com/#ynn40

You can also download the whole source from here: http://rwd.me/FG5s (quite large as it includes the SDK)

Be sure to look through all the files as I have added lots of documentation.

Some notes:

I created a new component called Sencha.view.SplitView. This obviously can be called anything. It has a xtype of splitview so we can simply just require it and include it into our Main.js file (which is a Ext.tab.Panel.
```
{
    xtype: 'splitview',
    title: 'SplitView',
    store: 'Items'
}
```
Because this is an item inside a tabPanel, we need to give it the title configuration too. Of course we could include this Splitview component anywhere.

As you can see it has a store configuration which is defined in SplitView:

config: {
    /**
     * We create a custom config called store here so we can pass the store from this component
     * (SplitView) down into the nested list when it updates. Checkout {@link #updateStore}
     * @type {Ext.data.Store}
     */
    store: null
}

This is used to pass the store from the splitview to the nested list (we will get to that in a second). Of course that configuration will do nothing unless we add the appropriate methods to update the nested list:

/**
 * This is called when the {@link #store} config has been updated.
 * We simply check if the nested list has been created, and if it has, set the store
 * on it with the new value.
 */
updateStore: function(newStore) {
    if (this.nestedList) {
        this.nestedList.setStore(newStore);
    }
}

As you can see, we are simply updating the nestedList (if it exists) store with the new value of the SplitView store.

Inside the initialize method of SplitView, we created both the detailContainer (where the detail card of the nested list should go) and the nestedList and then add them to the SplitView. Make sure you look at some of the configurations that we give nestedList as they are important. The store configuration:
```
// Set the store of this nested list to the store config of this component (Splitview)
store: this.getStore()
```
The detailCard and detailContainer configurations:
```
// Tell the nested list to have a detail card and put it inside our new detailContinaer
detailCard: true,
detailContainer: this.detailContainer
```
And of course the listeners so we know when things get changed:
```
// And finally add a listener so we know when to update the detail card
listeners: {
    scope: this,
    leafitemtap: this.onLeafItemTap
}
```

Finally we add the onLeadItemTap method into the Splitview (we added the listener above) which should update the detail card with new information:

/**
 * This is called when a leaf item is tapped in the nested list, or when the detail card
 * should be updated. In here, we just get the record which was tapped and then set the HTML
 * of the detail card.
 */
onLeafItemTap: function(nestedList, list, index, node, record, e) {
    var detailCard = nestedList.getDetailCard();
    detailCard.setHtml(record.get('text'));
}

Hopefully this makes sense and helps you. If not, let me know.