Ext.GridPanel 用法总结（一）—— Grid基本用法

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(); } } ] } );