ExtJS專題-表格面板

1、ExtJS中的表格功能非常強(qiáng)大，包括了排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等實(shí)用功能。但很多人在應(yīng)用的時(shí)候都會(huì)因?yàn)橛龅揭恍┘?xì)節(jié)問(wèn)題而苦惱，為什么提示信息出不來(lái)呀？為什么s.gif圖片在斷網(wǎng)的情況下不能顯示??？為什么從后臺(tái)得不到JSON數(shù)據(jù)??？為什么日期的格式無(wú)法轉(zhuǎn)換啊？為什么翻頁(yè)就是報(bào)錯(cuò)??？為什么拖曳功能就是實(shí)現(xiàn)不了??？等等等等。最后歸結(jié)到一句話，為什么ExtJS這么亂七八糟啊？！呵呵，為了幫助大家解決ExtJS的這些小麻煩，許老師做了下面的一個(gè)小DEMO來(lái)演示GridPanel的用法，后面有時(shí)間會(huì)陸陸續(xù)續(xù)演示其它組件的主要用法。我的愿望就是大家看了這個(gè)小專題之后，能

2、夠在最短的時(shí)間內(nèi)掌握ExtJS的各種組件的應(yīng)用。至于基本功的修煉，還得煩勞大伙自己用心。好啦，不多說(shuō)，下面我們來(lái)看ExtJS中最實(shí)用的組件：表格面板。表格由類Ext.grid.GridPanel定義，繼承自Panel，其xtype為grid。ExtJS中，表格Grid必須包含列定義信息，并指定表格的數(shù)據(jù)存儲(chǔ)器Store。表格的列信息由類Ext.grid.ColumnModel定義、而表格的數(shù)據(jù)存儲(chǔ)器由Ext.data.Store定義。這些都是基礎(chǔ)知識(shí)，大家應(yīng)該清楚了。我們主要要牢記，ExtJS里最主要的是JSON數(shù)據(jù)格式，ColumnModel是要顯示表格的列的定義信息，而Store則是數(shù)據(jù)記

3、錄的來(lái)源。那么，數(shù)據(jù)呢，又可以分為本地?cái)?shù)據(jù)和遠(yuǎn)程數(shù)據(jù)，它們分別使用不一樣的代理；數(shù)據(jù)格式有Array，JSON，XML，針對(duì)每種數(shù)據(jù)格式ExtJS都有相應(yīng)的解析方式，就是Store的讀取器。我們最核心的當(dāng)然是先掌握遠(yuǎn)程JSON數(shù)據(jù)的Store的用法。我們來(lái)看一個(gè)例子，這個(gè)例子包含了一般表格的常用功能，譬如按要求改變列的數(shù)據(jù)，右鍵菜單，面板折疊，強(qiáng)大的拖曳（drag/drop）以及分頁(yè)處理。這里涉及到三個(gè)文件,包括前臺(tái)的grid.html,grid.js和后臺(tái)的resJson.jsp，我們來(lái)分別瞧瞧：（1） grid.html,這里要說(shuō)明的是DOCTYPE不能設(shè)置錯(cuò)誤，否則IE6.0會(huì)顯示不出表

4、頭的列名。還有就是要漢化提示信息，注意導(dǎo)入ext-lang-zh_CN.jsInsert title here（2） grid.js,我們的主要功能就在這個(gè)JS里面,里面我都做了詳細(xì)的注釋，大家可以對(duì)照著學(xué)習(xí)。Ext.onReady(function() Ext.QuickTips.init();/ 浮動(dòng)信息提示Ext.BLANK_IMAGE_URL = resources/images/default/s.gif;/ 替換圖片文件地址為本地/ 定義數(shù)據(jù)源為遠(yuǎn)程代理和JSON數(shù)據(jù)格式var ds = new Ext.data.Store(/ proxy: new Ext.data.Memory

5、Proxy(jsondata),proxy : new Ext.data.HttpProxy(url : resJson.jsp),reader : new Ext.data.JsonReader(totalProperty : totalProperty,root : root, name : id, name : name, name : sex, name : birthday,type : date,dateFormat : Y-n-j, name : email);/ 加載首頁(yè)數(shù)據(jù)，每頁(yè)顯示10條記錄ds.load(params : start : 0,limit : 6);/ 定義

6、復(fù)選框var sm = new Ext.grid.CheckboxSelectionModel();/ 定義列模型var cm = new Ext.grid.ColumnModel(/ new Ext.grid.RowNumberer(),/ 添加自動(dòng)行號(hào)sm,/ 添加復(fù)選框header : 學(xué)號(hào),width : 40,dataIndex : id, header : 姓名,dataIndex : name, header : 性別,width : 40,dataIndex : sex,renderer : changeSex/ 紅男綠女 , header : 出生日期,dataIndex :

7、 birthday,renderer : Ext.util.Format.dateRenderer(Y年m月d日)/ 格式化日期 , header : 電子郵件,width : 120,dataIndex : email,renderer : sendEmail/ 單擊啟動(dòng)郵件客戶端發(fā)送郵件);/ 設(shè)置所有列字段默認(rèn)排序cm.defaultSortable = true;/ 按要求渲染性別的函數(shù)function changeSex(value) if (value = 男) return 男; else return 女;/ 按要求渲染email的函數(shù)function sendEmail(va

8、lue) return + value + ;/ 定義一個(gè)表格面板var grid = new Ext.grid.GridPanel(id : student-grid,/ 設(shè)置標(biāo)識(shí)ID，方便以后引用！title : 學(xué)員信息管理,/ 標(biāo)題renderTo : myGrid,/ 顯示表格的地方sm : sm,/ 復(fù)選框cm : cm,/ 列模型ds : ds,/ 數(shù)據(jù)源stripeRows : true,/ 加上行條紋loadMask : true,/ 加載數(shù)據(jù)時(shí)遮蔽表格border : true,/ 加上邊框frame : true,/ 顯示天藍(lán)色圓角框autoHeight : true,/

9、 自動(dòng)設(shè)置高度，這個(gè)配置很重要width : 700,x : 1,/ 設(shè)置初始位置橫坐標(biāo)y : 1,/ 設(shè)置初始位置縱坐標(biāo)/ enableDragDrop : true,/容許行的拖曳collapsible : true, / 面板可以折疊/ titleCollapse : true,/ 單擊表頭任何地方都可以折疊floating : true,/ 設(shè)置浮動(dòng)，能否拖動(dòng)成功就靠它了,注意設(shè)置浮動(dòng)后它就置頂了/ 實(shí)現(xiàn)拖曳效果，參考官方文檔draggable : insertProxy : false,onDrag : function(e) var pel = xy.getEl()

10、;this.x = pel.getLeft(true);this.y = pel.getTop(true);var s = this.panel.getEl().shadow;/ 拖曳中消除原位置的陰影if (s) s.realign(this.x, this.y, pel.getWidth(),pel.getHeight();,endDrag : function(e) / 拖曳結(jié)束后保存位置效果this.panel.setPosition(this.x, this.y);,/ UI視圖配置viewConfig : forceFit : true/ 強(qiáng)制適應(yīng)分布寬度,/ 表格頂部動(dòng)作或按鈕工

11、具欄tbar : new Ext.Toolbar(items : id : btnAdd,text : 添加,handler : function() Ext.MessageBox.alert(添加,這里處理添加數(shù)據(jù)的邏輯！);, new Ext.Toolbar.SplitButton(), id : btnEdit,text : 編輯,handler : function() Ext.MessageBox.alert(編輯,這里處理編輯數(shù)據(jù)的邏輯！);, -, id : btnDel,text : 刪除,handler : function() Ext.MessageBox.alert(刪除

12、,這里處理刪除數(shù)據(jù)的邏輯！);),/ 表格底部分頁(yè)工具欄bbar : new Ext.PagingToolbar(pageSize : 6,store : ds,displayInfo : true,displayMsg : 顯示第 0 條到 1 條記錄，一共 2 條,emptyMsg : 沒(méi)有記錄);/ 給grid動(dòng)態(tài)增加右鍵事件,rowcontextmenu是事件名，rightClickFn是事件觸發(fā)的處理函數(shù)grid.on(rowcontextmenu, rightClickFn);var rightClickMenu = new Ext.menu.Menu(id : rightClic

13、kCont,items : id : rMenu1,handler : rMenu1Fn,/ 點(diǎn)擊后觸發(fā)的事件text : 右鍵菜單1, / id: rMenu2,/ handler: rMenu2Fn,text : 右鍵菜單2);function rightClickFn(grid, rowindex, e) e.preventDefault();/ 阻止瀏覽器默認(rèn)右鍵效果rightClickMenu.showAt(e.getXY();/ 在右鍵點(diǎn)擊的地方顯示菜單rightClickMenufunction rMenu1Fn() Ext.MessageBox.alert(right, 您可以

14、自定義右鍵處理！);/ 只是一個(gè)示例);（3） resJson.jsp，前面只是前臺(tái)部分，頁(yè)面的動(dòng)態(tài)數(shù)據(jù)就要用HTTP協(xié)議從后臺(tái)組件上獲取，這樣，只要你實(shí)現(xiàn)一種能夠響應(yīng)HTTP請(qǐng)求的后臺(tái)WEB組件即可，你可以寫一個(gè)Servlet，寫一個(gè)Struts的Action，或者是一個(gè)JSP都行。我們這里方便起見，做的是一個(gè)JSP，在這個(gè)JSP里使用了json-lib的包.這是一個(gè)用Java操作JSON格式數(shù)據(jù)的工具包，大家可以從網(wǎng)上下載。一般跑過(guò)我第一個(gè)Extjs應(yīng)用的人這些包應(yīng)該都準(zhǔn)備好了。我們這里模擬后臺(tái)實(shí)現(xiàn)，并不需要訪問(wèn)數(shù)據(jù)庫(kù)，所以很方便。大家要注意的是最后兩行代碼必須加上，不然服務(wù)器傳回客戶端的

15、就會(huì)帶上很多與JSON格式無(wú)關(guān)的HTML標(biāo)簽信息，這樣Extjs就無(wú)法識(shí)別了。Insert title here%!private static List list = new ArrayList();static for (int i = 0; i %request.setCharacterEncoding(utf-8);response.setCharacterEncoding(utf-8);System.out.println(request.getParameter(name) + attribute);JSONObject json = new JSONObject();String

16、 strStart = request.getParameter(start);String strLimit = request.getParameter(limit);int start = Integer.parseInt(strStart);int limit = Integer.parseInt(strLimit);List arrList = list.subList(start, start + limit);json.put(totalProperty, 100);JSONArray arr = JSONArray.fromObject(arrList);json.put(ro

17、ot, arr);System.out.println(json);response.getWriter().print(json);out.clear();out = pageContext.pushBody();%還有一個(gè)非常簡(jiǎn)單的JavaBean這里也給大家貼出來(lái)：package org.leno.javabean;public class Student private int id;private String name;private char sex;private String birthday;private String email;public int getId() return id;public void setId(int id) this.id = id;public String getName() return name;public void setName(String name) = name;public char getSex() return sex;public void setSex(char sex) this.sex = sex;public String getBirthday() return birthday;public void setBirthday