Grid的使用实例
1、Ext2.0目录结构
1.1、adapter目录,负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库ext-xxxx-adapter.js
1.1.1、/ext/ext-base.js 必备基础引用***
1.2、example目录Ext2.0应用实例
1.3、resource目录 Ext UI资源文件目录，如CSS、图片文件都存放在这里面。
1.3.1、/css/ext-all.css 必备基础引用***
1.4、ext-all-debug.js 无压缩的Ext全部的源码(用于调试)
1.5、ext-all.js 压缩后的Ext全部源码，加速执行效率,必备基础引用***
1.6、source目录 Ext js源文件目录，用于查看js的函数实现和注释，其中的locale目录是Ext国际化可以引入的资源文件
1.6.1、/locale/ext-lang-<%=request.getLocale().toString()%>.js 必备基础引用***
---------------------------------------------------
2、 Grid的使用实例(包含分页和httpProxy)
2.1、在jsp文件中引入js、css文件，文件的引入是有顺序的
<script type='text/javascript' src='<%=strContextPath%>/dwr/util.js'></script>
<link rel="stylesheet" type="text/css" href="<%=strContextPath%>/script/ext/resources/css/ext-all.css" >
<script type="text/javascript" src="<%=strContextPath%>/script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=strContextPath%>/script/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=strContextPath%>/script/ext/source/local/ext-lang-<%=request.getLocale().toString()%>.js"></script>
<script type="text/javascript" src="<%=strContextPath%>/script/ext/newbee/page_grid.js"></script>
util.js 引入此文件为了使用$操作符根据ID获取页面的组件等系列工具函数，例如：$('local-states').value
ext-all.css Ext用到的css式样
ext-base.js Ext必备基础引用，它和ext-all.js、ext-lang-<%=request.getLocale().toString()%>.js文件的引入必须保持现有的顺序
ext-all.js Ext主文件，如果要在调试模式下使用可以替换为ext-all-debug.js
ext-lang-<%=request.getLocale().toString()%>.js Ext国际化文件的动态写法，根据浏览器的语言设定引入不同的国际化文件
page_grid.js 自定义Grid的js文件
2.2、添加grid-div
<div id="grid-newbee"></div>
2.3、编写 page_grid.js 文件的注意事项
2.3.1、Ext.data.Record.create()创建常用属性
name : String
The name by which the field is referenced within the Record. This is referenced by, for example the dataIndex property in column definition objects passed to Ext.grid.ColumnModel
mapping : String
(Optional) A path specification for use by the Ext.data.Reader implementation that is creating the Record to access the data value from the data object. If an Ext.data.JsonReader is being used, then this is a string containing the javascript expression to reference the data relative to the record item's root. If an Ext.data.XmlReader is being used, this is an Ext.DomQuery path to the data item relative to the record element. If the mapping expression is the same as the field name, this may be omitted.
type : String
(Optional) The data type for conversion to displayable value. Possible values are
auto (Default, implies no conversion)
string
int
float
boolean
date
dateFormat : String
(Optional) A format String for the Date.parseDate function.
var TopicRecord = Ext.data.Record.create([
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'username'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'lastPoster', mapping: 'user2'},
{name: 'excerpt', mapping: 'post_text'}
]);
2.3.2、autoExpandColumn参数值引用的是ColumnModel中的ID而不是dataIndex
var grid = new Ext.grid.GridPanel({
store: store,
sm : sm,
columns: [
new Ext.grid.RowNumberer(),
sm,
{header: '编号', width: 10, sortable: true, dataIndex: 'verNumber'},
{id:'strName',header: '内容', width: 75, sortable: true, dataIndex: 'strName'}, // 指定id是为了在autoExpandColumn属性中使用
{header: '课程', width: 10, sortable: true, dataIndex: 'CourseName'},
{header: '题型', width: 10, sortable: true, dataIndex: 'QuestionTypeName'},
{header: '难度', width: 10, sortable: true, dataIndex: 'DifficultyName'},
{header: '区分度', width: 10, sortable: true, dataIndex: 'DistinguishName'},
{header: '要求', width: 10, sortable: true, dataIndex: 'DemandName'},
{header: '编辑', width: 10, sortable: true, dataIndex: 'ModifierName'},
{header: '编辑日期', width: 15, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), dataIndex: 'dtModifyTime'}],
stripeRows: true,
autoExpandColumn: 'strName', // 这里引用的是列id，而不是dataIndex
height:Ext.get("grid-newbee").getHeight(),
width:Ext.get("grid-newbee").getWidth(),
title:'试题列表',
bbar: new Ext.PagingToolbar({
pageSize: newBeePageSize,
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1}， 共 {2} 条',
emptyMsg: '没有数据需要显示'
}),
tbar: new Ext.PagingToolbar({
pageSize: newBeePageSize,
store: store,
displayInfo: true
})
});
2.4、提供数据的servlet，web.xml配置
2.5、改进Ext执行效率
2.5.1、修改 ext-base.js 文件，把BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif"改为BLANK_IMAGE_URL:"../../resources/images/default/s.gif"
2.5.2、自定义字符需要国际化请使用java方式：在主jsp文件中定义js变量，并使用内嵌java代码给变量赋值，然后在其他js代码中引用这些变量。
附page_grid.js代码：
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var myQuestion = Ext.data.Record.create([
{name: 'verNumber'},
{name: 'strName'},
{name: 'CourseName'},
{name: 'QuestionTypeName'},
{name: 'DifficultyName'},
{name: 'DistinguishName'},
{name: 'DemandName'},
{name: 'ModifierName'},
{name: 'dtModifyTime', type: 'date', dateFormat: 'Y-m-d H:i:s'}
]);
var myJsonReader = new Ext.data.JsonReader(
{totalProperty: 'totalProperty', root: 'root'},
myQuestion
);
var myHttpProxy = new Ext.data.HttpProxy({url:myUrl});
var store = new Ext.data.Store({proxy: myHttpProxy, reader: myJsonReader});
// 每页显示的记录数
var newBeePageSize = 10;
// 查询条件
store.on('beforeload', function() {
store.baseParams = {
filterText:filterText01
};
});
store.load({params:{start:0,limit:newBeePageSize}});
// create the Grid
var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:true}) ;
var grid = new Ext.grid.GridPanel({
store: store,
sm : sm,
columns: [
new Ext.grid.RowNumberer(),
sm,
{header: '编号', width: 10, sortable: true, dataIndex: 'verNumber'},
{id:'strName',header: '内容', width: 75, sortable: true, dataIndex: 'strName'}, // 指定id是为了在autoExpandColumn属性中使用
{header: '课程', width: 10, sortable: true, dataIndex: 'CourseName'},
{header: '题型', width: 10, sortable: true, dataIndex: 'QuestionTypeName'},
{header: '难度', width: 10, sortable: true, dataIndex: 'DifficultyName'},
{header: '区分度', width: 10, sortable: true, dataIndex: 'DistinguishName'},
{header: '要求', width: 10, sortable: true, dataIndex: 'DemandName'},
{header: '编辑', width: 10, sortable: true, dataIndex: 'ModifierName'},
{header: '编辑日期', width: 15, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), dataIndex: 'dtModifyTime'}],
stripeRows: true,
autoExpandColumn: 'strName', // 这里引用的是列id，而不是dataIndex
height:Ext.get("grid-newbee").getHeight(),
width:Ext.get("grid-newbee").getWidth(),
title:'试题列表',
bbar: new Ext.PagingToolbar({
pageSize: newBeePageSize,
store: store,
displayInfo: true,
displayMsg: '显示 {0} - {1}， 共 {2} 条',
emptyMsg: '没有数据需要显示'
}),
tbar: new Ext.PagingToolbar({
pageSize: newBeePageSize,
store: store,
displayInfo: true
})
});
// grid单击事件
grid.addListener('rowClick', rowClick);
function rowClick(grid, rowIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(2); //Get field name
var data = record.get(fieldName);
newQuestionId = data;
//Ext.MessageBox.alert('show','当前选中的数据是'+data);
}
// 选择模式重定义，单选模式下，点击列头选择框不执行全选
Ext.grid.CheckboxSelectionModel.prototype.onHdMouseDown = function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
if(this.singleSelect==false){
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
this.clearSelections();
}else{
hd.addClass('x-grid3-hd-checker-on');
this.selectAll();
}
}
}
}
grid.render('grid-newbee');
<!-- ------------ 宽度、高度自适应 ----------------->
window.onresize=function(){
grid.setWidth(0);
grid.setWidth($("grid-newbee").offsetWidth);
grid.setHeight(0);
grid.setHeight($("grid-newbee").offsetHeight);
};
$("right").onresize=function(){
grid.setWidth(0);
grid.setWidth($("grid-newbee").clientWidth);
grid.setHeight(0);
grid.setHeight($("grid-newbee").clientHeight);
};
<!-- ------------ search and reset ----------------->
Ext.get('searchBtn').on('click', function(){
filterText01 = $('local-states').value;
store.on('beforeload', function() {
store.baseParams = {
filterText:filterText01
};
});
store.load({params:{start:0, limit:newBeePageSize}});
grid.getView().refresh();
});
Ext.get('resetBtn').on('click', function(){
filterText01 = $('local-states').value = '';
store.on('beforeload', function() {
store.baseParams = {
filterText:filterText01
};
});
store.load({params:{start:0, limit:newBeePageSize}});
grid.getView().refresh();
});
});