Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL='resources/images/default/s.gif';
	//指定EXT 的占位圖片的位置
	var root=new Ext.tree.AsyncTreeNode({
	//聲明一個根節(jié)點
		id:'0',//id為0
		text:'0',//顯示文字為0
		children:[{//子節(jié)點
			text:'loading',//顯示文字為loading
			iconCls: 'loading',//使用圖標為loading 在index.html style 中定義
			leaf:true//是葉子節(jié)點,不在包含子節(jié)點
		}]
	});
	var treeLoader=new Ext.tree.TreeLoader();//指定一個空的TreeLoader
	var tree = new Ext.tree.TreePanel({//聲明一個TreePanel顯示tree
		id:'tree',//id為tree
		region:'west',//設(shè)定顯示區(qū)域為東邊,停靠在容器左邊
		split:true,//出現(xiàn)拖動條
		collapseMode:'mini',//拖動條顯示類型為mini,可出現(xiàn)拖動條中間的尖頭
		width: 210,//初始寬度
		minSize: 210,//拖動最小寬度
		maxSize: 300,//拖動最大寬度
		collapsible: true,//允許隱藏
		title: "樹",//顯示標題為樹
		loader: treeLoader,//指定數(shù)據(jù)載入的loader對象,現(xiàn)在定義為空
		lines:true,//出現(xiàn)節(jié)點間虛線
		autoScroll:true,//自動出現(xiàn)滾動條
		root:root//根節(jié)點為 root 對象
	});
	root.on('expand',gettree);//當根節(jié)點展開后觸發(fā)gettree事件
	
	function gettree(node)
	{//此方法使用mootools框架的AJAX實現(xiàn)對子節(jié)點的異步讀取,沒使用EXT的是為了表達 EXT的靈活性和可擴展性
		if(node.firstChild.text=='loading'){//如果當前展開節(jié)點的第一個子節(jié)點為loading,則調(diào)用異步方法取得子節(jié)點數(shù)據(jù),否則直接展開
			var url = 'getTree.action';//請求的地址,因為使用的 struts2 所以請求為.action
			var params ='id='+node.id;//請求數(shù)據(jù)
			//創(chuàng)建Ajax對象(mootools提供)，對應(yīng)于發(fā)送請求
			var myAjax = new Ajax(url ,{method:'post',data:params,onComplete:function(){
			//	url:請求位置 method:請求方式 可以使用get或post data:請求數(shù)據(jù) 
			//  onComplete:當異步調(diào)用完成時調(diào)用的方法,即響應(yīng)內(nèi)容完全獲得后調(diào)用該方法
				var myObject = Json.evaluate(this.response.text);
				//將返回的響應(yīng)數(shù)據(jù)轉(zhuǎn)換為JS對象,返回數(shù)據(jù)為JSON格式,Json對象(mootools提供)
				//alert(this.response.text);
				var tl=myObject.tl;//獲取tl數(shù)組,該數(shù)組中數(shù)據(jù)為子節(jié)點數(shù)據(jù),由ACTION處理后獲得
				//alert(tl);
				for(var i=0;i<tl.length;i++){//循環(huán)數(shù)組,添加子節(jié)點
					var cnode=new Ext.tree.AsyncTreeNode({//聲明子節(jié)點對象
						//tl[i].id 此處tl為action返回的數(shù)據(jù),也就是在action中定義的List tl=new ArrayList();
						//tl中元素都為 treeNode對象,所以可是使用treeNode中屬性訪問
						//tl[i].id 則訪問tl數(shù)組中,第i個元素的id屬性值
						//tl[i].name 則訪問tl數(shù)組中,第i個元素的name屬性值
						//tl[i].leaf 則訪問tl數(shù)組中,第i個元素的leaf屬性值
						id:tl[i].id+node.id,//id 為服務(wù)器返回id+父節(jié)點id
						text:tl[i].name+node.id,//顯示內(nèi)容為服務(wù)器返回id+父節(jié)點id
						leaf:tl[i].leaf,//是否為葉子節(jié)點,根據(jù)服務(wù)器返回內(nèi)容決定是否為葉子節(jié)點
						children:[{//添加子節(jié)點,如果服務(wù)器返回tl[i].leaf為ture則孩子節(jié)點將無法顯示
							text:'loading',
							iconCls: 'loading',
							leaf:true
						}]
					});
					cnode.on('expand',gettree);//定義當前節(jié)點展開時調(diào)用gettree方法,再次異步讀取子節(jié)點
					node.appendChild(cnode);//將當前節(jié)點添加為待展開節(jié)點子節(jié)點
				}
				node.firstChild.remove();//刪除當前節(jié)點第一個孩子節(jié)點(loading節(jié)點)
			}});
			myAjax.request();//發(fā)送ajax異步請求
		}
	}
	var Data = [];//定義一個空的data數(shù)組,使得表格最開始顯示數(shù)據(jù)為空
	var store=new Ext.data.Store({//定義數(shù)據(jù)源
			reader: new Ext.data.ArrayReader(//數(shù)據(jù)讀取對象
			{}, [
			   {name: 'c1'},//指定數(shù)據(jù)列,第一列為c1
			   {name: 'c2'},//指定數(shù)據(jù)列,第一列為c2
			   {name: 'c3'} //指定數(shù)據(jù)列,第一列為c3
			]),
			data: Data//使用數(shù)據(jù)為Data,暫時為空
		});
	var sm=new Ext.grid.CheckboxSelectionModel();//表格復(fù)選列
	var selectNode;//當前選擇的葉子節(jié)點
	var cpage=1;//當前數(shù)據(jù)顯示的頁,默認為1
	var ccount=25;//頁顯示數(shù)據(jù)個數(shù),默認為25
	var grid=new Ext.grid.GridPanel({//定義表格
		id:'grid',//id為grid
		border:true,//出現(xiàn)邊框
		title:'表格',//標題內(nèi)容為 表格
		region:'center',//設(shè)定顯示區(qū)域為中心,停靠在容器中心
		layout: 'fit',//表格內(nèi)列內(nèi)容填充滿,按列頭比例填充
		ds:store ,//數(shù)據(jù)源為store 上邊定義
		cm: new Ext.grid.ColumnModel([//定義表格顯示列頭
			new Ext.grid.RowNumberer(),//第一列為編號列
			sm,//第二列為復(fù)選列
			{header: "列1", width: 40, sortable: true, dataIndex: 'c1'},
			//顯示文字為列1,寬度40,允許排序,使用數(shù)據(jù)源中c1列數(shù)據(jù)
			{header: "列2", width: 40, sortable: true, dataIndex: 'c2'},
			{header: "列3", width: 40, sortable: true, dataIndex: 'c3'}
		]), 
		sm:sm,//復(fù)選方式按sm定義方式
		bbar:[//底端 工具條
			{iconCls: 'first', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,1,ccount);}},
			//使用圖標為first(index.html-style中定義)
			//handler :當點擊此按鈕時觸發(fā)事件,調(diào)用getData方法
			{iconCls: 'pre', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,cpage-1,ccount);}},
			'第',new Ext.form.TextField({value:'1',id:'txtPage',width:'20',listeners:{change:function(txt,n,o){if(n>0 && n<9999)getData(selectNode,n,ccount);}} }),'頁',
			{iconCls: 'next', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,cpage+1,ccount);}},
			{iconCls: 'last', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,99999,ccount);}},'-',
			{iconCls: 'loading', handler:function(){ccount=Ext.getCmp('txtCount').value;getData(selectNode,cpage,ccount);}},'-',
			'每頁顯示',new Ext.form.TextField({value:'25',id:'txtCount',width:'15',listeners:{change:function(txt,n,o){getData(selectNode,cpage,n);}} }),'條數(shù)據(jù)',
			'->','<div id="msg">共 條數(shù)據(jù)，當前顯示的是 條</div>'
		],
		viewConfig: {
			sortAscText:'升序',
			sortDescText:'降序',
			columnsText:'顯示列',
            forceFit:true
        }
	})
	var viewport = new Ext.Viewport({
		layout:'border',
		items:[
			tree,grid
		 ]
	});//end viewport  
	
	tree.on('click',function(node){//當樹節(jié)點被點擊時觸發(fā)
		if(node.isLeaf()){//如果不是葉子節(jié)點則不處理
			//請求的地址
			selectNode=node;//設(shè)置選擇節(jié)點為當前節(jié)點
			var url = 'getData.action';//請求位置
			var params ='id='+node.id;//請求數(shù)據(jù)
			params+='&page=1&count=25';//請求數(shù)據(jù)
			
			cpage=1;//設(shè)定顯示頁為第一頁
			count=25;//設(shè)定顯示個數(shù)為25個
			Ext.getCmp('txtPage').setValue(cpage);//設(shè)置工具條中頁文本內(nèi)容為1
			Ext.getCmp('txtCount').setValue(count);//設(shè)置工具條中個數(shù)文本內(nèi)容為25
			$('msg').innerHTML='共'+node.id+'條數(shù)據(jù)，當前顯示的是0-25條';//設(shè)置工具條中顯示文字
			//創(chuàng)建Ajax.Request對象，對應(yīng)于發(fā)送請求
			var myAjax = new Ajax(url ,{method:'post',data:params,onComplete:function(){//異步響應(yīng)完成時的回調(diào)方法
					var myObject = Json.evaluate(this.response.text);
					var dl=myObject.dl;//返回的數(shù)據(jù)數(shù)組,此處返回的數(shù)據(jù)都為object類型,另我很納悶
					var data=[];
					for(var i=0;i<dl.length;i++){//將返回dl數(shù)組,轉(zhuǎn)換為2維數(shù)組,grid顯示用
						data[i]=new Array(dl[i].c1,dl[i].c2,dl[i].c3)
						//dl[i].c1 此處dl為action返回的數(shù)據(jù),也就是在action中定義的List dl=new ArrayList();
						//dl中元素都為 data對象,所以可是使用 data中屬性訪問
						//dl[i].c1 則訪問dl數(shù)組中,第i個元素的c1屬性值
					}
					store.loadData(data);//數(shù)據(jù)源從新載入數(shù)據(jù),顯示到grid中
					
				}
				
			});
			myAjax.request();//發(fā)送請求
		
		}
	})
	function getData(node,page,count){//讀取數(shù)據(jù)的方法,翻頁時調(diào)用
		//node當前選擇的節(jié)點,page顯示頁,count顯示個數(shù)
		if (!node) {alert('請先選擇一個葉節(jié)點!');return;}//如果還沒有葉子節(jié)點被選中則提示
		if (count<1 && count>9999) count=25;//如果顯示個數(shù)不在1-9999中間,則設(shè)置為25
		cpage=page;//當前頁改為顯示頁值
		if (cpage<1) cpage=1;//如果小于1則為1
		if (cpage>node.id/count) cpage=Math.floor(node.id/count+1);//如果大于最大頁則為最大頁

		Ext.getCmp('txtPage').setValue(cpage);//設(shè)置工具條中頁文本內(nèi)容為當前頁
		Ext.getCmp('txtCount').setValue(count);//設(shè)置工具條中個數(shù)文本內(nèi)容為當前顯示個數(shù)
		var url = 'getData.action';//請求位置
		var params ='id='+node.id;//請求數(shù)據(jù)
		params +='&page='+cpage+'&count='+count;//請求數(shù)據(jù)
		var start=(cpage-1)*count+1;
		var end=cpage*count;
		if (end>node.id)end=node.id;
		$('msg').innerHTML='共'+node.id+'條數(shù)據(jù)，當前顯示的是'+start+'-'+end+'條';
		//alert(params);
		//創(chuàng)建Ajax.Request對象，對應(yīng)于發(fā)送請求
		var myAjax = new Ajax(url ,{method:'post',data:params,onComplete:function(){
				var myObject = Json.evaluate(this.response.text);
				var dl=myObject.dl;
				var data=[];
				for(var i=0;i<dl.length;i++){
					data[i]=new Array(dl[i].c1,dl[i].c2,dl[i].c3)
				}
				store.loadData(data);
			}
		});
		myAjax.request();
	}
});