Ext 表格运用-Ext.grid.EditorGridPanel(带分页)

1.创建 Ext.data.Store

   role_store = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : 'searchRoles.do'}),reader : new Ext.data.JsonReader({root : 'root',totalProperty : 'totalProperty'}, Ext.data.Record.create([{name : 'id',type : 'string'}, {name : 'roleNo',type : 'string'}, {name : 'name',type : 'string'}, {name : 'state',type : 'string'}, {name : 'companyNo',type : 'string'}, {name : 'deptNo',type : 'string'}, {name : 'description',type : 'string'}, {name : 'roleType',type : 'string'}, {name : 'deptName',type : 'string'}, {name : 'roleCategoryId',type : 'string'}, {name : 'userCount',type : 'string'}]))});role_store.on('beforeload', function() {this.baseParams = {companyNo : companyNo}});

2.创建Ext.grid.CheckboxSelectionModel --在每一行添加一个复选框，如果不需要，可以不添加

   var sm = new Ext.grid.CheckboxSelectionModel({listeners : {selectionchange : function(obj) {roleIds = '';var selections = obj.getSelections();for (var i = 0; i < selections.length; i++) {roleIds += selections[i].get('id') + ",";}if (roleIds != "") {roleIds = roleIds.substring(0, roleIds.length - 1);}}}});

3.创建数据行 Ext.grid.ColumnModel

   var role_column = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({header : '#'}), sm, {header : '角色名称',dataIndex : 'name',sortable : true, //开启排序hidden : true,//影藏列width : 200}, {header : '角色人数',dataIndex : 'userCount',width : 100}, {header : '描述',dataIndex : 'description',width : 250}, {header : '操作',dataIndex : 'id',width : 180,renderer : function(value) {return "<a href="#a" mce_href="#a" title='点击进入角色授权' onclick=/"javascript:window.open('"+ "../../system/role/setRight.jsp?roleId="+ value+ "&companyNo="+ companyNo+ "', '', 'height=690,width=1080,left=100,top=10,toolbar=no,location=no,resizable=yes,scrollbars=yes,status=yes')/">配置</a>、"+ "<a href="#a" mce_href="#a" title='点击配置用户' onclick='configUser("+ value+ ")'>用户</a>、"+ "<a href="#a" mce_href="#a" title='点击编辑角色' onclick='editRole("+ value+ ")'>编辑</a>、"+ "<a href="#a" mce_href="#a" title='点击删除角色' onclick='delRole("+ value + ")'>删除</a>";}}])

4.创建grid (Ext.grid.EditorGridPanel)

   role_grid = new Ext.grid.EditorGridPanel({bodyStyle : 'width:100%;padding:0px',store : role_store, //ds:role_storecm : role_column, // 装载的表格行sm : new Ext.grid.CheckboxSelectionModel({singleSelect : true}), // checkbox列loadMask : true, //load时,打开遮罩层autoHeight : false, // 自动调整高度height:450,autoWidth : true,collapsible : true, //是否允许面板展开收缩(默认false) animCollapse : true,//允许展开和收缩 allowDomMove : true, //表头的每一列是否可以调换位置autoExpandColumn : 4, //生成4列viewConfig : {deferEmptyText : '请等待...',emptyText : '',enableRowBody : true},frame : true,clicksToEdit : 1,bbar : new Ext.PagingToolbar({ //表格尾部添加pageSize : 15,store : role_store,beforePageText : "当前第",afterPageText : "页，共{0}页",lastText : "尾页",nextText : "下一页",prevText : "上一页",firstText : "首页",refreshText : "刷新页面",displayInfo : true,displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',emptyMsg : "没有记录"}),tbar : ['->', {//表格头部添加text : '添加角色',iconCls : 'icon-add',tooltip : '添加角色',handler : function() {if (companyNo == '' || companyNo == 0) {Ext.Msg.show({title : '警告',msg : '请先选择区域!',buttons : Ext.Msg.OK,width : 200,fn : function() {// cnfield.focus(true);// btn.enable();},icon : Ext.Msg.WARNING});return;}addRoleWindows.show();}}// , {// text : '编辑角色',// iconCls : 'icon-edit',// tooltip : '编辑角色',// handler : function() {//// var record = role_grid.getSelectionModel()// .getSelected();//// if (record) {// editRoleWindows.show();// editRoleForm.getForm().loadRecord(record);// } else {// Ext.Msg.show({// title : '警告',// msg : '请选择要编辑的数据行!',// buttons : Ext.Msg.OK,// width : 250,// fn : function() {// // cnfield.focus(true);// // btn.enable();// },// icon : Ext.Msg.WARNING// });// }// }// }],listeners : {// 编辑后失去响应的操作afteredit : function(event) {},// 选定一列后的操作rowclick : function(obj, rowIndex, event) {var store = role_store.getAt(rowIndex);roleId = store.get("id");user_store.load({params : {start : 0,limit : 100,id : roleId,companyNo : companyNo}});}}})

5.接下来就需要创建一个面板来存放这个grid了

   var rightPanel = new Ext.Panel({id : 'images',region : 'center',bodyStyle : 'background:white;padding-left:5px;',autoHeight : true,autoWidth : true,border : false,items : [role_grid]})

01./* 02.Ext.Panel主要配置表: 03.animCollapse Boolean 设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则false 04.applyTo

Mixed 面板定位 05.autoDestroy Boolean 是否自动销毁从容器中移除组件(默认true) 06.autoHeight Boolean 是否自动高度(默认

false) 07.autoLoad Object/String/Function 设置面板自动加载的url 08.autoScroll Boolean 设置是否自动加载滚动条(默认false自动加

滚动条) 09.autoShow Boolean 是否移除组件的隐藏样式(默认flase) 10.autoWidth Boolean 是否自动宽度(默认false) 11.baseCls

String 面板的基本样式类(默认x-panel) 12.bbar Object/Array 设置面板底端工具栏,可是Ext.Toolbar,工具栏配置对象,button的数组

13.bodyBorder Boolean 是否显示面板体内部边框(默认true，在border=true生效) 14.bodyStyle String/Object/Function 应用于面板

体的自定义样式(默认null) 15.border Boolean 是否显示面板体边框(默认true，2px) 16.buttonAlign String 设置面板底部按钮对齐方式

(默认right,可为left,center) 17.buttons Arry 设置面板底部按钮配置数组 18.collapseFirst Boolean 该项决定展开收缩按钮的位置(默认

true) 19.collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态(默认true) 20.collapsible Boolean 是否允许面板展开收缩(默认

false) 21.contentEI String 设置面板的内容元素,可为页面元素id，已存在的HTML节点 22.defaultType String 面板中元素的默认类型(默

认panel) 23.defaults Object 应用到面板容器中所有元素配置对象,如:defaults:{bodyStyle:'padding:15px'} 24.floating Boolean 设置

面板是否可浮动(默认true,会导致面板显示负偏移,位置要明确设置!) 25.footer Boolean 设置是否创建面板底部元素(默认true) 26.frame

Boolean 设置是否渲染面板 27.header Boolean 设置是否创建头部(默认true) 28.headerAsText Boolean 是否在面板header中显示

title(默认true) 29.height Number 面板高度(默认auto) 30.hideBorders Boolean true隐藏面板中所有元素的边框，false据组件具体配

置 31.hideCollapseTool Boolean 设置当collapsible为true是，是否显示展开收缩按钮 32.html String/Object 设置面板元素内容为

HTML片段或DomHelper生成内容 33.items Mixed 单独一个子组件或子组件数组 34.layout String 面板布局类型(默认

Ext.layout.ContainerLayout布局) 35.layoutConfig Object 这个配置对象包含被选布局的配置项 36.maskDisabled Boolean 设置当面

板不可使用时是否遮罩面目(默认true) 37.shadow Boolean/String 设置是否在面板后显示阴影(默认true) 38.shadowOffset Number 设

置面板阴影偏移量(默认4) 39.tbar Object/Array 设置面板顶端工具栏,可是Ext.Toolbar,工具栏配置对象,button配置对象数组,面板 40. 渲

染后只能通过getTopToolbar方法访问该工具栏 41.title String 显示在面板的头部标题信息 42.titleCollapse Boolean 设置是否允许单击

面板头部进行展开收缩(默认false) 43.tools Array 面板头部工具按钮配置对象数组 44.width Number 面板宽度(默认auto) 45. 46.tools配

置表: 47.id String 必选 48.handler Function 单击按钮后出发的处理函数 49.scope Object 处理函数执行范围 50.qtip String/Object 为

按钮指定提示信息 51.hidden Boolean 设置初次渲染是否隐藏 52.on Object 为按钮配置事件监听 53. 54.tools配置项id对应不同按钮

55.*/