0

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 时，我看到输入元素有 2 个与之关联的类

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

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

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

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

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

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

谢谢你

4

2 回答 2

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

          ]
});
于 2012-07-12T17:06:14.080 回答
0

While adding the CSS files in HTML, I was including my CSS file and then ESTJS css file therefore when an element gets multiple classes it gives precedence to the class which is included last (declared later)

so when my ext generated element looked like below 

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

it was always using the x-form-field css instead of mine

Now i changed the css inclusion order. i first include extjs css and then include my css file this way my css declaration takes precedence over extjs css and give me the desired result

thank you all for looking into the question

于 2012-07-12T03:50:37.783 回答