Проверьте и снимите узлы в treepanel

Question

Чтобы проверить: ребенок должен проверить родителей на дерево, а очистка родительского флажка должна очистить все его дочерние элементы.

Пример:

Parent1
--child1
--child2
          --subChild1
          --subChild2

Scenario1: В описанном выше случае, если subChild1 проверяется, затем Parent1 и child2 также должны быть проверены.

Scenario2: Если Parent1 проверяются, то все его дети (проверено) должны быть сняты.

От этого Check/Uncheck Nodes, только когда выбран родительский узел, его дочерний узел выбирается.

Их что-то implemeted, как я хочу, но не в состоянии понять это (реализация), так как уровень сложности достаточно высок для меня understand.Here это reference

Пожалуйста, помогите мне решить эту функциональность. Спасибо. Любая помощь будет оценена.

Answer 1

Вот что у меня есть done.It потребовалось некоторое время, но он работал.

checkchange : function(node, checked, opts) { 

function clearNodeSelection(node){ 
    //node is not leaf node 
    console.log(node); 
    leafNode = node.raw.leaf; 
    if(!leafNode){ 
     node.cascadeBy(function(node) { 
      node.set('checked', false); 
     }) 
    } 
} 

if(!checked){ 
    console.log("inside !checked : "+checked); 
    clearNodeSelection(node); 
} 

function selectParentNodes(node){ 
    var parentNode = node.parentNode; 
    if(parentNode){ 
     parentNode.set('checked', true); 
     selectParentNodes(parentNode); 
    } 
} 

selectParentNodes(node); 
} 

Atlast, Thanks @VDP. «SO» - это потрясающе.

Answer 2

Здесь вы идете! Working fiddle

=> Добавление слушателя для checkchange, проверьте, если он имеет ChildNodes, если так установите значение на ChildNodes

Примечание: Проверьте данные имеют параметр checked: false для включения галочки. (Если не посылается фоновым вы можете заставить его, добавив его к вашей модели и установить его по умолчанию)

var store = Ext.create('Ext.data.TreeStore', { 
    root: { 
     expanded: true, 
     children: [ 
      { text: "detention", leaf: true, checked: false }, 
      { text: "homework", expanded: true, children: [ 
       { text: "book report", leaf: true, checked: false }, 
       { text: "algebra", leaf: true, checked: false} 
      ], checked: false }, 
      { text: "buy lottery tickets", leaf: true, checked: false } 
     ] 
    } 
}); 

Ext.create('Ext.tree.Panel', { 
    title: 'Simple Tree', 
    width: 200, 
    height: 150, 
    store: store, 
    rootVisible: false, 
    renderTo: Ext.getBody(), 
    listeners: { 
     checkchange: function(node, checked, eOpts){ 
      if(node.hasChildNodes()){ 
       node.eachChild(function(childNode){ 
        childNode.set('checked', checked); 
       }); 
      } 
     } 
    } 

});