sencha-touch-2 - Sencha Touch 2.0のExt.Listで行が選択されたときにExt.Panelをプッシュするにはどうすればよいですか？

Question

Senchaドキュメントにあるような単純なExt.Listがある場合、名前の1つをクリックしたときに、新しいパネルまたはカルーセルを画面に「プッシュ」させるにはどうすればよいですか？

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フォーラムで質問することをお勧めします。おそらく、はるかに迅速な回答が得られるからです。