How to add a Search Bar to a Nested List?

Question

How can I create a Nested List with a search bar, which should be located under the title. For instance, on the fourth Sencha Nested List example, how would I insert a Search Bar (code below) so that it looks like this image:

Sencha Example

Example Search Bar:

Ext.define('Sencha.view.SearchBar', {
    extend: 'Ext.Toolbar',
    xtype : 'searchbar',
    requires: ['Ext.field.Text', 'Ext.field.Search'],

    config: {
        ui: 'searchbar',
        layout: 'vbox',

        items: [
            {
                xtype: 'title',
                title: 'Search'
            },
            {
                xtype: 'searchfield',
                placeHolder: 'Search...'
            }
        ]
    }
});

Answer 1

You'll need to add it after the Nested List has been instantiated, so the docking position is correct.

var nestedList = Ext.create('Ext.NestedList', {
    ...
});

nestedList.add({
    docked: 'top',
    xtype: 'searchbar',
    height: 100
});