ExtJS 2使用経験(ツリー、テーブルツリー、RadioGroup)

1.ExtJs 2ツリーのJSONデータフォーマットを変更する
ExtJs 2において、要求される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、ExtJs 2表ツリー
ExtJS 2では表ツリーのデータフォーマットにもこだわりがあり、書き方にも少し注意が必要です.

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
	}


});