PDA

View Full Version : How to handle checkbox selection in TreePanel



Alexei Ptitchkin
9 Aug 2012, 5:54 AM
Hi everybody.

To simulate radio-button behavior I need to handle checkbox selection in TreePanel.
In my use-case I may have several groups of mutual exclusive checkboxes.
JSON to build tree dynamically generated on server side.
Any idea how to do this?

Thank you.

castitas
9 Aug 2012, 7:52 AM
Have you tried a handler?



...
handler: function(cbox, checked) {
var i, boxes = Ext.ComponentQuery.query('checkbox[name="group1"]');
if(checked) {
for(i = 0; i< boxes.length; i++) {
if(boxes[i].id != cbox.id && boxes[i].checked)
boxes[i].setValue(false)
}
}
},




Warning: If you have multiple instances of the same object, this code will connect them. You could try
var up = cbox.up(),
boxes = Ext.ComponentQuery.query('#'+up.id + ' combobox[name="group1"]')
to limit it to the objects siblings.

bimargulies
9 Aug 2012, 7:59 AM
the checkboxes in a tree panel from NodeInterface.checked are not checkbox components, so that code won't work.

Alexei Ptitchkin
9 Aug 2012, 8:13 AM
to castitas (http://www.sencha.com/forum/member.php?321483-castitas)

I kinda newbee when I have to deal with components which I haven't used yet.
Could you please point me where I can insert that handler?


Here is how I define TreePanel:


var localStore = Ext.create('Ext.data.TreeStore', {
proxy: {type:'ajax',
url:'json/companyAccessDetailsAction?m=read'
}
,constantUrl:'json/companyAccessDetailsAction?m=read'
});

Ext.define('Fast.view.company.CompanyAccessOptionsTree' ,{
extend: 'Ext.tree.Panel',
alias : 'widget.CompanyAccessOptionsTree',
id:'CompanyAccessOptionsTree',
rootVisible:false,
useArrows:true,
store : localStore,
animate:true,
lines:true,
listeners:{
afterrender: function( tree, eOpts ){
var myStore = tree.getStore();
//debugger;
}
},

initComponent: function() {
//debugger;
console.log('CompanyAccessOptionsTree:initComponent');
this.callParent(arguments);
}

});

castitas
9 Aug 2012, 8:23 AM
I don't know, then, sorry.