Как встроить NestedList в TabPanel?

Я пытаюсь создатьtabpanel вид, который содержитsplitview Контроллер на первой вкладке. Подумайте о демонстрации "кухонная раковина", размещенной в одной вкладке панели.

Остальные не содержат вложенный список.

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

Я попытался поместить nestedlist в контейнер, который вы можете увидеть в некоторых комментариях, показанных ниже.

На данный момент этот рабочий код показывает только список гнезд, занимающий весь раздел на первой вкладке:

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);
    }
});

Настройка магазина:

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
});

Ответы на вопрос(1)

Ваш ответ на вопрос