ExtJS中表格控件的使用,屬性設(shè)置和數(shù)據(jù)的獲取

1、ExtJS 中表格控件的使用，屬性設(shè)置和數(shù)據(jù)的獲取ExtJS中表格的特性簡介表格由類 Ext.grid.GridPanel 定義，均8 承自 Ext.Panel,xtype 為 grid表格的列信息由 Ext.grid.ColumnModel 定義表格的數(shù)據(jù)存儲器由 Ext.data.Store 定義， 根據(jù)解析數(shù)據(jù)的不同， 數(shù)據(jù)存儲器可具體分為如下幾種：JsonStore,SimpleStore,GroupingStore一個表格的基本編寫過程：1、創(chuàng)建表格列模型varcm=newExt.grid.ColumnModel(header:角色，datalndex:role,header:等級,

2、datalndex:grade,header:創(chuàng)建日期,datalndex:createDate,type:date,renderer:Ext.util.Format.dateRenderer(Y 年 m 月 d 日)/創(chuàng)建日期類型的數(shù)據(jù))；2、創(chuàng)建數(shù)據(jù)數(shù)組vardata=士兵,7,2011-07-2412:34:56,將軍,10,2011-07-2412:34:56,；3、創(chuàng)建一個數(shù)據(jù)存儲對象 store，包含兩部分：proxy,獲取數(shù)據(jù)的方式；reader,解析數(shù)據(jù)的方式ArrayReader 的 mapping 用來設(shè)置歹!J 的排歹!順序varstore=newExt.data.Sto

3、re(proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:role,mapping:1,name:grade,mapping:0name:createDate,mapping:2,type:date,dateFormat:Y-m-dH:i:s/創(chuàng)建日期列和顯示格式);store.load();4、創(chuàng)建 GridPanel,裝配 ColumnModel 和 storevargrid=newExt.grid.GridPanel(renderTo:grid,store:store,cm:cm);另外獲取遠程

4、數(shù)據(jù)可以使用 ScriptTagProxy,如下所示varstore=newExt.data.Store(proxy:newExt.data.ScriptTagProxy(url:http:/.),reader:newExt.data.ArrayReader(,name:role,mapping:1,name:grade,mapping:0),sortInfo:field:role,direction:ASC/設(shè)置默認排序列，ASC/DESC);表格的常用屬性功能vargrid=newExt.grid.GridPanel(enableColumnMove:false,/禁止拖放列enableC

5、olumnResize:false,/禁止改變列的寬度stripeRows:true,/斑馬線效果loadMask:true,/讀取數(shù)據(jù)時的遮罩和提示功能renderTo:grid,store:storecm:cm);varcm=newExt.grid.ColumnModel(header:角色，dataIndex:role,width:90,sortable:true,/width設(shè)置列寬度，默認為 100Px,sortable 設(shè)置排序功能id:grade,header:等級,dataIndex:grade,width:40);vargrid=newExt.grid.GridPanel(r

6、enderTo:grid,store:store,cm:cmviewConfig:/讓每列自動填充滿表格forceFit:true)autoExpandColumn:grade/);渲染表格，為表格設(shè)置特殊樣式只需要在 cm 里面增加一個 renderer 屬性， 添加一個自定義函數(shù)來渲染傳進來(由EXT 自動傳遞)的參數(shù)的樣式即可， 即在返回 value 之前拼裝上相應(yīng)的 HTMU 口 CSSE者 JS 響應(yīng)事件。functionrenderSex(value)if(value=male)return男;else自動延伸列，列的 id 在 ColumnModel 中定義return;varc

7、m=newExt.grid.ColumnModel(header:id,dataIndex:id,header:name,dataIndex:name,header:sex,dataIndex:sex,renderer:renderSex,);vardata=1,Jason,male,2,Kate,female;varstore=newExt.data.Store(proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name,name:sex);store.load();vargrid

8、=newExt.grid.GridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm);自動顯示行號，只要在創(chuàng)建 cm 時創(chuàng)建一個 RowNumbere 就可以了varcm=newExt.grid.ColumnModel(newExt.grid.RowNumberer(),/顯示行號header:id,dataIndex:id,header:name,dataIndex:name,header:sex,dataIndex:sex,renderer:renderSex,);刪除列store.remove(store.getAt(i);刷新表

9、格grid.view.refresh();為表格添加復(fù)選框需要使用 CheckboxSelectionModelSelectionModelsm 在使用時要放到 cm 和表格中varsm=newExt.grid.CheckboxSelectionModel();varcm=newExt.grid.ColumnModel(newExt.grid.RowNumberer(),sm,header:編號,dataIndex:id,header:名稱,dataIndex:name);vardata=1,name1,2,name2;varstore=newExt.data.Store(proxy:newE

10、xt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name)；store.load();vargrid=newExt.grid.GridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm,sm:sm);通過 RowSelectionModel 設(shè)置只選擇一行vargrid=newExt.grid.GridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm,sm:newExt.grid.RowS

11、electionModel(singleSelect:true);使用選擇模型獲取數(shù)據(jù)grid.on(click,function()varselections=grid.getSelectionModel().getSelections();for(vari=0;iselections.length;i+)varrecord=selectionsi;Ext.Msg.alert(record.get(id););表格視圖從 MVC 勺思想來看表格控件：* Ext.data.Store 可看做模型* Ext.grid.GridPanel 可看做控制器* Ext.grid.GridView 可看做

12、視圖* 一般 GridView 由 GridPanell 自動生成，如果想設(shè)置 GridView 的屬性時，可以通過Ext.grid.GridPanel 的 getView()獲得視圖實例Ext.get(button1).on(click,function。grid.getView().scrollToTop();grid.getView().focusCell(0,0);varcell=grid.getView().getCell(0,0);cell.style.backgroundColor=red;)；使用 GridPanel 的 viewCon 巾 g 在創(chuàng)建表格時設(shè)置 GridVie

13、w 的初始化參數(shù)vargrid=newExt.grid.GridPanel(height:100,width:400,renderTo:grid,store:newExt.data.Store(autoLoad:true,proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,meta),顯示的列，設(shè)置下拉菜單提示文字設(shè)置右側(cè)滾動條的預(yù)留寬度升序，/設(shè)置下拉菜單提示文字降序，設(shè)置下拉菜單提示文字自動延展每列的長度為表格添加分頁工具條* 可以使用 GridPanel 的 bbar 屬性，并創(chuàng)建 Ext.PagingT

14、oolbar 分頁工具條對* 注意，如果配置了分頁工具條，store.load()就必須在構(gòu)造表格以后執(zhí)行。vargrid=newExt.grid.GridPanel(renderTo:grid,autoHeight:true,store:store,cm:cm,bbar:newExt.PagingToolbar(pageSize:10,/每頁顯示 10 條數(shù)據(jù)store:store,displayInfo:true,/顯示數(shù)據(jù)信息displayMsg:顯示第0條到1條記錄，一共2條,emptyMsg:沒有記錄沒有數(shù)據(jù)時顯示的信息);store.load();columns:meta,view

15、Config:columnsText:scrollOffset:30,/sortAscText:sortDescText:forceFit:true/);從后臺腳本獲取分頁數(shù)據(jù)使用 HttpProxy 傳遞請求，獲取服務(wù)器的 JSON&據(jù)，交給 JsonReader 解析varcm=newExt.grid.ColumnModel(header:編號,dataIndex:id,header:名稱,dataIndex:name);varstore=newExt.data.Store(proxy:newExt.data.HttpProxy(url:page.jsp),reader:newEx

16、t.data.JsonReader(totalProperty:totalProperty,root:root,name:id,name:name);vargrid=newExt.grid.GridPanel(renderTo:grid,autoHeight:true,/數(shù)據(jù)傳回來之前高度未知，所以要使用自適應(yīng)高度store:store,cm:cm,bbar:newExt.PagingToolbar(pageSize:10,store:store,displayInfo:true,displayMsg:顯示第0條到1條記錄/共2條，emptyMsg:沒有記錄);store.load(param

17、s:start:0,limit:10);如果想讓分頁工具條顯示在表格的頂部，可以使用 GridPanel 的 tbar 屬性設(shè)置添加工具條讓 ExtJS 在對返回的數(shù)據(jù)進行分頁* 需要在頁面中引入 examples/locale 目錄下的 PagingMemoryProxy.js 文件* 再使用 PagingMemoryProxy 設(shè)置代理varstore=newExt.data.Store(proxy:newExt.data.PagingMemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name,name:descn

18、)；/在創(chuàng)建 GridPanel 之后調(diào)用store.load(params:start:0,limit:3);可編輯表格控件EditorGrid的使用制作一個簡單的 EditorGrid 的步驟1、定義列 ColumnModel 在里面添加 editor 屬性varcm=newExt.grid.ColumnModel(header:編號,dataIndex:id,editor:newExt.grid.GridEditor(newExt.form.TextField(allowBlank:false/不允許在 TextField 中輸入空值),header:名稱，dataIndex:name,

19、editor:newExt.grid.GridEditor(newExt.form.TextField(allowBlank:false);2、準備一個數(shù)組vardata=1,Jason,2,Jay;3、創(chuàng)建 Ext.data.Store,設(shè)置內(nèi)存代理，設(shè)置 ArrayReader 解析數(shù)組varstore=newExt.data.Store(proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name)；4、加載數(shù)據(jù)，倉 1J 建 EditorGridPanelstore.load(

20、);vargrid=newExt.grid.EditorGridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm);為可編輯表格添加和刪除數(shù)據(jù)1、使用 Record 的 create 方法創(chuàng)建一個記錄集 MyRecord,MyRecord 相當于一個varMyRecord=Ext.data.Record.create(name:id,type:string,name:name,type:string);store.load();2、創(chuàng)建 EditorGridPanel 面板，在屬性 tbar 中創(chuàng)建 Ext.Toolbarvargrid

21、=newExt.grid.EditorGridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm,tbar:newExt.Toolbar(-,/-text:添加一行,handler:function()varp=newMyRecord(id:,name:);grid.stopEditing();/store.insert(0,p);/grid.startEditing(0,0);/,-,text:刪除一行,handler:function()Ext.Msg.confirm(信息,確定要刪除？,function(btn)if(btn=yes

22、)varsm=grid.getSelectionModel();/獲取表格的選擇模型varcell=sm.getSelectedCell();/獲取選中的單元格varrecord=store.getAt(cell0);通過行號得到 store 這一行對表示菜單分隔符關(guān)閉表格的編輯狀態(tài)創(chuàng)建的 Record 插入 store 的第一行激活第一行第一列的編輯狀態(tài)應(yīng)的 Recordstore.remove(record);/移除數(shù)據(jù));,-);為可編輯表格保存修改的結(jié)果在上面例子的基礎(chǔ)之上，添加一個保存按鈕text:保存,handler:function()varm=store.modified.sl

23、ice(0);獲彳#store 中修改過得數(shù)據(jù)for(vari=0;im.length;i+)/驗證表格信息是否正確，是否包含空格varrecord=mi;varfields=record.fields.keys;for(varj=0;jfields.length;j+)varname=fieldsj;varvalue=record.dataname;varcolIndex=cm.findColumnIndex(name);varrowIndex=store.indexOfId(record.id);vareditor=cm.getCellEditor(colIndex).field;if(!

24、editor.validateValue(value)Ext.Msg.alert(提示,請檢查輸入的數(shù)據(jù)是否正確！,function()grid.startEditing(rowIndex,colIndex););return;varjsonArray=;Ext.each(m,function(item);Ext.lib.Ajax.request(/使用 Ajax 請求提交給后臺POST,save_data.jsp,success:function(response)/返回成功Ext.Msg.alert(信息，response.responseText,function()store.relo

25、ad(););,failure:function()/返回失敗Ext.Msg.alert(錯誤,服務(wù)器保存數(shù)據(jù)出錯！);,data=+encodeURIComponent(Ext.encode(jsonArray);另外 store可以設(shè)置屬性 pruneModifiedRecords:true。 這樣， 每次 remove或 10ad操作時 store 會自動清除 modified 標記，可以避免出現(xiàn)下次提交時還會把上次那些modified 信息都帶上的現(xiàn)象。限制表格輸入的數(shù)據(jù)類型NumberFieldheader:ID,dataIndex:id,editor:newExt.grid.GridEditor(newExt.form.NumberField(/NumberField限制只能輸入數(shù)字 allowBlank:false,allowNegative:false,/不能輸入減號maxValue:10)ComboBoxvarcomboData=0,Java,1,Android;header:ComboBox,dataIndex:combo,editor:newExt.grid.GridEditor(newExt.form.ComboBox(store:newExt.data.SimpleStore(fields:value,text,