项目中的grid
自动显示行号
rn = new Ext.grid.RowNumberer();
复选框
var sm = new Ext.grid.CheckboxSelectionModel({ //如果只允许用户通过复选框执行选中操作放开下面配置项 //handleMouseDown : Ext.emptyFn//可复用的空函数 //true表示只允许选择单行 //singleSelect : true });
列模型
var cm = new Ext.grid.ColumnModel([rn,sm, { header:'编号', dataIndex:'id', align :'center', sortable : true, renderer : function(v){ return "<div align='center'>"+v?v:""+"</div>" } },{ header:'查看详细', dataIndex:'id', align :'center', renderer : function(v){ return "<div align=\"center\"><input type=\"button\" value=\".....\" onclick=\"alert(1)\"></div>" } } ]);分页工具
var bbar = new Ext.PagingToolbar({ pageSize : limit, store : store, displayInfo : true, displayMsg : '显示第{0}条到{1}条记录,一共{2}条', emptyMsg : '没有记录', prevText:'上一页', nextText:'下一页', refreshText:'刷新', lastText:'最后页', firstText:'第一页', beforePageText:'当前页', afterPageText:'共{0}页', plugins: [ new Ext.ux.ProgressBarPager() ] });表格显示内容
var grid = new Ext.grid.GridPanel({ region: 'center', store : store, stripeRows : true, sm : sm, cm : cm, bbar : bbar, tbar : [{ text: '增加', pressed:true, handler: function(){ } },'-',{ text: '删除', pressed:true, handler: function(){ } },'-',{ text: '修改', pressed:true, handler: function(){ } }], viewConfig : new Ext.grid.GridView({ forceFit : true }), listeners : { 'beforerender' : function(){ store.load(); } } });
项目中使用new Ext.grid.RowExpander 需要导入ux/RowExpander.js
var expander = new Ext.grid.RowExpander({ tpl : new Ext.Template( '<div style="border:1px #CCCCCC solid"><br>'+ '<table background = "#CCCCCC">' + '<tr>' + '<td width="23%"> 用户名称: {YH_MC}</td>' + '<td width="23%"></td>' + '<td width="23%"></td>' + '<td rowspan="4" width="5%">照片:</td>' + '<td rowspan="4" width="26%">'+ '<img src="<%=rootpath%>/image/lwc.jpg" style="height:177;width:150"/>'+ '</td>' + '</tr>' + '<tr>' + '<td> 学历: {XL}</td>' + '<td>学校: {XX}</td>' + '</tr>' + '<td> 电话: {DH}</td>' + '<td>家庭住址: {JTZZ}</td>' + '</tr>' + '<tr>' + '<td> 入职时间: {RZSJ}</td>' + '<td>离职时间: {LZSJ}</td>' + '</tr>' + '</table>' + '<br/></div>' ), beforeExpand : function(record, body, rowIndex){ record.data.FILENAME=encodeURI(record.data.FILENAME); if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){ if(this.tpl && this.lazyRender){ body.innerHTML = this.getBodyContent(record, rowIndex); } return true; }else{ return false; } } });放入列模型
var cm = new Ext.grid.ColumnModel([rn,sm,expander,放入grid
plugins: expander,1.表格的特性简介
表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由类Ext.grid.ColumnModel定义, 表格的数据存储器由Ext.data.Store定义,根据解析数据不同,数据存储器分为JsonStore,SimpleStore,GroupingStrore等
2.制作一个表格
var grid = new Ext.grid.GridPanel({ store : store, autoHeight : true,//自动高度 //enableColumnMove : false,//不可拖动列 //enableColumnResize : false,不可改变列宽度 //stripeRows : true,//斑马线效果 //loadMask : true,//笼罩提示信息 columns : column, //列默认为100px,如果要自定义宽度,只需要设置该列的width属性即可 //每列自动填满表格 viewConfig : new Ext.grid.GridView({ forceFit : true }), listeners : { 'beforerender' : function(){ store.load(); } } });3.指定某一列自动延伸填充表格可以使用autoExpandColumn配置项,cm必须设置id
var column = [ {id:'ttt',header:'名称',dataIndex:'name'} ] var grid = new Ext.grid.GridPanel({ autoExpandColumn : 'ttt' });4.格式化数据集日期显示在列模型中
<script type="text/javascript" defer> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif'; var data = [ ['1','李文超','李文超的描述','1985-01-15T02:08:04'], ['2','范勇','范勇的描述','1986-01-15T02:08:04'], ['3','马新军','马新军的描述','1987-01-15T02:08:04'], ['4','常高军','常高军的描述','1988-01-15T02:08:04'], ['5','何卫国','何卫国的描述','1989-01-15T02:08:04'] ]; var store = new Ext.data.Store({ proxy : new Ext.data.MemoryProxy(data), reader : new Ext.data.ArrayReader({},[ {name : 'id',mapping:0}, {name : 'name',mapping:1}, {name : 'descn',mapping:2}, /* type告诉reader在解析原始数据时把对应的列做为日期类型处理 dateFormat属性把得到的字符串转化为相应的日期格式 */ {name : 'date',mapping:3,type:'date',dateFormat:'Y-m-dTH:i:s'}, ]) }); var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}, { header:'日期', dataIndex:'date', width:200, //该函数的作用是渲染日期格式 renderer: Ext.util.Format.dateRenderer('Y年m月d日') } ]); var grid = new Ext.grid.GridPanel({ store : store, cm : cm, listeners : { 'beforerender' : function(){ store.load(); } } }); new Ext.Viewport({ layout:'fit', items: [grid] }); }); </script>
5.表格渲染
公共部分
var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}, {header:'性别',dataIndex:'sex',renderer: renderSex} ]);
简单渲染:
function renderSex(value){ if('male'==value){ return "<span style='color:red'>男</span><img src='<%=rootpath%>/image/boy.jpg'/>" }else{ return "<span style='color:green'>女</span><img src='<%=rootpath%>/image/girl.jpg'/>" } }
复杂渲染:
/* value : 将要显示的单元格的值 cellmeta : 单元格的相关属性,主要有id和CSS record : 这行数据对象,如果需要获取其他列的值,可以通过record.data['id']的方式获得 rowIndex : 行号,这里的行号指的是当前页面中所有记录的顺序 columnIndex : 列号 store : 构造表格时传递的ds */ function renderSex(value, cellmeta, record, rowIndex, colIndex, store){ var str = "<input type ='button' value='详细信息' onclick='alert(\""+ "这个单元格的值是: "+value+"\\n"+ "这个单元格的配置是: {cellId: "+cellmeta.cellId+",id: "+cellmeta.id+",css: "+cellmeta.css+"}\\n"+ "这个单元格对应的行是: "+record+",一行的数据都在里边\\n"+ "这是第"+rowIndex+"行\\n"+ "这是第"+colIndex+"列\\n"+ "这个表格对应的Ext.data.Store在这里: "+store+",随便用吧"+ "\")'/>"; return str; }
7.在grid中删除record和增加record
var grid = new Ext.grid.GridPanel({ store : store, clicksToEdit: 1,//要转换单元格为编辑状态所需的鼠标点击数 cm : cm, sm : sm, tbar : new Ext.Toolbar({ items : ['-',{ text: '添加一行', handler : function(){ var p = new myRecord({ id : '', name : '', descn: '', sex : '' }); grid.stopEditing();//停止任何激活的行为 store.insert(0,p);//触发添加事件时插入records到指定的store位置 grid.startEditing(0,0);//指定的行/列,进行单元格内容的编辑 } },'-',{ text: '删除一行', handler : function(){ Ext.Msg.confirm('信息','确认删除?',function(btn){ if(btn == 'yes'){ var record = store.getAt(0); store.remove(record); grid.view.refresh();//刷新表格的视图 } }); } }] }) });8.表格视图Ext.grid.GridView
Ext的表格控件都遵守MVC模型 Ext.data.Store可以看作Model Ext.grid.GridPanel可以看作controller Ext.grid.GridView可以看作view 通常情况,ext.grid.GridView的实例不需要自行创建,controller会自动生成 当希望操作Ext.grid.GridView的属性时,可以通过grid.getView()函数来获取当前表格的视图实例
默认情况下GridView显示为
修改grid
viewConfig : { columnsText : 'column', scrollOffset : 30,//表格右侧为滚动条预留的宽度 sortAscText : 'asc', sortDescText : 'desc' }修改后的
9.可编辑表格 Ext.grid.EditorGridPanel
var grid = new Ext.grid.EditorGridPanel({ store : store, //要转换单元格为编辑状态所需的鼠标点击数 clicksToEdit: 1, cm : new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),sm,{ header:'编号', dataIndex:'id', editor : new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank : false }) ) },{ header:'名称', dataIndex:'name', editor : new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank : false }) ) } ]), sm : sm });
10.属性表格控件 Ext.grid.PropertyGrid
根据name获取value
var value = grid.store.getById('name').get('value');效果图
<script type="text/javascript" defer> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif'; var grid = new Ext.grid.PropertyGrid({ title: '属性表格', autoHeight: true, width: 300, renderTo: 'grid', viewConfig: { forceFit: true }, source: { "名字": "不告诉你", "创建时间": new Date(Date.parse('12/15/2007')), "是否有效": false, "版本号": .01, "描述": "嗯,估计没啥可说的" } }); }); </script>10.1禁用Ext.grid.PropertyGrid编辑功能通过监听器来实现
grid.on("beforeedit", function(e){ e.cancel = true; return false; });10.2Ext.grid.PropertyGrid自身有两列name和value,默认根据nane排序,我们可以修改配置项initComponent,强制对name列进行排序
Ext.MyPropertyGrid = Ext.extend(Ext.grid.PropertyGrid, { //自定义配置项 autoSort:true, initComponent : function(){ this.customRenderers = this.customRenderers || {}; this.customEditors = this.customEditors || {}; this.lastEditRow = null; var store = new Ext.grid.PropertyStore(this); this.propStore = store; var cm = new Ext.grid.PropertyColumnModel(this, store); //接受参数是否需要默认排序 if(this.autoSort){ store.store.sort('name', 'ASC'); } this.addEvents( 'beforepropertychange', 'propertychange' ); this.cm = cm; this.ds = store.store; Ext.grid.PropertyGrid.superclass.initComponent.call(this); this.mon(this.selModel, 'beforecellselect', function(sm, rowIndex, colIndex){ if(colIndex === 0){ this.startEditing.defer(200, this, [rowIndex, 1]); return false; } }, this); } }); var grid = new Ext.MyPropertyGrid({ title : '表格标题', autoHeight : true, width : 400, //这里传参数 autoSort : false, renderTo : 'lwc', //JSON指定了一组key和value source : { '名' : 'tom', '姓' : 'cat', '性别' : 'boy', '年龄' : '18' } });
10.3自定义编辑器
<script type="text/javascript" defer> Ext.onReady(function(){ var grid = new Ext.grid.PropertyGrid({ title: '属性表格', autoHeight: true, width: 300, renderTo: 'grid', customEditors: { 'Start Time': new Ext.grid.GridEditor( new Ext.form.TimeField({ selectOnFocus:true }) ) }, source: { 'Start Time': '10:00 AM' } }); }); </script>
11.表格右键菜单
contextmenu (Ext.EventObject e) 全局性右键事件 cellcontextmenu (Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e) 单元格上的右键事件 rowcontextmenu(Grid this,Number rowIndex,Ext.EventObject e) 行上右键事件 headercontextmenu(Grid this,Number columnIndex,Ext.EventObject e) 表头右键事件
var contextmenu = new Ext.menu.Menu({ items : [{ text : '查看详细', handler : function(){ } }] }); var grid = new Ext.grid.GridPanel({ renderTo : 'grid', autoHeight : true, store : store, cm : cm, listeners : { rowcontextmenu : function(grid,rowIndex,e){ e.preventDefault(); //返回grid的SelectionModel var rowSelectionModel = grid.getSelectionModel(); //选取这一行 rowSelectionModel.selectRow(rowIndex); //获取事件的页面坐标 var array = e.getXY() //在指定的位置显示该菜单 contextmenu.showAt(array); } } });
12.分组表格视图
我们可以通过grid.getView()获取Ext.grid.GroupingView的实例,进行对视图的操作代码
var data = [ ['1','李文超','李文超的描述','male'], ['2','范勇','范勇的描述','female'], ['3','马新军','马新军的描述','male'], ['4','常高军','常高军的描述','female'], ['5','何卫国','何卫国的描述','male'] ]; var store = new Ext.data.GroupingStore({ proxy : new Ext.data.MemoryProxy(data), reader : new Ext.data.ArrayReader({},[ {name : 'id',mapping:0}, {name : 'name',mapping:1}, {name : 'descn',mapping:2}, {name : 'sex',mapping:3}, ]), groupField : 'sex', sortInfo : { field : 'id',//排序的属性 deirection : 'asc' //排序的方式 } }); store.load(); var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}, {header:'性别',dataIndex:'sex'} ]); var grid = new Ext.grid.GridPanel({ store : store, view : new Ext.grid.GroupingView(), cm : cm, tbar : [{ text : 'expand', handler : function(btn) { var groupingView = grid.getView(); groupingView.expandAllGroups()//展开所有分组 } },{ text : 'collapse', handler : function(btn) { var groupingView = grid.getView(); groupingView.collapseAllGroups();//折叠所有分组 } },{ text : 'toggle', handler : function(btn) { var groupingView = grid.getView(); //会自动判断分组的状态,展开的时候折叠,折叠的时候展开 groupingView.toggleAllGroups(); } },{ text : 'toggle one', handler : function(btn) { var groupingView = grid.getView(); //只展开female var groupId = groupingView.getGroupId('female'); groupingView.toggleGroup(groupId); } }] }); new Ext.Viewport({ layout:'fit', items: [grid] });13.拖放表格
<%@ page language="java" pageEncoding="UTF-8"%> <% String rootpath = request.getContextPath();%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/> <script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script> <script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script> <script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script> <script type="text/javascript" defer> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif'; var data = [ ['1','李文超','李文超的描述','male'], ['2','范勇','范勇的描述','female'], ['3','马新军','马新军的描述','male'], ['4','常高军','常高军的描述','female'], ['5','何卫国','何卫国的描述','male'] ]; var store = new Ext.data.Store({ proxy : new Ext.data.MemoryProxy(data), reader : new Ext.data.ArrayReader({},[ {name : 'id',mapping:0}, {name : 'name',mapping:1}, {name : 'descn',mapping:2}, {name : 'sex',mapping:3}, ]) }); store.load(); var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}, {header:'性别',dataIndex:'sex'} ]); var grid = new Ext.grid.GridPanel({ renderTo : 'grid', store : store, cm : cm }); var rz = new Ext.Resizable(grid.getEl(),{ wrap : true,//构造Resizable时自动在指定id的外边包裹一层div,这样就不要定义其他附属的div了 minHeight : 100,//限制改变大小的高度 pinned : true,//控制拖动区域的显示状态,true表示会一直在表格下方,false,只有鼠标悬停在可拖拽区域上方时出现 handles : 's' //东 南 西 北 }) //注册事件,在拖放完成之后表格会调用syncSize方法修改自己的大小,第三个参数是函数执行的scope //syncSize 强制重新计算组件的大小尺寸,这个尺寸是基于所属元素当前的高度和宽度 rz.on('resize',grid.syncSize,grid); }); </script> </head> <body> <div id = 'grid'></div> </body> </html>13.2在同一个表格里拖放
<%@ page language="java" pageEncoding="UTF-8"%> <% String rootpath = request.getContextPath();%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/> <script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script> <script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script> <script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script> <script type="text/javascript" defer> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif'; var data = [ ['1','李文超','李文超的描述','male'], ['2','范勇','范勇的描述','female'], ['3','马新军','马新军的描述','male'], ['4','常高军','常高军的描述','female'], ['5','何卫国','何卫国的描述','male'] ]; var store = new Ext.data.Store({ proxy : new Ext.data.MemoryProxy(data), reader : new Ext.data.ArrayReader({},[ {name : 'id',mapping:0}, {name : 'name',mapping:1}, {name : 'descn',mapping:2}, {name : 'sex',mapping:3}, ]) }); store.load(); var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}, {header:'性别',dataIndex:'sex'} ]); var grid = new Ext.grid.GridPanel({ renderTo : 'grid', autoHeight : true, store : store, cm : cm, enableDragDrop : true //对表格内置拖放支持 }); //一个简单的基础类,该实现使得任何元素变成为可落下的目标,以便让拖动的元素放到其身上 var ddrow = new Ext.dd.DropTarget(grid.container,{ ddGroup : 'GridDD', copy : false,//拖放以后是执行裁剪操作还是复制,false拖过去以前数据不见了,true拖过去原来数据不会变化 //拖动事件 notifyDrop : function(dd,e,data){ //选中了多少行 var rows = data.selections; //拖动到第几行 var index = dd.getDragData(e).rowIndex; if(typeof(index) == 'undefined'){ return; } //修改store for(i = 0 ;i <rows.length;i++){ var rowData = rows[i]; if(!this.copy){ store.remove(rowData); store.insert(index,rowData); } } } }); }); </script> </head> <body> <div id = 'grid'></div> </body> </html>