ExtJS Tips: How to check/unceck all the nodes of a tree(Ext.tree.TreePanel)

This post will help you to achieve following:

  1. Checking/Unchecking all the nodes of a tree.
  2. Checking/Unchecking all the childnodes of a node.
  3. Checking/Unchecking all the siblings of a node.(see comments..)

If you want to check/uncheck all the node of a tree or all the child node of a parent node then following is the way to acheive it:

//function to check/uncheck all the child node.
function toggleCheck(node,isCheck)
{
 if(node)
 {
 var args=[isCheck];
 node.cascade(function(){
 c=args[0];
 this.ui.toggleCheck(c);
 this.attributes.checked=c;
 },null,args);
 }
}
//this will also affect the passed parentNode(node).

Now calling this function for checking/unchecking all the node of a tree:

<br />
var tree=//ext js tree.<br />
toggleCheck(tree.root,true);//for checking all the nodes<br />
//or<br />
toggleCheck(tree.root,false);//for unchecking all the nodes<br />

Now calling above function for checking/unchecking all the children of a node:

<br />
var parentNode=//a node from tree.<br />
toggleCheck(parentNode,true);//for checking all the child nodes<br />
//or<br />
toggleCheck(parentNode,false);//for unchecking all the child nodes<br />

If you find any error or face any difficulty please let me know by comments.

Advertisements
Published in: on January 18, 2010 at 11:22 am  Comments (18)  
Tags: , ,

ExtJS Error: invalid label error while using ScriptTagProxy for JSON data in Paging Grid Example

You can also read this post if you are getting above error while using ScriptTagProxy.

With little bit modification i was trying to use Paging Grid Example from ExtJS. And that where i was getting following error:

invalid label
    {"success":true,"totalCount":

Actually it was not filling my grid, while examining with firebug i got above error. After banging my head over internet i found the reason ;).
Actually it is using ScriptTagProxy to get json data from server. I was sending pure json from server which is not the correct way. ScriptTagProxy sends a url parameter called “callback” which is function name. You need to take this param and form a parameter call. For example callback=fun1 is comming from server, then what you need to do is enclose your json with fun1(yourJSON) call.
like:
fun1({—-your json—-});

Following is an example of ASP.Net code for it:

 String json_string= //"some json here";
 String callback_function_name= Request.Params.Get("callback");
 String response_string = "";
 if (!String.IsNullOrEmpty(callback_function_name))
 {
 response_string = callback_function_name + "(" + json_string + ")";
 }
 else
 {
 response_string = json_string;
 }
 Response.Write(response_string);

you can see the difference of data comming from server for Paging Grid Example. Open following two url:

http://extjs.com/forum/topics-browse-remote.php
http://www.extjs.com/forum/topics-browse-remote.php?callback=fun_1

After examining the data on your browser you will see that, first url is giving pure json, while second one is giving json enclosed in fun_1() function call. ScriptTagProxy is expecting the second data not the pure json one.

If you have any suggestions please feel free to comment.

Published in: on December 2, 2009 at 7:47 pm  Comments (6)  
Tags: , , ,

ExtJS Tips & Tricks: Making EditorGridPanel (Ext.grid.EditorGridPanel) readonly at runtime in Extjs

I was wondering how i could make EditorGridPanel readonly at runtime. Finally I managed to find out a way to do this. What you have to do is register an handler for grid’s beforeedit event which will return false !!!

say, you need a function which will do this:


//handler function for 'beforeedit' event
function handler_to_makeReadOnly(){return false;}
//function to make EditorGridPanel read only
function MakeEditorGridPanelReadOnly(editorGridPanel)
{
 editorGridPanel.on('beforeedit',handler_to_makeReadOnly,this);
}
//function to make EditorGridPanel normal(editable)
function MakeEditorGridPanelUnReadOnly(editorGridPanel)
{
 editorGridPanel.un('beforeedit',handler_to_makeReadOnly,this);
}

Note: MakeEditorGridPanelUnReadOnly will just remove the effect of MakeEditorGridPanelReadOnly function by unregistering the handler handler_to_makeReadOnly. If grid column models are read only it wont change them, means those columns will still be read only.

If you find any problem just write a comment to reach me.

Modification History:

1. 05 Nov 2009: Made the code block proper.