Question

ExtJs 4.1.1问题

我正在尝试将自定义类应用于面板内的一组文本框我正在做的方法是在面板的默认值属性中指定 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时，我看到input元素有2个与之关联的类

my-custom-class和
x-form-field （exts文本框的默认类输入）

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

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

我确实对此进行了一些研究，并没有发现任何错误或关注记录在sencha论坛上。

任何人都可以指导我如何使用textfield的fieldCls属性吗？

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

三江源

Answer 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' }

          ]
});

Answer 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并给我想要的结果

谢谢大家研究这个问题

Extjs 4.1.1 - 将自定义类应用于表单域

2 个答案: