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

Posted 2023-02-26

【中文标题】视口使用 Sencha Touch 应用条件工具栏

【英文标题】：Viewport Apply Conditional Toolbar with Sencha Touch

【发布时间】：2011-01-18 22:54:20

【问题描述】：

我将使用 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

有人有什么建议吗？

【参考方案1】：

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

viewport.addDocked(loginBar);

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

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

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

【讨论】：

我收到 TypeError: Object # has no method 'addDocked'

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' ); );

它与制作组件实例有关：我已经尝试过但无法让应用程序创建 App.Viewport 的实例，将其分配为视口，然后访问以编程方式实例化。

是的，App.Viewport 是一个组件“类”，您需要实例化它才能将组件实际放置在屏幕上（就像您一样）。但是在该实例上使用 addDocked() 方法： this.viewport.addDocked(loginBar) ... 其中 loginBar 也是一个实例（App.LoginBar 组件的）

如果您更新 OQ 以发布您的所有 javascript，我认为修复它会很容易 ;-)

【参考方案2】：

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

所以你可以让你的工具栏按钮这样做：

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

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

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

【讨论】：

就是这样。谢谢詹姆斯。是的，这就是我目前正在做的事情，但幻灯片动画无法正常工作，所以我希望这种方法能够解决这个问题 - 因为将跨多张卡片工作的工具栏停靠到视口更有意义。

嗯，这是一个问题。面板上的工具栏也应该滑动！