08extjs ajax编写多级联动菜单

menu.js
(function(){
	function createChild(value,name){
		var el = document.createElement("option");
		el.setAttribute("value",value);
		el.appendChild(document.createTextNode(name));
		return el;
	}

	/**最好是使用前台的缓存var data = {};
	*/
	Ext.onReady(function(){
		//1.得到city这个dom对象
		var cityObj = Ext.get("city");
		//2.为这个city对象注册一个change
		cityObj.on("change",function(e,select){//e是事件类，select是select对象
			//3.得到改变后的数值
			var ids = select.options[select.selectedIndex].value;
			/**使用缓存：先去前台的缓存变量中查数据，当没有的时候去后台拿
				if(data["city"]){
					直接操作
				}else{
					做ajax
				}
			*/
			//4.ajax请求把后台数据拿过来
			Ext.Ajax.request({
				url:'extjs/extjs!menu.action',
				params:{ids:ids},
				method:'post',
				timeout:4000,
				success:function(response,opts){
					var obj = eval(response.responseText);
					//5.得到地区的那个对象area DOM
					var oldObj = Ext.get("area").dom;
					//6.清除里面项
					while(oldObj.length>0){
						oldObj.options.remove(oldObj.length-1);
					}
					//7.加入新的项
					Ext.Array.each(obj,function(o){
						Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name));
					});
					/**把从数据库中拿到的数据保存到前台
					*/
				},
				failure:function(){
				
				}
			});
		});			
	});
})();