1. #1
    Sencha User
    Join Date
    Jul 2007
    Posts
    33
    Vote Rating
    1
    yd290276 is on a distinguished road

      0  

    Default treegrid checkbox extension

    treegrid checkbox extension


    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'
    Code:
    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 :
    Code:
    /**
     * 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.

  2. #2
    Sencha User victorwoo's Avatar
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    victorwoo is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Posts
    33
    Vote Rating
    1
    yd290276 is on a distinguished road

      0  

    Default


    Hi,
    you're right for the 2nd line !

    To apply booleanTreenodeUI as uiProvider, i override method createNode of class Ext.ux.tree.TreeGridLoader :
    Code:
    /**
    	 * @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 :
    Code:
    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 :
    Code:
    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 !

  4. #4
    Sencha User victorwoo's Avatar
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    victorwoo is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    27
    Vote Rating
    1
    feiq is on a distinguished road

      0  

    Default


    Hi, I think there is another way to apply uiProvider to a node. That is:
    Code:
    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.

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    1
    Vote Rating
    0
    kakuz is on a distinguished road

      0  

    Default


    any sample for this extension ?

  7. #7
    Sencha User
    Join Date
    Dec 2010
    Posts
    11
    Vote Rating
    0
    iassac_beauvoir is on a distinguished road

      0  

    Default


    Is there an example of this extension in use?

  8. #8
    Sencha User
    Join Date
    Jul 2007
    Posts
    33
    Vote Rating
    1
    yd290276 is on a distinguished road

      0  

    Default


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

Similar Threads

  1. TreeGrid (Ext.ux.maximgb.treegrid) extension.
    By MaximGB in forum Ext 2.x: User Extensions and Plugins
    Replies: 429
    Last Post: 19 Sep 2013, 2:05 AM
  2. How to Add checkbox into TreeGrid?
    By tomasi in forum Ext GWT: Discussion
    Replies: 9
    Last Post: 7 Jun 2010, 6:25 AM
  3. Rendering checkbox in treegrid
    By jazzer in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 5 Apr 2010, 7:13 AM
  4. disable checkbox in TreeGrid Toolbar
    By shiva-Kumar in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 29 Jan 2010, 12:59 AM

Thread Participants: 4

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi