Question

我做了一个共同的视图，所有页面都需要此视图。所以无论我需要什么，我都称之为xtype的观点。在这个公共视图中有一些由id值定义的组件。

根据要求取决于页面我需要隐藏一些按钮从常见视图再次需要显示。这些活动将取决于页面。首次启动时间屏幕即将到来。一旦我导航到另一个页面，它将显示错误，如 Ext.AbstractManager.register（）：使用此管理器注册重复ID“btnLogout”。

如果我将componets id值更改为name value或itemId值。然后它会导航很好但问题是无法隐藏和显示按钮，因为显示未定义的sysntax是var a = Ext.getCmp（'btnBackID'）; console.log（a）;,它将是未定义的。一旦组件作为对象返回，我就可以隐藏显示功能。

任何人都可以告诉我这个问题的解决方法是否能为我提供其他方法。非常感谢。谢谢。我在下面给出了我的代码

常见视图

Ext.define('abc.view.GlobalNavigationView', {
    extend:'Ext.panel.Panel',
    alias:'widget.globalNavigationView',
    id:'globalNavigationId',
     layout: {
         type: 'vbox',
         align:'stretch'
     },
    items:
        [
            {
                xtype: 'toolbar',
                layout: 'hbox',
                flex: 1,
                items:
                    [
                        {
                            xtype: 'button',
                            flex: .1,
                            text: 'Back',
                            id: 'btnBackID',                    
                        },                        

                        {
                            xtype: 'button',
                            flex:.1,
                            id: 'btnSave',
                            cls: 'saveCls'
                        },
                        {
                            xtype: 'button',
                            flex:.1,
                            id: 'btnEmail',
                            text: 'Email'
                        },
                        {
                            xtype: 'button',
                            flex:.1,
                            id: 'btnPrint',
                            text: 'Print'
                        },
                        {
                            xtype: 'button',
                            flex:.1,
                            itemId: 'btnFilter',
                            text: 'Filter'
                        },
                        {
                            xtype: 'button',
                            flex:.1,
                            id: 'btnLogout',
                            cls: 'logoutCls'
                        }
                    ]
            }

        ]
});

HomeView1

Ext.define('GulfMark.view.WeeklyHomeView1', {
     extend:'Ext.panel.Panel',
     alias:'widget.weeklyfcastView',
     id:'weeklyfcastId',
        layout: 'fit',
        items:
        [
           {
                xtype: 'globalNavigationView',
                id: 'globalNavigationWeekly1',
                flex: 1,
                docked:"top",
                scrollable:false
            },
            {
                my componets of this view
                .........................
            }

        ]
});

HomeView2

Ext.define('GulfMark.view.WeeklyHomeView1', {
     extend:'Ext.panel.Panel',
     alias:'widget.weeklyfcastView',
     id:'weeklyfcastId',
        layout: 'fit',
        items:
        [
           {
                xtype: 'globalNavigationView',
                id: 'globalNavigationWeekly2',
                flex: 1,
                docked:"top",
                scrollable:false
            },
            {
               my componets of this view
                -----------------------
            }

        ]
});

控制器代码：

  init:function(){

        this.control({
            'globalNavigationView ':{
                click:this.onbtnBackClick,
                render: this.onbtnBackrender,
            },            
            'weeklyfcastView':{
                show:this.onShowweeklyfcastView,
                render:this.onRenderweeklyfcastView
            }
        });
    },

   onShowweeklyfcastView: function(){       

        var btnFilter = Ext.getCmp('btnFilter');
        console.log(btnFilter); // if i used components id to name or itemId, here will show undefined
        btnFilter.setHidden(true);  
        //btnFilter .hide();

    }

Answer 1

如果您的视图不是单身，则无法为其组件提供ID - ID必须唯一，否则会出现duplicate id错误。

您真正需要的是对您尝试显示/隐藏按钮的视图的一些参考。获得该引用后，可以使用down方法查找按钮。例如：

var iPanel = // Create new panel here.
iPanel.down('button[text="Email"]').hide();

Answer 2

此代码在EXTJS 6中适用于同一视图中的多个按钮，具有相同的 itemId （不是id-id会抛出错误，如上所述）< / p>

查看：

            {
                xtype : 'button',
                text : 'Save and Come Back Button 1',
                itemId : 'saveAndComeBackButton',
                handler : 'saveAndComeBack'
            },
            {
                xtype : 'button',
                text : 'Save and Come Back Button 2',
                itemId : 'saveAndComeBackButton',
                handler : 'saveAndComeBack'
            },

控制器：

this.__setButtons('#saveAndComeBackButton','disable');


__setButtons: function (buttonItemId,state) {

    Ext.Array.forEach(
        Ext.ComponentQuery.query(buttonItemId),
        function (button){
            if (state === 'enable'){
                button.enable();
            }else{
                button.disable();
            }
        }
    );

}

Ext.AbstractManager.register（）：使用此管理器注册重复的ID“btnLogout”

2 个答案: