1

我和 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);
    }

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

我试过使用 Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]}); 但这不起作用。目前它可以将工具栏添加到当前渲染的面板并将其设置为全屏，但不幸的是，转换和事情的行为很奇怪，因为结构是

Panel
Toolbar
    Panel
    Toolbar
    /end Panel
/end Panel

有人有建议吗？

4

2 回答 2

2

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

viewport.addDocked(loginBar);

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

然后还有一个 .removeDocked() 方法可以再次将其取下。

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

于 2011-01-19T17:21:11.427 回答
1

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

因此，您可以使工具栏按钮执行此操作，例如：

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

当您按下按钮时，这会使标题发生变化。

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

于 2011-01-20T23:39:21.963 回答