ExtJs总结(一)
关键字: extjs---grid
问题：使用Grid时，如果出现列标题与复选框错位
使用定义样式
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
.ext-ie8 .x-menu-item-icon,
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
解决
使用grid的遮罩提示时，一定要设表格的height和width。
enableColumnMove和enableColumnResize为false表示禁用拖放列和改变列宽度功能。
默认情况下一次可以选一行或多行。
stripeRows:true显示为斑马线。
问题：自主决定每列的宽度
1.手动指定
cm(columnmudule)支持给每列设置宽度,如果不指定则默认的宽度为100px.
var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度},....});
2.自动填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});
会按照设置的宽度之间的比例进行显示，而不是按照设置的宽度。
3.指定自动填充剩余空间的列
也可以指定一列来完成该操作，但该操作要求该列必须定义时指定id值。
var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度,id:'id标识属性'},....});
接下来设定
Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列标识'});
问题：让列支持排序
在建立列模型时指定storable:true
问题：中文排序
1.为Ext.data.Store设置一个storeInfo:{field:'列名',direction:'ASC|DESC'}属性。
2.重写Ext.data.Store的applySort函数
Ext.data.Store.prototype.applySort = function() {
if (this.sortInfo && !this.remoteSort) {
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2) {
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
if (typeof(v1) == "string") {
return v1.localeCompare(v2);
}
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction, fn);
if(this.snapshot && this.snapshot != this.data) {
this.snapshot.sort(s.direction, fn);
}
}
};
该函数可以加在ext-all.js文件的未尾。或者放在html页面的最上面，保证在EXT初始化之后，实际代码调用之前执行。
问题：显示日期类型数据列
1.在store的reader属性中增加type和dataFormat两个属性
{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字符串必须要与实际日期的内容相对应。
如日期为2009-5-2 12:30:58 则格式化字符串为'Y-j-n H:i:s'
如日期为2009-05-02 12:30:58 则格式化字符串为'Y-m-d H:i:s'
详细字符串的含义见ext api doc之Date类
以保证能够读取到正确的日期值。
2.在ColumnModel中新加配置
{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年j月n日')}
其中renderer的格式字符串表示显示的格式是什么。
问题：如何在单元格时显示红色的字或图片，按钮等
在ColumnModule的相应列的属性中添加renderer:渲染函数
如:
var cm=new Ext.grid.ColumnModel([
{head:'列头',dataIndex:'数据源索',renderer:渲染函数}]);
渲染函数：
function 函数名(value){
if(value==值）｛
return html+css代码;
}
else
{
return 其它的html+css;
}
}
问题：如何设置表格的表头右键提示为汉字内容
Ext.grid.GridPanel可以看作控制器，Ext.data.Store可以看作模型，Ext.grid.GridView可以看作视图.在构建Ext.grid.GridPanel实例时添加viewConfig属性
var gid=new Ext.grid.GridPanel(
{renderTo:'grid',
store:store,
cm:cm,
viewConfig:{
columnsText:'显示的列',
scrollOffset:30,
sortAscText:'升序',
sortDescText:'降序'
//forceFit:true
}
});
问题：用grid实现分页显示
１.为Grid添加分页工具条
在GridPanel中进行设置
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize:3,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
store.load();
在使用分页工具条之后，store.load()必须发生在构造GridPanel之后.而且数据源不能使用Ext.data.SimpleStore.Grid每次都会显示数据源中所有的数据.因此数据一定要先在后台分好.
如果要在Grid的头部显示分页工具条，可以将bbar改为tbar。
２.后台分页
后台jsp的做法：
①取得开始页号与页大小
String start = request.getParameter("start");
String limit = request.getParameter("limit");
②访问数据库取得数据
③将数据输出为json字符串
格式为：{totalProperty:总记录数,root:[｛.....｝，｛.....｝，....]),其中root数组存放当前页的数据.
前台页面的做法：
①修改Store
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:jsp的url'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
②向服务器传参
store.load({params:{start:0,limit:10}});
Grid每次都会显示全部在root中的数据，而不论totalProperty的值是多少，所以分页时root数组中的数据由后台jsp控制。
3.前台分页
EXT中的Grid是把得到的数据一次性显示在表格里，并没有直接为我们提供内存分页的功能，但是在Ext的examples/locale/PapingMemoryProxy.js，它可以从本地数据读取数据同，并实现内存分页。
步骤如下：
①将PagingMemoryProxy.js导入html
②把以前的MemroryProxy换成PagingMemoryProxy
③调用store.load({params:{start:0,limit:3}});显示最开始的3条记录。
4.后台排序
在默认的情况下，Grid只能对当前页的数据进行排序，如果对所有的数据排序，则需要将排序信息提交到后台，由后台将信息组装到SQL里，然后再由后台将处理好的数据返回给前台。
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'09_01.jsp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]),
remoteSort: true
});
其中remoteSort: true表示允许后台排序，这样在排序时就会有变化，不会立即显示出排序的结果，而是向后台提交两个参数，分别是sort和dir，表示要排序的字段与升序或降序。
jsp则进行相应的处理
String start = request.getParameter("start");
String limit = request.getParameter("limit");
String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
再进行数据库分页，并返回json格式的分页数据。
