treegrid checkbox extension

[yd290276]

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]

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]

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]

Thank you very much for so detailed response! It exactly helps for my situation.

[feiq]

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]

any sample for this extension ?

[iassac_beauvoir]

Is there an example of this extension in use?

[yd290276]

Hi,
sorry i got no example of this plugin since i don't code with extJS for over one year.