在Sencha Touch 2.0的Ext.List上选择行时如何按下Ext.Panel？ [英] How to push Ext.Panel when row selected on Ext.List in Sencha Touch 2.0?

问题描述

给定一个类似Sencha文档中的Ext.List的简单Ext.List，当我单击其中一个名称时，如何使新的Panel或Carousel"推"到屏幕上？

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

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

推荐答案

您可以使用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上提问，因为您可能会得到更快的答复。

这篇关于在Sencha Touch 2.0的Ext.List上选择行时如何按下Ext.Panel？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！