Question

Given a simple Ext.List like the one in the Sencha docs, how can I make a new Panel or Carousel get “pushed” onto the screen when I click on one of the names?

http://docs.sencha.com/touch/2-0/#!/guide/list

I’d like to be able to have a button to navigate back to the main screen too.

Answer 1

You can achieve this using Ext.navigation.View. Here is a very simple application demonstrating this:

Ext.setup({
    // onReady is when we can start building our application
    onReady: function() {
        // Create the view by just adding a config block into Ext.Viewport.
        // We give it a reference of `view` so we can use it later
        var view = Ext.Viewport.add({
            // Give it an xtype of `navigationview` so it knows to create a NavigaitonView
            xtype: 'navigationview',

            // Define the list as its only item
            items: [
                {
                    xtype: 'list',

                    // Give it a title so the navigation view will show it
                    title: 'List',

                    // `itemTpl` is the template for each item in the list. We are going to create a store
                    // with a bunch of records, which each have a field called `name`, so we use that in our
                    // template
                    itemTpl: '{name}',

                    // Define our store
                    store: {
                        // Define the fields that our store will have
                        fields: ['name'],

                        // And give it some data for each record.
                        data: [
                            { name: 'one' },
                            { name: 'two' },
                            { name: 'three' }
                        ]
                    },

                    // Now we add a listener for the `itemtap` event, which is fired when a user taps on an item
                    // in this list. This event is passed various arguments in the signature, but we only need the
                    // record
                    listeners: {
                        itemtap: function(list, index, target, record) {
                            // now we have the record from the store, which was tapped. we now want to push a new view into
                            // the navigaitonview
                            view.push({
                                // Give it an xtype of panel
                                xtype: 'panel',

                                // Set the title to the name field of the record
                                title: record.get('name'),

                                // And add some random html
                                html: 'This is my pushed view!'
                            })
                        }
                    }
                }
            ]
        });
    }
});

I’ve added inline comments so you know what is going on.

I also suggest you to ask questions over on the Sencha Forums as you will probably receive a much quicker response.