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 を調べると、input 要素に 2 つのクラスが関連付けられていることがわかります

  • my-custom-class と
  • x-form-field (テキストボックス入力の拡張デフォルト クラス)

スタイルをオーバーライドしているため、入力要素に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

HTMLでCSSファイルを追加するときに、CSSファイルをインクルードしてからESTJS cssファイルをインクルードしていたため、要素が複数のクラスを取得すると、最後にインクルードされたクラスが優先されます（後で宣言します）。

したがって、extで生成された要素が次のようになっている場合

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

私の代わりに常にx-form-fieldcssを使用していました

ここで、cssの包含順序を変更しました。最初にextjscssをインクルードし、次にcssファイルをインクルードします。この方法でcss宣言がextjs cssよりも優先され、目的の結果が得られます。

質問を調べてくれてありがとう

于 2012-07-12T03:50:37.783 に答える