Extjs 4.1.1 - 将自定义类应用于表单字段答案

【问题标题】：Extjs 4.1.1 - Applying custom class to a form fieldExtjs 4.1.1 - 将自定义类应用于表单字段
【发布时间】：2012-07-11 05:53:07
【问题描述】：

ExtJs 4.1.1 问题

我正在尝试将自定义类应用于面板内的一组文本框我正在做的方式是在面板的 defaults 属性中指定 fieldCls 以便它适用于面板内的所有文本框

下面是示例代码

pnlTest = Ext.create('Ext.panel.Panel', {
     width  : 600
    ,height : 190
    ,defaults: {xtype:'textfield', fieldCls:'my-custom-class'}
    ,items  : [ 
            {name :'name1', fieldLabel:'Name 1' }
           ,{name :'name2', fieldLabel:'Name 2' }
           ,{name :'name3', fieldLabel:'Name 3' }
           ,{name :'name4', fieldLabel:'Name 4' }

          ]
});

在检查生成的 HTML 时，我发现输入元素有 2 个与之关联的类

我的自定义类和
x-form-field （文本框的exts默认类输入）

我不想在我的输入元素中有 x-form-field，因为它会覆盖我的样式

ExtJs 文档指出 fieldCls 的默认值是 'x-form-field' 并不意味着如果我提供我的 fieldCls 值，它必须替换默认而不是附加到它，或者我在这里做错了什么。

我确实对此进行了一些研究，并没有发现登录到 sencha 论坛的任何错误或问题。

谁能指导我如何使用 textfield 的 fieldCls 属性？

作为一种解决方法，目前我提供 fieldStyle 来覆盖所有样式，但我的目标是使用类，因为我的样式规范字符串相当长且动态

谢谢

【问题讨论】：

您是否在创建面板后尝试调试 fieldCls 实际值？

标签： extjs4.1

【解决方案1】：

实际上，您仍然以非标准方式进行操作，根据文档，让 fieldCls 覆盖的正确方法是使用表单面板上的“fieldDefaults”进行操作：

pnlTest = Ext.create('Ext.form.Panel', {
     width  : 600
    ,height : 190
    ,fieldDefaults: {xtype:'textfield', fieldCls:'my-custom-class'}
    ,items  : [ 
            {name :'name1', fieldLabel:'Name 1' }
           ,{name :'name2', fieldLabel:'Name 2' }
           ,{name :'name3', fieldLabel:'Name 3' }
           ,{name :'name4', fieldLabel:'Name 4' }

          ]
});

【讨论】：

【解决方案2】：

在 HTML 中添加 CSS 文件时，我先包含了我的 CSS 文件，然后是 ESTJS css 文件因此，当一个元素获得多个类时，它优先于最后包含的类（稍后声明）

所以当我的 ext 生成的元素如下所示时

 <input type='text' class='my-custom-class x-form-field'>

它总是使用 x-form-field css 而不是我的

现在我更改了 css 包含顺序。我首先包含 extjs css，然后包含我的 css 文件这样我的 css 声明优先于 extjs css 并给我想要的结果

感谢大家关注这个问题

【讨论】：