将（右）按钮添加到 Sencha 导航视图

Posted 2023-02-25

【中文标题】将（右）按钮添加到 Sencha 导航视图

【英文标题】：Add (right) Button to Sencha Navigation View

【发布时间】：2012-08-21 14:30:40

【问题描述】：

我想根据我显示的视图动态地将（右对齐）按钮添加到活动导航视图。有什么合适的方法吗？我在网上找到了很多半好的例子，但没有让它们起作用。这是我尝试过的：

Ext.define('Sencha.view.user.Login', 
extend:'Ext.navigation.View',
//fullscreen: true,
xtype: 'loginview',

requires:[
    'Ext.form.FieldSet',
    'Ext.field.Email',
    'Ext.field.Password'
],
config: 
    title: 'Log in',
    iconCls: 'use',
    cls: 'kidsbackground',
    scrollable: false,
    navigationBar: 
        items: [

        ]
    ,
    items:[
        
            xtype: 'loginform'
        
    ]
,
addRightButton:function(button)
    var navigationBar = this.config.navigationBar;
    console.log("navigationBar: "+navigationBar);
    var rightButton = Ext.Button.create(
        xtype: 'button',
        ui: 'action',
        iconCls: 'action',
        iconMask: true,
        align: 'right' );

    console.log("rightButton: "+rightButton);
    //navigationBar.addItem(rightButton);

    var oNavigationbar = 
        docked: 'top',

        backButton : 
            margin: 7,
            docked: "left",
            ui : 'back'
        ,
        items: [
            Ext.create("Ext.Button", 
                text: "Button1"
            ),
            Ext.create("Ext.Button", 
                text: "Button2",
                align: "right"
            )
        ]
    ;
    this.setNavigationBar(oNavigationbar);
    /*this.setNavigationBar(
        items: [
            
             id: 'rightButton',
             xtype: 'button',
             text: 'yes!'
             //placeHolder: 'Search...',
             //align: 'right'
             
        ]
    );*/
    console.log("wow, no crash, really ?");

);

当我运行上面的代码时，我得到了奇怪的错误，其中之一是这个（见附件）：

【参考方案1】：

您可以在Sencha Touch 2 Navigation View example 上尝试此代码（在 Chrome 开发者工具的控制台中）：

Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add(
    xtype:'button',
    text:'Right',
    align:'right'
);

它基本上得到navigationview，然后是这个视图的导航栏，最后添加按钮。

这是向导航栏添加按钮的正确方法。

希望对你有帮助

【讨论】：

酷！现在正在尝试。你知道这个例子的源代码是否在 git hub 上可用？如果是，你知道网址吗？

现在测试了，效果很好！当我点击左对齐的后退按钮时，你知道我如何删除它吗？

当您下载 Sencha Touch 时，您会得到一个包含 20 多个示例的示例/文件夹。

【参考方案2】：

不同的方式

var navigationView = Ext.create('Ext.NavigationView',

  useTitleForBackButtonText: false,
  scrollable: false,
  layout:
  
    type: 'card',
    animation: null
  ,
  navigationBar:
  
    items:
    [
      
        xtype: 'togglefield',
        name: 'smsmode',
        align: 'right',
        value: 0,
        disabled: true
      ,
      
        text: '',
        iconCls: 'delete',
        align: 'right',
        ui: 'back',
        listeners:
        
          tap: function()
          
            navigator.app.exitApp();
          
        
      
    ]
  
);