Extjs4中，getCmp 和 getComponent的区别是什么呢

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Extjs4中，getCmp 和 getComponent的区别是什么呢相关的知识，希望对你有一定的参考价值。

function clickBtnIpGrid()
var tabs = Ext.getCmp('tabs');
var tab = tabs.getComponent('IpGrid');
if(tab)

tabs.setActiveTab('IpGrid');

else

tabs.add( ....

在这段代码里，我把俩函数互换，就不能显示了，我看文档里这俩函数都可以通过id取到组件啊，求解

xt.get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element

返回的是 Ext.dom.Element 对象。

Ext.getCmp( String id)

返回的是Ext.Component对象。也就是在js代码中定义的对象。

 

例如，使用这两个方法：

temp1 = Ext.getCmp("checkbox1");

temp2 = Ext.get("checkbox1");

则得到的结果如下：

 参考技术A getComponent 这个方法是tabpanel组件下的方法追问

那是不是取其他xtype的组件就需要用getCmp呢~~还有get（）是在什么时候用呢

本回答被提问者采纳

为啥 Ext.getCmp(...).setChecked 会导致错误

【中文标题】为啥 Ext.getCmp(...).setChecked 会导致错误【英文标题】：Why does Ext.getCmp(...).setChecked cause errors为什么 Ext.getCmp(...).setChecked 会导致错误 【发布时间】：2017-08-19 22:48:29 【问题描述】：

我正在尝试在加载用于编辑用户信息的窗口时动态设置 ExtJS 6.2 单选框的选中状态。

我的窗口代码如下

Ext.define('scim.view.users.EditUserWdw', 
extend: 'Ext.window.Window',
alias: 'widget.EditUserWdw',
id: 'editUserWdw',

required: [
    'scim.view.users.UserController',
    'Ext.form.Panel'
],
width: 400,

listeners: 
    beforeclose: function (wdw) 
        var frm = this.down('form');
        if (frm.isDirty()) 
            Ext.Msg.show(
                title: 'Confirm Cancel',
                msg: '<p>You started editing a user. Closing this window now will cause you to lose any information you changed.</p><p>Are you sure?</p>',
                icon: Ext.Msg.QUESTION,
                buttons: Ext.Msg.YESNO,
                fn: function (ans) 
                    if (ans == 'yes') 
                        frm.reset();
                        wdw.close();
                    
                
            );
            return false;
         else 
            return true;
        
    
,

items: [
    xtype: 'form',
    reference: 'form',
    id: 'editUserFrm',
    border: false,
    style: 'background-color: #fff',
    url: '/scim_libs/Users.php?metho=updateUser&userId=' + sessionStorage.userId,
    padding: 5,
    bbar: ['->', 
        xtype: 'button',
        text: 'Update User',
        iconCls: 'x-fa fa-save',
        handler: function () 
            var frm = this.up('form');
            if (frm.isValid()) 
                frm.submit(
                    success: function (frm, response) 
                        var jData = Ext.util.JSON.decode(response.resposnse.responseText);
                        if (jData.status == "duplicate") 
                            Ext.Msg.show(
                                title: 'Duplicate Email',
                                msg: '<p>The email address <strong>' + Ext.getCmp('editUserEmail').getValue() + '</strong> is already used by another user.</p><p>Please use a different email address and try adding the user again.</p>',
                                icon: Ext.Msg.ERROR,
                                buttons: Ext.Msg.OK,
                                closable: false,
                                fn: function () 
                                    Ext.getCmp('editUserEmail').focus();
                                    this.close();
                                
                            )
                        
                        else if (jData.status == "success") 
                            Ext.getStore('User').load();
                            Ext.Msg.show(
                                title: 'User Added',
                                msg: '<p>The user <strong>' + Ext.getCmp('editUserFirstName').getValue() + ' ' + Ext.getCmp('addUserLastName').getValue() + '</strong> has been updated successfully.</p>',
                                icon: Ext.Msg.INFO,
                                buttons: Ext.Msg.OK,
                                fn: function () 
                                    Ext.getCmp('addUserFrm').reset();
                                    Ext.getCmp('addUserWdw').close();
                                
                            )
                         else 
                            Ext.Msg.show(
                                title: 'Unexpected Error!',
                                msg: '<p>An unexpected error occurred when trying to update the user <strong>' + Ext.getCmp('addUserFirstName').getValue + ' ' + Ext.getCmp('adduUserLastName').getValue() + '</strong>. Please try updating the user again.</p><p>Should this problem persist, please contact technical support and provide the following information:</p><p>' + jData.status + '</p>',
                                icon: Ext.Msg.ERROR,
                                buttons: Ext.Msg.OK,
                                fn: function () 
                                    Ext.getCmp('addUserFrm').reset();
                                    Ext.getCmp('addUserWdw').close();
                                
                            )
                        
                    
                )
            
        
    , 
        xtype: 'button',
        text: 'Cancel',
        iconCls: 'x-fa fa-ban',
        handler: function () 
            this.up('form').up('window').close();
        
    ],
    items: [
        xtype: 'textfield',
        anchor: '100%',
        name: 'editUserFirstName',
        id: 'editUserFirstName',
        fieldLabel: 'First Name',
        allowBlank: false,
        minLength: 2,
        madLength: 65,
        selectOnAutoFocus: true,
        listeners: 
            afterrender: function () 
                this.focus(true);
            
        
    , 
        xtype: 'textfield',
        anchor: '100%',
        name: 'editUserLastName',
        id: 'editUserLastName',
        fieldLabel: 'Last Name',
        allowBlank: false,
        minLength: 2,
        maxLength: 65
    , 
        xtype: 'textfield',
        anchor: '100%',
        name: 'editUserEmail',
        id: 'editUserEmail',
        fieldLabel: 'Email',
        allowBlank: false,
        maxLength: 255,
        selectOnFocus: true,
        vtype: 'email'
    , 
        xtype: 'textfield',
        anchor: '100%',
        name: 'editUserPhone',
        id: 'editUserPhone',
        fieldLabel: 'Phone',
        maskRe: /[0-9]/,
        regexText: 'Numbers Only',
        allowBlank: true,
        vtype: 'phone',
        maxLength: 14,
        listeners: 
            change: function () 
                if (this.getValue().length == 3) 
                    this.setValue('(' + this.getValue() + ') ');
                
                if (this.getValue().length == 9) 
                    this.setValue(this.getValue() + '-');
                
            
        
    , 
        xtype: 'fieldcontainer',
        fieldLabel: 'Reset Password',
        itemId: 'editUserResetGrp',
        defaults: 
            flex: 1
        ,
        layout: 'hbox',
        width: 200,
        items: [
            xtype: 'radiofield',
            boxLabel: 'Yes',
            name: 'editUserReset',
            inputValue: 1,
            id: 'editUserReset1'
        , 
            xtype: 'radiofield',
            boxLabel: 'No',
            name: 'editUserReset',
            inputValue: 0,
            id: 'editUserReset2'
        ]
    , 
        xtype: 'fieldcontainer',
        fieldLabel: 'Lock Account',
        defaults: 
            flex: 1
        ,
        layout: 'hbox',
        width: 200,
        items: [
            xtype: 'radiofield',
            boxLabel: 'Yes',
            name: 'editUserLocked',
            inputValue: 0,
            id: 'editUserLocked1'
        , 
            xtype: 'radiofield',
            boxLabel: 'No',
            name: 'editUserLocked',
            inputValue: 1,
            id: 'editUserLocked2'
        ]
    ]
]

)

我的控制器代码是

Ext.define('scim.view.users.UserController', 
extend: 'Ext.app.ViewController',
alias: 'controller.user',

addUser: function () 
    var addUserWdw = Ext.create('scim.view.users.AddUserWdw', 
        title: 'Add New User'
    ).show();
,

editUser: function (grid, rowIndex, colIndex) 
    var objRow = Ext.getStore('User').getAt(rowIndex);
    var editUserWdw = Ext.create('scim.view.users.EditUserWdw', 
        title: 'Edit User - ' + objRow.data.userFirstName + ' ' + objRow.data.userLastName
    ).show();
    Ext.getCmp('editUserFirstName').setValue(objRow.data.userFirstName);
    Ext.getCmp('editUserLastName').setValue(objRow.data.userLastName);
    Ext.getCmp('editUserEmail').setValue(true);
    Ext.getCmp('editUserPhone').setValue('(' + objRow.data.userPhone.substr(0, 3) + ') ' + objRow.data.userPhone.substr(3, 3) + '-' + objRow.data.userPhone.substr(6, 4));
    console.log(objRow.data.reset);
    if (objRow.data.reset == 0) 
        console.log(Ext.getCmp('editUserReset2'));
        console.log(Ext.getCmp('editUserReset2').checked);
        Ext.getCmp('editUserReset2').setChecked(true);
        console.log(Ext.getCmp('editUserReset2').checked);
     else 
        console.log(Ext.getCmp('editUserReset1'));
    
,

getUsers: function () 
    Ext.getStore('Users').load();

)

运行时

console.log(Ext.getCmp('editUserReset2').checked)

收到的结果与预期的一样“假”。

console.log(Ext.getCmp('editUserReset2').setChecked(true) 触发然后返回的错误是 未捕获的类型错误：Ext.getCmp(...).setChecked 不是函数 我已经尝试获取 fieldcontainer，然后是一个无线电场数组，并使用 setChecked(index, true) 获得相同的结果。

我已经检查了documentation，它是这个 xtype 的一种方法。所以我很困惑这个错误是从哪里产生的。任何帮助将不胜感激。

【问题讨论】：

在这里回答：sencha.com/forum/… 谢谢@EvanTrimboli... 【参考方案1】：

感谢@EvanTrimboli 的以下回答...

我在 Sencha 的网站上使用了现代工具包的文档，它使用了

Ext.getCmp(...).setChecked(true)

虽然我的代码实际上使用的是使用

的 Classic Toolkit

Ext.getCmp(...).setValue(value)

作为设置单选按钮选中状态的手段。

【讨论】：

以上是关于Extjs4中，getCmp 和 getComponent的区别是什么呢的主要内容，如果未能解决你的问题，请参考以下文章

在 ExtJS4 网格面板中获取对分页文本字段的引用

Extjs4 表单提交传递JSON格式到后台

如何在 Extjs 4 标签上添加点击事件

使用 store.load 下载文件（Excel 文件）？ (ExtJS 4.1)

Extjs 菜单检查项 - 如何调用？

Ext.js细节:在MVC中处理Widget Column，GetCmp和ComponentQuery， Id和ItemId