Navigating with a button in sencha touch

Question

I am taking my first steps with Sencha touch. The results are just what I am after, getting there however is a struggle to get how sencha is put together. I am slowly figuring it out but sometimes the way the code works is a bit WTF.

I am trying to build a very simple app that does the following.

1) Has three tabs, Search nearby (geo), Quick Keyword Search, Category Search.
2) Each of the tabs search returns a list of results
3) Each of the rows are click able to show a bit more information.

I have figured out the tabs okay I think.

Like so:

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

That works great. No difference between the tabs I know but I'm building up to that...

Right, the first thing I want to work on is the Keyword search tab as that is the simplest one to test for this app.

So I add a form.

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

So my quick tab config now looks like this:

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

I now have a form looking exactly how I want and hooked into my json search and returning adverts to the console. Great!

Now I want to create a list view that has a top bar with a back button. This I am pretty sure is not the way to set this up, but I am really struggling to find examples on how to do this as the example with the source have a complicated setup, and the simple ones don't do what I am after.

I now add a model config at the top of my index.js file to define my Advert model

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

In my form success listener I do the following:

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

This works however it doesn't slide in as I would like, as it does when clicking the icons in the bottom tab bar.

Now this is where I fall down, I can't figure out how I make the back button work to take me back to the keyword search.

I have found setCard and setActiveItem but I don't seem able to access those in the "this" context in the result listener function.

Could someone give a simple example of how to do this?

Answer 1

The easiest way to solve this is probably by giving your TabPanel an id and then referencing it inside your handler. Try updating your tabpanel like this:

var tabpanel = new Ext.TabPanel({
    id: 'mainPanel',
    ... the rest of your config here

And your back button handler like this:

handler: function() {
    Ext.getCmp('mainPanel').layout.setActiveItem(0);
}

This will move to the first card in the tabpanel (your location card).

Alternatively, if you want to modify the value of 'this' in the handler function, you can just pass in a scope:

text: 'Back',
ui: 'back',
scope: tabpanel,
handler: function(){
    this.layout.setActiveItem(0);
}

'this' now refers to whatever you passed in on the scope config. It's very common to see people use "scope: this" so that 'this' inside their handler is the same as 'this' outside the handler.