Ext Grid 综合
今晚,说不出的高兴,折磨了我好久的Grid终于可以按搜索条件分页了,激动啊....
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->
function
listStudent() {
function renderSex(value) {
if (value == 'boy') {
return " 男 " ;
} else {
return " 女 " ;
}
}
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {
header : '编号',
dataIndex : 'id',
width : 80 ,
sortable : true
}, {
header : '名称',
dataIndex : 'name',
width : 80
}, {
header : '性别',
dataIndex : 'sex',
renderer : renderSex
}, {
header : '日期',
dataIndex : 'date',
width : 100 ,
renderer : Ext.util.Format.dateRenderer('Y - m - d')
}, {
header : '描述',
dataIndex : 'descn',
width : 200
}]);
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : ' / ext / list.jspa'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'total',
root : 'persons'
}, [{
name : 'id'
}, {
name : 'name'
}, {
name : 'sex'
}, {
name : 'date',
type : 'date',
dateFormat : 'Y - m - dTH:i:s'
}, {
name : 'descn'
}])
});
ds.load({
params : {
start : 0 ,
limit : 18
}
});
ds.on('beforeload', function (){
Ext.apply(
this .baseParams,
{
title:Ext.get('title').dom.value
});
});
var grid = new Ext.grid.GridPanel({
el : 'grid',
ds : ds,
cm : cm,
sm : sm,
border : false ,
autoExpandColumn : 5 ,
tbar : ['关键字查询：', {
xtype : 'textfield',
width : 200 ,
id : 'title',
name : 'title'
}, {
text : '搜索',
iconCls : 'search',
handler : function () {
ds.load({
params : {
start : 0 ,
limit : 18 ,
title : Ext.get('title').dom.value
}
})
}
}, {
xtype : 'tbseparator'
}, {
text : '发布',
iconCls : 'edit'
}, {
xtype : 'tbseparator'
}, {
text : '查看',
iconCls : 'copy'
}, {
xtype : 'tbseparator'
}, {
text : '刷新',
iconCls : 'refresh'
}, {
xtype : 'tbseparator'
}, {
text : '回复',
iconCls : 'post'
}, {
xtype : 'tbseparator'
}, {
text : '删除',
iconCls : 'del'
}],
bbar : new Ext.PagingToolbar({
pageSize : 18 ,
store : ds,
displayInfo : true ,
displayMsg : '第{ 0 } 到 { 1 } 条数据 共{ 2 }条',
emptyMsg : '没有数据'
})
});
grid.render();
}
Ext.onReady(listStudent);
function renderSex(value) {
if (value == 'boy') {
return " 男 " ;
} else {
return " 女 " ;
}
}
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {
header : '编号',
dataIndex : 'id',
width : 80 ,
sortable : true
}, {
header : '名称',
dataIndex : 'name',
width : 80
}, {
header : '性别',
dataIndex : 'sex',
renderer : renderSex
}, {
header : '日期',
dataIndex : 'date',
width : 100 ,
renderer : Ext.util.Format.dateRenderer('Y - m - d')
}, {
header : '描述',
dataIndex : 'descn',
width : 200
}]);
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : ' / ext / list.jspa'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'total',
root : 'persons'
}, [{
name : 'id'
}, {
name : 'name'
}, {
name : 'sex'
}, {
name : 'date',
type : 'date',
dateFormat : 'Y - m - dTH:i:s'
}, {
name : 'descn'
}])
});
ds.load({
params : {
start : 0 ,
limit : 18
}
});
ds.on('beforeload', function (){
Ext.apply(
this .baseParams,
{
title:Ext.get('title').dom.value
});
});
var grid = new Ext.grid.GridPanel({
el : 'grid',
ds : ds,
cm : cm,
sm : sm,
border : false ,
autoExpandColumn : 5 ,
tbar : ['关键字查询：', {
xtype : 'textfield',
width : 200 ,
id : 'title',
name : 'title'
}, {
text : '搜索',
iconCls : 'search',
handler : function () {
ds.load({
params : {
start : 0 ,
limit : 18 ,
title : Ext.get('title').dom.value
}
})
}
}, {
xtype : 'tbseparator'
}, {
text : '发布',
iconCls : 'edit'
}, {
xtype : 'tbseparator'
}, {
text : '查看',
iconCls : 'copy'
}, {
xtype : 'tbseparator'
}, {
text : '刷新',
iconCls : 'refresh'
}, {
xtype : 'tbseparator'
}, {
text : '回复',
iconCls : 'post'
}, {
xtype : 'tbseparator'
}, {
text : '删除',
iconCls : 'del'
}],
bbar : new Ext.PagingToolbar({
pageSize : 18 ,
store : ds,
displayInfo : true ,
displayMsg : '第{ 0 } 到 { 1 } 条数据 共{ 2 }条',
emptyMsg : '没有数据'
})
});
grid.render();
}
Ext.onReady(listStudent);