Навигация с помощью кнопки в сенча тач

Делаю первые шаги с Sencha touch. Результаты - это именно то, что мне нужно, однако добиться этого - это борьба, чтобы понять, как собирается сенча. Я медленно разбираюсь в этом, но иногда код работает немного WTF.

Я пытаюсь создать очень простое приложение, которое делает следующее.

1) Имеет три вкладки: Поиск поблизости (гео), Быстрый поиск по ключевым словам, Поиск по категориям.
2) Поиск по каждой из вкладок возвращает список результатов
3) Каждая из строк может быть отображена по клику Дополнительная информация.

Я разобрался с вкладками, думаю, все в порядке.

Вот так:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {

                var location = new Ext.Container({
            iconCls: 'search', 
            title: 'Location Search',
            items: [new Ext.Component({
                html: '<img src="images/gfb.gif" />'
            })]
        });

        var quick = new Ext.Container({
            iconCls: 'search', 
            title: 'Quick Search',
            scroll: 'vertical',
            items: [new Ext.Component({
                html: '<img src="images/gfb.gif" />'
            })]
        });

        var category = new Ext.Component({
            iconCls: 'search', 
            title: 'Category Search',
            html: '<img src="images/gfb.gif" /><p>Category</p>'
        });
        var tabpanel = new Ext.TabPanel({
            fullscreen: true,
            tabBar: {
                dock: 'bottom',
                scroll: 'horizontal',
                sortable: false,
                layout: {
                    pack: 'center'
                }
            },
            cls: 'card1',
            items: [
                location,
                quick,
                category
            ]
        });
    }
});

Это прекрасно работает. Нет разницы между вкладками, которые я знаю, но я настраиваюсь на это...

Да, первое, над чем я хочу поработать, — это вкладка поиска по ключевым словам, так как ее проще всего протестировать для этого приложения.

Итак, я добавляю форму.

var quickFormBase = {
                url: "../quicksearch.php?output=json",
                items: [{
                   xtype: 'fieldset',
                   instructions: 'The keyword search is great if you know the name of the company you are looking for, or the particular service you need to find.<p><br />To narrow it down to an area include the town or county name in your query</p>',
                   defaults: {
                       required: false,
                       labelAlign: 'left'
                   },
                   items: [{
                           xtype: 'textfield',
                           label: 'Search',
                           name : 'inpquery',
                           showClear: true,
                           autoCapitalize : false
                       }]
            }],
            listeners : {
                submit : function(form, result){
            console.log('results', result.SearchResults.MainResults.Advert);
                },
                exception : function(form, result){
                    console.log('failure', Ext.toArray(arguments));
                }
            }
    };

var quickForm = new Ext.form.FormPanel(quickFormBase);

Итак, моя конфигурация быстрой вкладки теперь выглядит так:

var quick = new Ext.Container({
            iconCls: 'search', 
            title: 'Quick Search',
            scroll: 'vertical',
            items: [new Ext.Component({
                html: '<img src="images/gfb.gif" />'
            }),quickForm]
});

Теперь у меня есть форма, которая выглядит именно так, как я хочу, и подключена к моему поиску json и возвращает рекламу на консоль. Здорово!

Теперь я хочу создать представление списка с верхней панелью и кнопкой «Назад». Я почти уверен, что это не способ настроить это, но я действительно изо всех сил пытаюсь найти примеры того, как это сделать, поскольку пример с источником имеет сложную настройку, а простые не делают то, что мне нужно. .

Теперь я добавляю конфигурацию модели вверху моего файла index.js, чтобы определить мою рекламную модель.

Ext.regModel('Advert',{
    fields: [
             {name: 'advertid', type:'int'},
             {name: 'Clientname', type:'string'},
             {name: 'telephone', type:'string'},
             {name: 'mobile', type:'string'},
             {name: 'fax', type:'string'},
             {name: 'url', type:'string'},
             {name: 'email', type:'string'},
             {name: 'additionalinfo', type:'string'},
             {name: 'address1', type:'string'},
             {name: 'address2', type:'string'},
             {name: 'address3', type:'string'},
             {name: 'postcode', type:'string'},
             {name: 'city', type:'string'},
             {name: 'Countyname', type:'string'},
             {name: 'longitude', type:'string'},
             {name: 'latitude', type:'string'}
    ]
});

В моем слушателе успеха формы я делаю следующее:

listeners : {
                submit : function(form, result){

                    var quickstore = new Ext.data.JsonStore({
                        model  : 'Advert',
                        data : result.SearchResults.MainResults.Advert
                    });

                    var listConfig = {
                            tpl: '<tpl for="."><div class="advert">{Clientname}</div></tpl>',
                            scope: this,
                            itemSelector: 'div.advert',
                            singleSelect: true,
                            store: quickstore,
                            dockedItems: [
                                            {
                                                xtype: 'toolbar',
                                                dock: 'top',
                                                items: [
                                                    {
                                                        text: 'Back',
                                                        ui: 'back',
                                                        handler: function(){
                                                            //Do some magic and make it go back, ta!
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                    };
                    var list = new Ext.List(Ext.apply(listConfig, {
                        fullscreen: true
                    }));
                },
                exception : function(form, result){
                    console.log('failure', Ext.toArray(arguments));
                }
        }

Это работает, однако не скользит, как хотелось бы, как при нажатии значков на нижней панели вкладок.

Теперь я падаю вниз, я не могу понять, как заставить работать кнопку «Назад», чтобы вернуться к поиску по ключевым словам.

Я нашел setCard и setActiveItem, но, похоже, я не могу получить доступ к ним в контексте «этот» в функции прослушивания результатов.

Может ли кто-нибудь привести простой пример того, как это сделать?