Question

我需要一些帮助，我正在使用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（）标记中需要什么函数才能将容器中的dockedItem更改为newBlock而不是content。

非常感谢您的帮助。

Answer 1

addDocked和removeDocked。

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

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

使用Sencha Touch中的按钮处理程序添加面板

1 个答案: