|
// ext-grid.2.x
Ext.onReady(function(){
// 定义一个checkBox
var sm =
new Ext.grid.CheckboxSelectionModel();
sm.handleMouseDown =
Ext.emptyFn;
// 定义一个ColumnModel，表头中有四列
var cm = new
Ext.grid.ColumnModel([
sm,
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
/*===================== 判断红男绿女 =====================*/
function
myRenderSex(value){
if (value == 'male'){
return "<span
style='color:red;font-weight:bold;'> 红男 </span><img
src='\images\\male.png' />";
}else{
return "<span
style='color:green;font-weight:bold;'> 绿女 </span><img
src='\images\\fmale.png' />";
}
}
/*===================== 察看详细 =====================*/
function
renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var
str = "<input type='button' value='查看详细信息' onclick='alert(\""
+
"这个单元格的值是：" + value + "\\n"
+
"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:"
+ cellmeta.css + "}\\n" +
"这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里：" + store +
"，随便用吧。" +
"\")'>";
return str;
}
/*===================== 二维数组 =====================*/
/* ArrayData:添加数据
*/
var data =
[
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
/* ArrayReader
*
ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据。
*
Ext.data.MemoryProxy，它是专门用来解析js变量的。你可以看到，我们直接把data作为参数传递进去了。
*/
var ds
= new Ext.data.Store({
/*
proxy: new
Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({},
[
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name:
'name',mapping: 2},
{name: 'descn',mapping: 3}
])
*/
proxy:
new Ext.data.HttpProxy({url:'gridJsonData.jsp'}),
reader: new
Ext.data.JsonReader({
totalProperty: 'totalProperty',
root:
'root'
}, [
{name: 'id'},
{name: 'name'},
{name:
'descn'}
])
});
/* 装配 */
/*
注意：Ext.grid.Grid的第一个参数是渲染的id，
对应在html里应该有一个 <div
id="grid"></div>的东西，这样grid才知道要把自己画到哪里。
创建完grid以后，还要用grid.render()方法，让grid开始渲染，这样才能显示出来。
*/
cm.defaultSortable = true; // 设置列可排序
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm:
cm,
//sm: sm，
// 定义分页
bbar: new
Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo:
true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg:
"没有记录"
}),
sm: sm,
title: "Grid 例子",
height:
300
});
grid.on('rowclick', function(grid,t) {
if(sm.isSelected(t))
sm.deselectRow(t);
else
sm.selectRow(t,true);
});
ds.load({params:{start:0,
limit:10}});
grid.render();
})
|