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
}

});