ExtJS 2使用经验（树、表格树、RadioGroup）

1、 更改ExtJs2树的JSON数据格式
在ExtJs2中，要求的JSON格式为：

[ {text:'01',children:[ {text:'01-01',leaf:true}, {text:'01-02',children:[ {text:'01-02-01',leaf:true}, {text:'01-02-02',leaf:true} ]}, {text:'01-03',leaf:true} ]}, {text:'02',leaf:true} ]

然而，有的时候我们会得到如下格式的JSON：

{data:[ {text:'01',children:[ {text:'01-01',leaf:true}, {text:'01-02',children:[ {text:'01-02-01',leaf:true}, {text:'01-02-02',leaf:true} ]}, {text:'01-03',leaf:true} ]}, {text:'02',leaf:true} ]}

其中data对应的值就是树形需要的节点数据，我们可以修改下TreeLoader函数，如：

var loader = new Ext.tree.TreeLoader({dataUrl:''});loader.processResponse = function(response, node, callback, scope){var json = response.responseText;try {var json = eval("("+json+")");node.beginUpdate();//从json中获得json数组var o = json["data"];for(var i = 0, len = o.length; i < len; i++){            //可以在此处进行相关数据转换var n = this.createNode(o[i]);if(n){node.appendChild(n);}}node.endUpdate();if(typeof call == "function"){callback(this,node);}}catch(e){this.handleFailure(response);}};

如果，获得的JSON中没有text等key的话，那么，可以在for循环中进行相关数据转换。
2、 ExtJs2表格树
在ExtJS2中表格树的数据格式也是有讲究的，写法也有点地方需要注意。

var grid = new Ext.tree.ColumnTree({id : 'grid',border : false,rootVisible : false,autoScroll : true,useArrows : true,checkModel : 'cascade',onlyLeafCheckable : false,root : root,columns : [{            header : "Header",    dataIndex : 'header',    sortable : true    },....],loader:new Ext.tree.TreeLoader({        dataUrl:'',uiProviders:{     'col':Ext.tree.ColimnNodeUI}})});

如果如上面树中一样需要转换数据的话，那么需要在创建节点的时候在节点中添加” uiProvider”、”cls”、” iconCls”属性值。
3、 同步加载树数据问题
有一次在项目中用到了同步加载树的数据。数据得到了，但是却是怎么都显示不出树结构，找了好半天，终于发现了是由于树根节点问题。
原先根节点定义：

var root = new Ext.tree.AsyncTreeNode({text:'我是根'}); 

改后的根节点定义：

var root = new Ext.tree.TreeNode({text:'我是根'}); 

就可以了。
4、 RadioGroup获得值问题

同事在表单中用到了RadioGroup，但是却是获得不到值。上网查了些资料，重载如下代码即可获得值：

Ext.override(Ext.form.RadioGroup, {getValue : function() {var v;if (this.rendered) {this.items.each(function(item) {if (!item.getValue()) {return true;}v = item.getRawValue();return false;});} else {for (var k in this.items) {if (this.items[k].checked) {v = this.items[k].inputValue;break;}}}return v;},setValue : function(v) {if (this.rendered) {this.items.each(function(item) {item.setValue(item.getRawValue() == v);});} else {for (var k in this.items) {this.items[k].checked = this.items[k].inputValue == v;}}}});

5、树中多选框在图标后面问题ExtJs2中，如果树节点有checkbox，checkbox会在节点的图标后面。这个相对应ExtJs4难看了。如何更改呢？首先想到的就是更改TreeNodeUI。好吧！查看代码后，发现其实只要把图标位置和checkbox位置对调就行了。然后，对调两个位置，测试发现显示出来的结果是自己想要的。但是呢，怎么都不能打上勾…..再认真看代码，发现了：

var i = this.elNode.childNodes;this.indentNode = i[0];this.ecNode = i[1];this.iconNode = i[3];var h = 3;if (g) {this.checkbox = i[2];        this.checkbox.defaultChecked = this.checkbox.checked;h++}

好吧，知道了吧！它是根据顺序来的…..
所以，完整的代码如下：

Ext.override(Ext.tree.TreeNodeUI, {renderElements : function(e, l, k, m) {this.indentMarkup = e.parentNode? e.parentNode.ui.getChildIndent(): "";var g = typeof l.checked == "boolean";var c = l.href ? l.href : Ext.isGecko ? "" : "#";var d = ['<li class="x-tree-node"><div ext:tree-node-id="',e.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ',l.cls,'" unselectable="on">','<span class="x-tree-node-indent">',this.indentMarkup,"</span>",'<img src="',this.emptyIcon,'" class="x-tree-ec-icon x-tree-elbow" />',g? ('<input class="x-tree-node-cb" type="checkbox" ' + (l.checked? 'checked="checked" />': "/>")): "", '<img src="', l.icon || this.emptyIcon,'" class="x-tree-node-icon',(l.icon ? " x-tree-node-inline-icon" : ""),(l.iconCls ? " " + l.iconCls : ""), '" unselectable="on" />','<a hidefocus="on" class="x-tree-node-anchor" href="', c,'" tabIndex="1" ',l.hrefTarget ? ' target="' + l.hrefTarget + '"' : "",'><span unselectable="on">', e.text, "</span></a></div>",'<ul class="x-tree-node-ct" style="display:none;"></ul>',"</li>"].join("");var b;if (m !== true && e.nextSibling && (b = e.nextSibling.ui.getEl())) {this.wrap = Ext.DomHelper.insertHtml("beforeBegin", b, d)} else {this.wrap = Ext.DomHelper.insertHtml("beforeEnd", k, d)}this.elNode = this.wrap.childNodes[0];this.ctNode = this.wrap.childNodes[1];var i = this.elNode.childNodes;this.indentNode = i[0];this.ecNode = i[1];this.iconNode = i[3];var h = 3;if (g) {this.checkbox = i[2];this.checkbox.defaultChecked = this.checkbox.checked;h++}this.anchor = i[h];this.textNode = i[h].firstChild}});