如何在Sencha Touch2.0的Ext.List上选择行时推送Ext.Panel？

Question

给定一个像Sencha文档中那样的简单Ext.List，当我单击其中一个名称时，如何使新的面板或Carousel被“推”到屏幕上？

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

我也希望能够有一个按钮来导航回到主屏幕。

Answer 1

您可以使用Ext.navigation.View来实现这一点。下面是一个非常简单的应用程序，演示了这一点：

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

我已经添加了内联注释，这样您就可以知道发生了什么。

我还建议你在Sencha Forums上提问，因为你可能会得到更快的回复。