Extjs-表格 Ext.grid.GridPanel
项目中的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 ""+v?v:""+""
}
},{
header:'查看详细',
dataIndex:'id',
align :'center',
renderer : function(v){
return ""
}
}
]);需要导入ProgressBarPager.js
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(
'
'+
'' +
'' +
' 用户名称: {YH_MC} ' +
'照片: ' +
''+
'
'+
' ' +
' ' +
'' +
' 学历: {XL} ' +
'学校: {XX} ' +
' ' +
' 电话: {DH} ' +
'家庭住址: {JTZZ} ' +
'' +
'' +
' 入职时间: {RZSJ} ' +
'离职时间: {LZSJ} ' +
' ' +
'
' +
'
'
),
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,plugins: expander,表格由类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();
}
}
});var column = [
{id:'ttt',header:'名称',dataIndex:'name'}
]
var grid = new Ext.grid.GridPanel({
autoExpandColumn : 'ttt'
});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 "男
"
}else{
return "女
"
}
}复杂渲染:
/*
value : 将要显示的单元格的值
cellmeta : 单元格的相关属性,主要有id和CSS
record : 这行数据对象,如果需要获取其他列的值,可以通过record.data['id']的方式获得
rowIndex : 行号,这里的行号指的是当前页面中所有记录的顺序
columnIndex : 列号
store : 构造表格时传递的ds
*/
function renderSex(value, cellmeta, record, rowIndex, colIndex, store){
var str = "";
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();//刷新表格的视图
}
});
}
}]
})
});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');代码
grid.on("beforeedit", function(e){
e.cancel = true;
return false;
});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自定义编辑器
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.1拖放改变表格的大小Ext.Resizable()
效果图
代码
<%@ page language="java" pageEncoding="UTF-8"%>
<% String rootpath = request.getContextPath();%>
效果图
代码
<%@ page language="java" pageEncoding="UTF-8"%>
<% String rootpath = request.getContextPath();%>