ExtJS: Показать/скрыть управление на флажке selectionchange

Question

У меня есть проверочное дерево ExtJS ExtJS Check Tree, что я пытаюсь добавить элемент управления на основе элементов, отмеченных или непроверенных. Однако, похоже, он не срабатывает правильно.

Вот Fiddle Example

Когда флажок «A» выбран, я хочу, чтобы скрыть текстовое поле, '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» , текстовое поле остается скрытым, но если вы выберете другой элемент в списке и затем отмените его выбор, появится текстовое поле.

Я пытаюсь использовать метод getChecked(), когда происходит событие changechange. Однако, похоже, это только возвращает данные, когда я делаю submit (например, в элементе управления Get checked nodes). Любые предложения будут приветствоваться. Это не должно быть так сложно.

Answer 1

Для панели дерева мы имеем checkchange событие это похоже на событие SelectionChange.

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

checkchange (узел, проверил, eOpts) Пожаров, когда узел с проверяемым имуществом флажка изменяет

Параметров узла: Ext.data.TreeModel Узла, который проверяется свойством было изменен.

проверил: Boolean новый проверил состояние узла

eOpts: Object Параметры объекта, переданного в 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

Флажки, которые вы видите, не являются частью поведения выбора. Вместо этого они исходят от checked configuration класса NodeInterface.

В вашей панели дерева используется default selModel, который является выбором на основе строк, без опции отмены выделения. Если вы хотите, чтобы проверки in-tree контролировали выбор, вам необходимо настроить это вручную, возможно, прослушивая события изменения из магазина.

OTH, если все, что вы заботитесь о выяснить, какие элементы проверяются или нет, вы можете использовать the getChecked() method on the TreePanel