Question

在extjs4中如果我有一个按钮如下：

Ext.define('Pandora.view.MyButton', {
extend: 'Ext.button.Button',
alias: 'widget.mybutton',
text: 'click me',
id: 'butid'

}）;

如果我在视口中使用它，如下所示：

                    {
                      xtype: 'panel',
                      id: 'panelid',
                      title: 'One tab',
                      html: '<p>what is this </p>'
                    },
                    {
                      xtype: "mybutton"

                    },
                    {
                      xtype: "mybutton"
                    }

这将创建两个具有相同id的按钮（建议不是W3C），它可能会产生奇怪的行为。为了在应用程序中多次重复使用相同的按钮，建议使用xtype而不提供id（在这种情况下，Extjs将自己创建）。

Answer 1

这将创建两个ID相同的按钮

是的，这适用于您的情况，因为您在创建类

时已经对id配置进行了硬编码

Ext.define('Pandora.view.MyButton', {
    extend: 'Ext.button.Button',
    alias: 'widget.mybutton',
    text: 'click me',
    id: 'butid'     <=========
});

来自ExtJS4 docs：

请注意，此id也将用作。的元素ID 包含为此呈现给页面的HTML元素零件。这允许您编写基于id的CSS规则来设置样式该组件的特定实例唯一，也可以选择使用此组件的id作为父项的子元素。

参考： http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button

Answer 2

ID表示您不能在一个页面上有两个，它们使用DOM ID进行1对1映射。因此，您无法定义将被重用以具有硬编码ID的类。如果您需要查找班级的所有元素，请使用Ext.ComponentQuery.query将您要找的xtype传递给

// You should also pass in a root component to start the search from
// but it's optional
var buttons = Ext.ComponentQuery.query('mybutton', root);

现在您可以从类定义中删除您的ID

Extjs4中的xtype创建相同的id

2 个答案: