在 Sencha Touch 中使用按钮处理程序添加面板答案

【问题标题】：Adding panels using button handler in Sencha Touch在 Sencha Touch 中使用按钮处理程序添加面板
【发布时间】：2011-07-11 13:29:53
【问题描述】：

我需要一点帮助，我正在 Sencha Touch 中构建一个应用程序，我需要在按下按钮时更改容器内的停靠项目。我认为这是更改应用程序内内容的最佳方式（即在页面之间切换）。

到目前为止，我有以下代码 -

var App = new Ext.Application({
    name: 'Test',
    useLoadMask: true,
    launch: function () {

        // Toolbar
        Test.views.toolbar = new Ext.Toolbar({
            id: 'toolbar',
            title: 'Friend Pay'
        });

        // Content
        Test.views.content = new Ext.Panel({
            id: 'content',
            layout: 'fit',
            dockedItems: [{
                cls: 'copy',
                html: '<h2>Copy block</h2>'
            }, {
                xtype: 'button',
                id: 'buttonPanel',
                html: 'Request Payment',
                handler: function () {
                    // Link to newBlock panel
                }
            }]
        });

        // Content
        Test.views.newBlock = new Ext.Panel({
            id: 'content',
            layout: 'fit',
            dockedItems: [{
                cls: 'copy',
                html: '<h2>Test 2</h2>'
            }]
        });

        // Container
        Test.views.container = new Ext.Panel({
            id: 'container',
            layout: 'fit',
            dockedItems: [Test.views.toolbar, Test.views.content]
        });

        // Viewport - Entire screen
        Test.views.viewport = new Ext.Panel({
            fullscreen: true,
            scroll: 'vertical',
            items: [Test.views.container]
        });

    }
});

function() 标记中需要什么函数才能使按钮处理程序将容器中的停靠项更改为 newBlock 而不是内容。

非常感谢您提前提供的帮助。

【问题讨论】：

标签： mobile extjs sencha-touch

【解决方案1】：

addDocked 和 removeDocked。

Test.views.viewport.removeDocked( Test.views.content )
Test.views.viewport.addDocked( Test.views.newBlock )

您将内容添加到dockedItems 似乎有点奇怪，也许您想将它们添加到普通的items 集合中？无论哪种方式，请查看main api docs 中所有可用于Ext.Panel 的内容，以熟悉标准组件功能。

【讨论】：