GridPanel類是基於基礎列表介面具代表性的主要實現類。也是最常用的Ext元件之一。

一：首先定義grid的資料來源

//初始化Ext狀態管理器，在Cookie中記錄使用者的操作狀態，如果不啟用，象重新整理時就不會儲存當前的狀態，而是重新載入 Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.QuickTips.init(); //顯示提示資訊 var pageSize=10;//定義每頁顯示的行數 //定義資料欄位 var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"]; //定義資料來源 journal_store = new Ext.data.Store({ // 獲取資料 proxy:new Ext.data.HttpProxy( { url:"Data/SystemManage/Journal/JournalsInfo.aspx",//獲取資料的後臺地址 method:"POST" }), //解析json reader:new Ext.data.JsonReader( { fields:fields, root:"data", id:"roleId", totalProperty:"totalCount" //總的資料條數 }) }); //根據引數載入資料 journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}}); 

二：定義其選擇列、行號、列等

//--------------------------------------------------列選擇模式 var sm = new Ext.grid.CheckboxSelectionModel({ dataIndex:"roleId" }); var index= new Ext.grid.RowNumberer();//行號 //--------------------------------------------------列頭 var colModel = new Ext.grid.ColumnModel ( [ index, sm, {header:"序號",width:100,dataIndex:'journal_id',sortable:true}, {header:"期刊名稱",width:80,dataIndex:'journal_name',sortable:true}, {header:"主辦單位",width:110,dataIndex:'journal_organizer',sortable:true}, {header:"期刊級別",width:100,dataIndex:'journal_level',sortable:true}, {header:"是否核心",width:110,dataIndex:'is_core',sortable:true}, {header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun} ] );

三：定義表格grid

journal_grid = new Ext.grid.GridPanel ( { id:'id_journal_grid', //grid的id autoHeight:true, autoWidth:true, sm:sm, cm:colModel, //行列 loadMask:true, store:journal_store, //資料來源 trackMouseOver:true, //滑鼠特效 autoScroll:true, stripeRows:true, viewConfig:{ columnsText:"顯示/隱藏列", sortAscText:"正序排列", sortDescText:"倒序排列", forceFit:true },

四：定義工具欄

tbar: //工具條 [ { text: '重新整理', cls: 'x-btn-text-icon details', handler: function(btn, pressed) {//重置查詢條件 Ext.getCmp("QueryForm").findById('journalName').reset(); Ext.getCmp("QueryForm").findById('journalOrganizer').reset(); Ext.getCmp("QueryForm").findById('journalLevel').reset(); Ext.getCmp("QueryForm").findById('JournalIsCore').reset(); journal_store.load({params:{start:0,limit:pageSize}}); //資料來源從新載入 } }, '-', { text: '新增', handler: function(btn, pressed) { AddJournalInfo(); //新增新的角色資訊 } }, '-', { text: '編輯', handler: function(btn, pressed) { var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//選擇行的個數 if(row.length==0) { Ext.Msg.alert("提示資訊","請您至少選擇一個!"); } else if(row.length>1){ Ext.Msg.alert("提示資訊","對不起只能選擇一個!"); }else if(row.length==1) { EditJournalInfo(row[0]);//傳行一行記錄直接載入 編輯角色資訊 } } }, '-', { text: '刪除', handler: function(btn, pressed) { var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections(); //獲取選中的行 if(row.length==0) { Ext.Msg.alert("提示資訊","請您至少選擇一個!"); } else{ Ext.Msg.confirm("提 示!","您確定要刪除嗎?",function(btn){ if(btn=="yes") { DeleteJournalInfo(row);//刪除角色資訊 } else { } }) } } },'-', { text: '綜合查詢', handler: function(btn, pressed) { Ext.getCmp("QueryForm").toggleCollapse(true);//將formset展開 } }, '-' ]

五：設定分頁

//分頁 bbar:new Ext.PagingToolbar({ store:journal_store, //資料來源 pageSize:pageSize, //顯示右下角資訊 displayInfo:true, displayMsg:'當前記錄 {0} -- {1} 條 共 {2} 條記錄', emptyMsg:"No results to display", prevText:"上一頁", nextText:"下一頁", refreshText:"重新整理", lastText:"最後頁", firstText:"第一頁", beforePageText:"當前頁", afterPageText:"共{0}頁" }) });

六：設定右鍵選單

//為右鍵選單新增事件監聽器 journal_grid.addListener('rowcontextmenu',rightClickFn); var rightClick = new Ext.menu.Menu ( { items: [ { id: 'rMenu1', handler:AddJournalInfo,//點選後觸發的事件 text: '增加角色' }, { id:'rMenu2', text:'編輯角色', handler:function() { JournalEdit(); } }, { id:'rMenu3', text:'刪除角色', handler: function() { JournalDelete(); } } ] } );