2012-04-12 5 views
0

チェックボックスと2つの数値フィールドを1つの列に配置する方法はありますか?ExtJs:グリッドセル内に複数のフォームオブジェクト

 
+-----------------------+-----------------------+ 
|  Column 1  |  Column 2  | 
+-----------------------+-----------------------+ 
|      | CB  NF  NF | 
+-----------------------+-----------------------+ 
|      | CB  NF  NF | 
+-----------------------+-----------------------+ 
|      | CB  NF  NF | 
+-----------------------------------------------+ 

答えて

3

ような「標準的な」方法は、次にrenderTo設定とそれらのdivにコンポーネントをレンダリングする、IDを持つdivを含むように行/列のテンプレートを編集する機能を使用することを含みます。ただし、行ではなく列で作業しているので、簡単にアプローチできます。あなたのコラムの設定で

、このようなカスタムレンダラを使用します。

// May not be exact, I just came up with this on the spot 
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) { 
    return [ 
     "<div id='combobox_", rowIdx, "'></div>", 
     "<div id='numberfield_1_", rowIdx, "'></div>", 
     "<div id='numberfield_2_", rowIdx, "'></div>" 
    ].join(""); 
} 

だから今、この列の各セルは(ユニークなIDを持つ3つのdivを持っているあなたは、いくつかの他の方法で「rowIdx」を交換する必要があるかもしれません識別、record.idのような)。それでは、コンポーネントを作成してレンダリングしておくことは、あなた次第です。

グリッドのビューのrefreshメソッドは、並べ替え、フィルタリング、列の非表示など、グリッドが更新されるたびに呼び出されることに注意してください。afterrefreshイベントなどを監視してコンポーネントを再描画する必要があります必要に応じて。レンダリングされたコンポーネントを再レンダリングするためには、myComponent.rendered = false; myComponent.render();を使用するとうまくいくはずです。

このプロセスのかなりの部分を管理する人が書いたプラグインはおそらくありますが、これが基本的な概念です。それはかなりではありませんが、それは動作します。

+0

ありがとうございます。これは多くの助けになります! –

+0

3つではなく1つのdivをレンダリングし、3つのコンポーネントを保持するカスタムの 'Container'クラスを作成することができました。速いかもしれないし、維持しやすいかもしれない。 – Eric

関連する問題