PDA

View Full Version : treegrid checkbox extension



yd290276
11 Dec 2010, 3:20 AM
Hi all,
i think tree grid is wonderfull component, but i need to add check box support in column. So the treegrid component doesn't provide such functionnality.
Therefore, i add a quick and dirty patch to provide the tree grid habilty to display checkboxes in columns. See aboce how i accomplish this.

1) set a "tpl" property for the column you want to display checkbox and add a "dataIndex" property, for example in my column 'is_auth'

tpl : function(a) {
var html = '';
var isBool = Ext.isBoolean(this.is_auth);
if (isBool && this.type == 'privilege') {
html = ['<input dataIndex="is_auth" class="x-tree-node-cb" type="checkbox"',
(this.is_auth == true) ? 'checked="checked"' : '', '/>'];
} else {
html = [];
}
html = html.join('');
return html;
}
2) Use my uiProvider for node :

/**
* Overrides event onCheckChange to handle checkbox status changing in column
* tree grid
*/
Ext.ns('Ext.ux.tree');
ux.tree.booleanTreenodeUI = Ext.extend(Ext.ux.tree.TreeGridNodeUI, {
/**
* get check box status from html input checkbox element and get
* property "dataIndex" from html element to update column value
*
* @param {}
* e
*/
onCheckChange : function(e) {
var dataIndex = e.target.getAttribute('dataIndex');
if (dataIndex) {
var checked = e.target.checked;
this.node.attributes[dataIndex] = checked;
this.fireEvent('checkchange', this.node, checked);
} else {
var err = new Ext.Error('[dataIndex] property not found');
throw err;
}
},
/**
* override toggleCheck : do nothing because we can't know wich
* column is to be updated
*
* @param {}
* value
*/
toggleCheck : function(value) {
return;
}
});

so this way, it is possible to add a checkbox in any column you want and it handles event "onCheckChange". Notice that method "toggleCheck" is unactive since it is impossible to toggle check box as node can contains many checkboxes.

Hope it can help and wait for comments !

Thank you.

victorwoo
13 Jan 2011, 12:21 AM
I think the 2nd line should be:
Ext.ux.tree.booleanTreenodeUI = ...

And, How can I apply booleanTreenodeUI as uiProvider for node?
I've created a TreeGrid, set dataUrl and columns, where can I set uiProvider?

Any help would appreciated.

yd290276
13 Jan 2011, 10:42 PM
Hi,
you're right for the 2nd line !

To apply booleanTreenodeUI as uiProvider, i override method createNode of class Ext.ux.tree.TreeGridLoader :

/**
* @private
* @param {Object} item
* @param {String} type
*
* @return {}
*/
createNode : function(type, item) {
var icon, type_desc, is_auth = false, leaf = undefined, checked = undefined, disabled = false;

switch (type) {
case 'group' :
type_desc = 'Groupe';
icon = 'icon-16 silk-group';
leaf = false;
break;
case 'resource' :
type_desc = 'Ressource';
icon = 'icon-16 silk-brick';
leaf = false;
break;
case 'privilege' :
type_desc = 'Privilege';
icon = 'icon-16 silk-accept';
leaf = true;
is_auth = item.is_auth;
disabled = item.disableAcl;
break;
default :
break;
}
var attr = {
/* data */
object : item.id,
desc : item.description,
type_desc : type_desc,
is_auth : is_auth,
disableAcl : disabled,

typeid : item.id,
type : type,
/* node constructor properties */
iconCls : icon,
leaf : leaf,
uiProvider : (type == 'privilege') ? 'checkboxColumn' : 'defaultColumn'
};
/* parse attributes */
this.processAttributes(attr);

/* call parent class method */
return admin.access.treeLoader.superclass.createNode.call(this, attr);
},

another way, instead of creating a new loader class is to override "createNode" directly in config option of the loader property of the tree grid as it is explain in the ExtJS doc :

new Ext.tree.TreePanel({
...
loader: new Ext.tree.TreeLoader({
url: 'dataUrl',
createNode: function(attr) {
// Allow consolidation consignments to have
// consignments dropped into them.
if (attr.isConsolidation) {
attr.iconCls = 'x-consol',
attr.allowDrop = true;
}
return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
}
}),
...
});

You also should see the doc of Ext.ux.tree.TreeGridLoader, there is a "uiProviders" options to define uiProviders class. For example, i set this code for the loader confog object of my tree grid panel :

loader : new admin.access.treeLoader({
dataUrl : 'http://localhost/www/applications/zendapps/test2/public/admin/access/get.resources/format/json',
uiProviders : {
checkboxColumn : Ext.ux.tree.booleanTreenodeUI,
defaultColumn : Ext.ux.tree.TreeGridNodeUI
},

Hope this help !

victorwoo
14 Jan 2011, 12:13 AM
Thank you very much for so detailed response! It exactly helps for my situation.

feiq
14 Jan 2011, 12:39 AM
Hi, I think there is another way to apply uiProvider to a node. That is:

loader : new Ext.tree.TreeLoader({
url : '/Authority/GetAuthorizationData',
baseAttrs : {
uiProvider : Ext.ux.tree.booleanTreenodeUI
}
})
But when we use Ext.us.tree.GridTreeLoader, the uiProvider can't be applied correctly, for the reson you can referece the 'createNode' method in TreeGridLoader.

kakuz
30 Jun 2011, 11:25 PM
any sample for this extension ?

iassac_beauvoir
13 Jan 2012, 9:02 AM
Is there an example of this extension in use?

yd290276
13 Jan 2012, 12:22 PM
Hi,
sorry i got no example of this plugin since i don't code with extJS for over one year.