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