[置顶] Lite-Ext 适合WebPage的轻量级Ext
在 google code
持续更新，这里停止
演示@google code
利用ext core重新简化实现 Ext.Grid，单用的话更节省网络带宽。
效果演示：这里
实现要点：
1.去除 ext grid 复杂的表格控制，直接用 table 实现
2.偷取ext 分页button素材，利用浮动重新实现，特效简化 (090531重新按照extjs分页思路实现特效)
/*
v1.0(20090425) 偷窃ext grid素材以及利用ext core 简化重新实现grid ,暂时去除store层(后期再加入)，
翻页事件留给用户,表格逻辑只包括数据显示，按钮隐藏
v1.1 jump 在当前页输入框直接输入数字然后按enter即可
v1.2 增加设置表格宽度，设置表格容器位置，行单击事件
v1.5 仿照Ext grid 调整数据格式,fromNo设置,curentPage不要设置了
v1.5.1((20090430)) 当总数为0时，显示工具按钮修正
v1.6(20090529) 采用事件委托，修正ie，chrome显示问题
v2.0(20090531) 添加ajax模式获取数据，loadAjax方法，底部分页按钮仿照extjs pagetoolbar美化,
增加整列宽度设置
v2.0.1(20090601) css子选择器 > 使用，避免分页条高亮
v2.0.2(20090602) _getPropertyValue('x.y.z') 取值容错处理
v2.2(20090604) 单元格内容调整单行显示
v2.3(20090604) 列宽拖放调整实现
v2.3.1(20090606) 列宽拖放滚动条问题处理
v2.4(20090625) 客户端表格单列排序增加sortable配置,待实现:多列联合排序
v2.4.1(20090718) 第一次鼠标经过行跳动修正
v2.4.2(20090720) 行手型鼠标可改变,selectMode='row'时才可点行反应
v2.4.3(20090805) numberLen 配置增加，表示计数宽度,pageSize 没有时隐藏分页工具条
v2.5(20090806) 加入destroy函数，可以从内存中清除掉Ext.destroy(grid);sIEve 测试ie6 完全释放
v2.5.1(20090820) tr border ie6 不能用,只能设在 td border上
v2.5.5(20090824) 加入 groupCol ，对指定列id的数据进行分组显示。
*/
使用代码 ：
可以ajax，或者 直接web page 切换
//可以初始设定数据
var grid=new Ext.ux.GridLite({
title:'生成表格标题',
//grid 容器id
id:'table_container_test',
//宽度，直接设css
width:'800px',
//标题头
headers:[{title:'我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们',id:'t1',show:true,width:'50px'},{title:'标题头2',id:'t2',show:true,
/*
A value less than zero, if, according to your sort criteria, a is less than b and should appear before b in the sorted array.
Zero, if a and b are equivalent for the purposes of this sort.
A value greater than zero, if a is greater than b for the purposes of the sort.
*/
sortable:function(i1,i2){
return i1-i2;
},
renderer:function(val,cur){
return'<span>'+'x'+'</span>'+'<span>'+cur['t2']+'</span>';
},width:'200px'
},{title:'标题头3',id:'t3.t4',show:true,sortable:true},{title:'标题头4',id:'t4',show:false,width:'50px'}],
//url 用来ajax 提交数据时 数据源，返回数据为 下述 pageRecords 个数对象
url:'xx.jsp',
//数据 二维数组 ,直接渲染到表格，与下面pageSize无关
//可设置是否显示，按从左到右设置显示的开始设置
pageRecords:{
datas:[
{t1:'我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们 我们',
t2:11,
't3':{t4:31},
t4:41
},
{t1:1,
t2:2,
't3':{t4:32},
t4:42
},
{t1:1,
t2:3,
't3':{t4:33},
t4:43
},
{t1:1,
t2:4,
't3':{t4:34},
t4:44
}
],
//分页参数,只是用来判断各个分页按钮的显示与否判断依据下面三个东西
//每页记录个数
pageSize:10,
//当前开始条数
fromNo:0,
//总共数据库中记录个数
totalRecord:2
}
});
//可以后期设置
/*
grid.loadData({
datas:[
{t1:1,
t2:2,
t3:3,
t4:4
},
{t1:1,
t2:2,
t3:3,
t4:5
},
{t1:1,
t2:2,
t3:3,
t4:6
},
{t1:1,
t2:2,
t3:3,
t4:7
}
],
pageSize:10,
fromNo:0,
totalRecord:4
});
*/
/*
ajax 模式的 获取数据方式，必须前面设置 url参数
grid.loadAjax({
'my':'1'
});
*/
//监控翻页事件
grid.on('firstPage',function(el){
alert('firstPage');
});
grid.on('nextPage',function(){
alert('nextPage');
});
grid.on('prevPage',function(){
alert('prevPage');
});
grid.on('lastPage',function(){
alert('lastPage');
});
grid.on('jump',function(el,newValue){
alert('jump :'+newValue);
});
grid.on('rowClick',function(rowData){
alert(rowData['t4']);
});
grid.on('refresh',function(){
this.disableButton('refresh');
alert('refresh');
this.enableButton('refresh');
});
