Question

我和Sencha一起去MVC路线。我有一个初始化的视口面板，就像twitter示例：

/**
* @author Jeff Blake
*/
Ext.regApplication('App', {
defaultTarget: 'viewport',
defaultUrl   : 'Viewport/index',
name         : 'App',
icon         : "mobile/public/resources/images/icon.png",
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png",
//useHistory   : false,
//useLoadMask : true,

launch: function() {
    Ext.Viewport.init();
    Ext.Viewport.onOrientationChange();

    this.viewport = new App.Viewport({
        application: this
    });

    Ext.dispatch({
        controller: 'User',
        action    : 'index'
    });
}
});

/**
* @class App.Viewport
* @extends Ext.Panel
* This is a default generated class which would usually be used to initialize your     application's
* main viewport. By default this is simply a welcome screen that tells you that the app was 
* generated correctly.
*/
App.Viewport = Ext.extend(Ext.Panel, {
id        : 'viewport',
layout    : 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',

initComponent: function() {

    Ext.apply(this, {

        dockedItems: [
            {
                // Top Bar
                dock   : 'top',
                xtype  : 'toolbar',
                title  : 'Whats Good',
                items: [
                    {
                        text: 'About'
                    },

                ]
            }


        ]
    });


App.Viewport.superclass.initComponent.apply(this, arguments);
}

});
Ext.reg('App.Viewport', App.Viewport);

新守则：

if (!App.viewport.getDockedComponent(homeBar)) {
        var homeBar = new App.HomeBar();
        App.viewport.addDocked(homeBar);
    }

我希望能够根据当前在视口中呈现的面板类型有条件地应用DockedItems（工具栏）。 EG：一个用于登录，主屏幕，详细信息屏幕等。

我尝试过使用Ext.apply（App.Viewport，{dockedItems：[App.LoginBar]}）; 但这不起作用。目前，它可以将工具栏添加到当前渲染的面板并将其设置为全屏，但不幸的是，转换和事物表现得非常奇怪，因为结构是

Panel
Toolbar
    Panel
    Toolbar
    /end Panel
/end Panel

有人有建议吗？

Answer 1

要以编程方式添加停靠项目，我建议您使用

viewport.addDocked(loginBar);

这样的方法比尝试更新组件的原始配置要好得多。

然后还有一个.removeDocked（）方法再次取消它。

还要确保您正在处理组件的实例，而不是尝试更新其类。

Answer 2

要获取对应用程序视口的引用，您可以通过“App”命名空间进入，该命名空间由regApplication配置的name属性自动创建。

所以你可以让你的工具栏按钮执行此操作，例如：

{
    text: 'About',
    handler: function() {
        App.viewport.getDockedItems()[0].setTitle('Pressed!');
    }
},

当你按下按钮时会改变标题。

但是现在我更好地理解你要做的是什么，我建议你不要将一个动态改变的工具栏停靠到外部视口，而是将单独的工具栏添加到其中的每个（卡）面板中。这样他们也可以很好地滑动; - ）

视口使用Sencha Touch应用条件工具栏

2 个答案: