ExtJS：チェックボックスのチェックボックスの表示/非表示を切り替える

Question

チェックボックスをオンまたはオフにしてコントロールを追加しようとしているExtJSチェックツリーExtJS Check Treeがあります。しかし、それは正しく発射されていないようです。ここで

がある Fiddle Example

場合は、チェックボックス「」選択されている、私は働くテキストフィールド、'testValue'を、非表示にしたいが、私は「A」のチェックボックスを選択解除した場合、その後、私はテキストフィールドを表示したい、'testValue'これは動作しません。

このテストでは、私はただselections.selected.length === 0かどうかを見ています。しかし、チェックボックスの選択を解除すると、アラートメッセージがトリガされないため、リスナーが起動していないように見えます。また、チェックボックスを再選択しなおすと、まだ起動しません。

これを達成するには、選択モデルを使用します（私はそれが動作することを知っています）。しかし、このチェックボックスを使用すると、すべてのツリーアイテムにチェックボックスが配置されます。

selModel: { 
     type: 'checkboxmodel', 
     listeners: { 
      selectionchange: 'onCheckedNodesChange' 
     } 
    } 

どのような提案でも大歓迎です！

EDIT allowDeselect: trueとselectのリスナーとのdeselect並べ替えを追加する （私は行動示すことがフィドルを更新）働いた：

selModel: { 
       allowDeselect: true, 
       listeners: { 
        deselect: function(model, record, index) { 
         text = record.get('text'); 
         alert(text); 
        }, 
        select: function(model, record, index) { 
         text = record.get('text'); 
         alert(text); 
        } 
       } 

      }, 

私は「A」が選択されたときに確認するとテキストフィールドは非表示のままですが、リスト内の別のアイテムを選択して選択を解除すると、テキストフィールドが戻ります。

私は、selectchangeイベントが発生したときにgetChecked（）メソッドだけを使用しようとしています。しかし、これは送信時にのみデータを返すようです（たとえば、Get checked nodesコントロール）。どんな提案も大歓迎です。これほど難しいはずはありません。

Answer 1

を使用することができます。 Ext.data.TreeModel 変更されたプロパティをチェックしていますノード：チェックボックスのcheckedプロパティを持つノードが

パラメータ ノードを変更したときに

http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.tree.Panel-event-checkchange

checkchange 火災を（ノードは、eOptsをチェックします）。

がチェック：ブール ノードの新しいチェック状態

eOpts：オブジェクト オプションがExt.util.Observable.addListenerに渡されたオブジェクトを。

var fields = [ 
      { 
       name: 'column' 
      }, 
      { 
       name: 'leaf', 
       type: 'boolean' 
      }, 
      { 
       name: 'checked', 
       type: 'boolean' 
      }, 
      { 
       name: 'cls', 
       type: 'string', 
       defaultValue: 'x-tree-noicon' 
      }, 
     ]; 

     this.dataModel = Ext.define('Filter-' + this.getId(), { 
      extend: 'Ext.data.Model', 
      fields: fields, 
     }); 


    columns: [ 
       { 
          xtype: 'treecolumn', 
          width: 200, 
          itemId: "filter", 
          dataIndex: 'column' , 
          renderer: function (val, metaData, r) { 

          }, 
          scope: this, 
         }, 
        ], 
        listeners: { 
         'checkchange': Ext.bind(function (node, checked,eOpts)   { 
         }, 
         scope: this 

Answer 2

表示されているチェックボックスは選択動作の一部ではありません。代わりに、NodeInterfaceクラスのchecked configurationから来ます。

ツリーパネルでは、行ベースの選択であるdefault selModelを使用しています。選択解除オプションはありません。ツリー内のチェックが選択を制御するようにするには、おそらくストアからの変更イベントをリッスンすることによって、手動でそれを構成する必要があります。あなたはどの項目を見つけることです気にすべてがチェックされているかどうか

OTH、あなたは我々はそれがSelectionChangeイベントに似てcheckchangeイベントを持つツリーパネルについてthe getChecked() method on the TreePanel