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
	}


});