In-built method to deselect child nodes of a node in ExtJs 4 tree panel -
i using extjs tree panel. there in-build method or property deselect child nodes of node when select node.
so consider below image, assuming nodes in yellow color selected. if select 1.1 now, system should automatically deselect 1.1.2 & if selected node 1, should deselect 1.1.2, .1.2.1, 1.2.2.
please provide suggestions
ext.create('ext.tree.panel', { title: 'simple tree', renderto: ext.getbody(), width: 400, height: 400, store: { root: { expanded: true, children: [{ text: "1 detention", expanded: true, "checked": false, children: [{ text: '1.1 foo', leaf: true, "checked": false }, { text: '1.2 bar', leaf: true, "checked": false }] }, { text: "2 homework", expanded: true, "checked": false, children: [{ text: "2.1 book report", leaf: true, "checked": false }, { text: "2.2 algebra", expanded: true, "checked": false, children: [{ text: "2.2.1 buy lottery tickets", leaf: true, "checked": false }, { text: "2.2.2 buy lottery tickets 2", leaf: true, "checked": false }] }] }, { text: "3 buy lottery tickets", leaf: true, "checked": false }] } }, usearrows: false, rootvisible: false, selmodel: { mode: 'simple' }, listeners: { deselect: function (tree, record) { if (record.data.text === '1 detention') { } }, select: function (tree, record) { var parentnode = record.parentnode; // deselect children function deselectchildren(record) { tree.deselect(record.childnodes, false); record.eachchild(deselectchildren); } deselectchildren(record); // see if siblings selected var allsiblingselected = false; if (parentnode) { allsiblingselected = parentnode.childnodes.reduce(function (previous, node) { return previous && tree.isselected(node) }, true); } if (allsiblingselected) { tree.select(parentnode, true); // trigger req 1 } // deselect ancestors else { while (parentnode) { tree.deselect(parentnode); parentnode = parentnode.parentnode; } } } } });
no, no such thing built-in. oh, think it, there event things built ext. can catch 1 , implement own logic in there! in case, select event.
here's how suggest described (using example tree panel doc):
ext.create('ext.tree.panel', { title: 'simple tree', renderto: ext.getbody(), width: 400, height: 400, store: { root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true }, { text: "algebra", expanded: true, children: [ { text: "buy lottery tickets", leaf: true } ]} ] }, { text: "buy lottery tickets", leaf: true } ] } }, rootvisible: false, selmodel: { mode: 'simple' }, listeners: { select: function(tree, record) { function deselectchildren(record) { tree.deselect(record.childnodes); record.eachchild(deselectchildren); } deselectchildren(record); } } }); but gives quite weird user experience since can select child nodes again, once parent 1 has been selected... , trigger behaviour (of deselecting child nodes clicking on ancestor again), have first deselect parent, , reselect it... in nutshell, imo, that's confusing.
so, make thing more predictable user, recommend either deselecting ancestors when node selected changing select listener way:
select: function(tree, record) { // deselect children function deselectchildren(record) { tree.deselect(record.childnodes); record.eachchild(deselectchildren); } deselectchildren(record); // deselect ancestors var parentnode = record.parentnode; while (parentnode) { tree.deselect(parentnode); parentnode = parentnode.parentnode; } } or preventing selection of nodes have ancestor selected:
listeners: { select: function(tree, record) { function deselectchildren(record) { tree.deselect(record.childnodes); record.eachchild(deselectchildren); } deselectchildren(record); } // returning false event handler prevent selection (see doc) ,beforeselect: function(tree, record) { function isancestorselected(record) { var parentnode = record.parentnode; return tree.isselected(record) || parentnode && isancestorselected(parentnode); } return !isancestorselected(record); } } but, if want opinion, second behaviour kinda kinky too. use first one.
now, if want, can pack in ux (user extension), publish in sencha market, download there, , use in code... way, you'll have behaviour built ;)
edit
code requirement 1 + 2 + 3
ext.create('ext.tree.panel', { title: 'simple tree', renderto: ext.getbody(), width: 400, height: 400, store: { root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true }, { text: "algebra", expanded: true, children: [ { text: "buy lottery tickets", leaf: true } ]} ] }, { text: "buy lottery tickets", leaf: true } ] } }, rootvisible: false, selmodel: { mode: 'simple' }, listeners: { select: function(tree, record) { var parentnode = record.parentnode; // deselect children function deselectchildren(record) { tree.deselect(record.childnodes); record.eachchild(deselectchildren); } deselectchildren(record); // see if siblings selected var allsiblingselected = false; if (parentnode) { allsiblingselected = parentnode.childnodes.reduce(function(previous, node) { return previous && tree.isselected(node) }, true); } if (allsiblingselected) { // edit3: adding true second argument keepexisting tree.select(parentnode, true); // trigger req 1 } // deselect ancestors else { while (parentnode) { tree.deselect(parentnode); parentnode = parentnode.parentnode; } } } } }); edit 4
with checkboxes:
ext.create('ext.tree.panel', { title: 'simple tree', renderto: ext.getbody(), width: 400, height: 400, store: { root: { expanded: true, children: [ { checked: false, text: "1 detention", expanded: true, children: [ {checked: false, text: '1.1 foo', leaf: true}, {checked: false, text: '1.2 bar', leaf: true} ] }, { checked: false, text: "2 homework", expanded: true, children: [ { checked: false, text: "2.1 book report", leaf: true }, { checked: false, text: "2.2 algebra", expanded: true, children: [ { checked: false, text: "2.2.1 buy lottery tickets", leaf: true }, { checked: false, text: "2.2.2 buy lottery tickets 2", leaf: true } ]} ] }, { checked: false, text: "3 buy lottery tickets", leaf: true } ] } }, rootvisible: false, disableselection: true, //selmodel: {mode: 'simple'}, listeners: { checkchange: function(record, checked, opts) { if (!checked) return; var parentnode = record.parentnode; // deselect children function deselectchildren(record) { record.eachchild(function(record) { record.set('checked', false); deselectchildren(record); }); } deselectchildren(record); // see if siblings selected var allsiblingselected = false; if (parentnode) { allsiblingselected = parentnode.childnodes.reduce(function(previous, node) { return previous && node.get('checked'); }, true); } if (allsiblingselected) { parentnode.set('checked', true); // apparently won't fire on own this.fireevent('checkchange', parentnode, true, opts); } // deselect ancestors else { while (parentnode) { parentnode.set('checked', false); parentnode = parentnode.parentnode; } } } } });
Comments
Post a Comment