ExtJs：无法在表单中显示字段

Posted 2023-02-26

【中文标题】ExtJs：无法在表单中显示字段

【英文标题】：ExtJs: cannot show field in form

【发布时间】：2015-08-22 21:46:37

【问题描述】：

我正在 ExtJs 4.2 中构建一个 MVC 应用程序，并且有一个窗口和一个窗体。

表单面板几乎没有我想显示/隐藏的隐藏文本字段。

当我运行这个命令时：

Ext.getCmp('PartsSell').show();

或

Ext.getCmp('PartsSell').setVisible(true);

甚至

Ext.widget('ObjectForm').getForm().findField('PartsSell').setVisible(true);

什么都没有发生！

这里是formpanel sn-p:

Ext.define('crm.view.ObjectForm', 
    extend      : 'Ext.form.Panel',
    header      : false,
    alias       : 'widget.ObjectForm',
    url         : 'action.php',
    id          : "ObjectForm",
    defaultType : 'textfield',
    initComponent: function() 
        Ext.apply(this, 
            items   : [
            
                            fieldLabel  : 'label',
                            labelWidth  : 115,
                            hidden      : true,
                            allowBlank  : true,
                            name        : 'PartsSell',
                            itemId      : 'PartsSell',
                            xtype       : 'textfield',
                            vtype       : 'DigitsVtype',
                            width       : 150,
                            padding     : '0 0 0 15'
            ,
            /* other stuff */]
         );
        this.callParent(arguments);
    
 );

FF/chrome 控制台的行为就像一切正常。

如果我将“隐藏”参数设置为“假”，则显示该字段。

根据 Tarabass 和 Drake 的建议： 我在itemId 上更改了id。

现在我可以通过

触发字段了

Ext.ComponentQuery.query('#PartsSell')[0].hide() / .show();

【问题讨论】：

你为什么要用initComponent和Ext.apply包装这个？

确保您只有一个带有id“PartsSell”的组件（您可能会调用show 而不是您正在查看的那个）。另请注意，Ext.widget 创建了新的 组件，因此不适合您的目的。

在组件 classes 中指定 ids 是非常糟糕的主意。 ids 必须是唯一的，并且类应该被实例化多次，所以你已经创造了id 冲突的可能性。如果您至少两次致电Ext.widget('ObjectForm')，那么您肯定拥有它。

德雷克，你说得对，我将在 itemId 上重写 id，但字段“PartsSell”绝对是唯一的，并且 Ext.widget('ObjectForm') 仅使用一次，所以问题出在其他地方......有什么想法吗？

Pawel，你可以在这个答案中找到一个很好的解释：***.com/questions/14492179/…

【参考方案1】：

将id: 'PartsSell' 更改为itemId: 'PartsSell'。 使用选择器 '#PartsSell' 选择组件。 然后使用setHidden(false)（由config system生成）方法将hidden设置为false。

类似：Ext.ComponentQuery.query('#PartsSell')[0].setHidden(false);

【讨论】：

谢谢你！但是 setHidden 不起作用（我不明白为什么？）所以我使用了显示/隐藏。您能否简要解释一下为什么我不能通过id 和Ext.getCmp() 处理这个领域？

我不知道。看看这个小提琴，它工作得很好：fiddle.sencha.com/#fiddle/smf

【参考方案2】：

当你覆盖默认方法时，你需要运行callParent()。

Ext.define('crm.view.ObjectForm', 
    extend: 'Ext.form.Panel',
    width: 300,
    height: 300,
    header: false,
    alias: 'widget.ObjectForm',
    url: 'action.php',
    id: 'ObjectForm',
    initComponent: function() 
        Ext.apply(this, 
            items: [
                fieldLabel: 'label',
                labelWidth: 115,
                //hidden      : true,
                allowBlank: true,
                name: 'PartsSell',
                id: 'PartsSell',
                xtype: 'textfield',
                vtype: 'DigitsVtype',
                width: 150,
                padding: '0 0 0 15'
            ]
        );
        this.callParent(arguments);
    
);

【讨论】：

Guilherme，谢谢，对不起，我应该在我的 sn-p 中包含这些最后的字符串。