ext 怎么分页
ext有自带的控件可以分页，但是我不懂，希望有哪位大大，能把分页代码的例子给我，急用啊！！！能用的话，肯定加分！！...
ext 有自带的控件可以分页，但是我不懂，希望有哪位大大，能把分页代码的例子给我，急用啊 ！！！
能用的话，肯定加分！！ 展开
能用的话，肯定加分！！ 展开
2个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<br>
<script>
Ext.onReady(function(){
//全选复选框
var sm = new Ext.grid.CheckboxSelectionModel();
//设置列
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'名称',dataIndex:'name',width:80},
{id:'descn',header:'描述',dataIndex:'descn',width:200,renderer:renderDescn},
{header:'性别',dataIndex:'sex',width:80,renderer: function (value){ <br/>if ( value == 'male') <br/>{ <br/>return "<span style='color:red;font-weight:bold;'>男</span><img src='drop-no.gif' />"; <br/>} else {
return "<span style='color:green;font-weight:bold;'>女</span><img src='drop-add.gif' />";
}
}},{
header:'日期列',
dataIndex:'date',
editor: new Ext.grid.GridEditor(new Ext.form.DateField( {
format:'Y-m-d',
minValue:'2007-12-14',
disabledDays:[0,6],
disabledDaysText:'只能选择工作日'
} )),
renderer: function(value) {
return value.format("Y-m-d");
}
}
//{header:'日期',dateIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
//定义数据
var data = [
['1','啊','descn1','male',new Date()],
['2','波','descn2','female',new Date()],
['3','车','descn3','male',new Date()],
['4','衣','descn4','female',new Date()],
['5','服','descn5','male',new Date()],
['6','波','descn2','female',new Date()],
['7','车','descn3','male',new Date()],
['8','衣','descn4','female',new Date()]
];
//数据转换
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name:'id'},
{name:'name'},
{name:'descn'},
{name:'sex'},
{name:'date'}
//{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
]),
sortInfo: {field:"name", direction:"ASC"}
});
//store.load();
//取得描述列的信息
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;
}
//定义表格
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width:650,
height: 250,
frame:true,
//loadMask: true,
stripeRows:true,
store: store,
cm: cm,
sm:sm,
//viewConfig:{
// forceFit: true
//}
//autoExpandColumn:'descn',
//添加分页工具条
bbar:new Ext.PagingToolbar({
pageSize:2,
store:store,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录，一共{2}条',
emptyMsg:"没有记录"
})
});
//数据加载
store.load();
//删除记录
Ext.get('remove').on('click',function() {
store.remove(store.getAt(1));
grid.view.refresh();
});
//拖动表格
var rz = new Ext.Resizable('grid', {
wrap:true,
minHeight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid.syncSize,grid);
//添加右键菜单
var contextmenu = new Ext.menu.Menu({
id:'theContextMenu',
items: [{
text:'查看详情',
handler: function() {
}
},
{
text:'菜单二',
handler: function() {}
}]
});
//调用右键菜单
grid.on("rowcontextmenu",function(grid, rowIndex,e) {
e.preventDefault();
grid.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});
});
</script>
<table border="1" align="center">
<tr>
<td><font color="red">grid表格样式如下：</font></td>
</tr>
<tr>
<td><div id="grid"> </div></td>
</tr>
<tr>
<td><input type="button" id="remove" value="删除第二行"/></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<br>
<script>
Ext.onReady(function(){
//全选复选框
var sm = new Ext.grid.CheckboxSelectionModel();
//设置列
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'名称',dataIndex:'name',width:80},
{id:'descn',header:'描述',dataIndex:'descn',width:200,renderer:renderDescn},
{header:'性别',dataIndex:'sex',width:80,renderer: function (value){ <br/>if ( value == 'male') <br/>{ <br/>return "<span style='color:red;font-weight:bold;'>男</span><img src='drop-no.gif' />"; <br/>} else {
return "<span style='color:green;font-weight:bold;'>女</span><img src='drop-add.gif' />";
}
}},{
header:'日期列',
dataIndex:'date',
editor: new Ext.grid.GridEditor(new Ext.form.DateField( {
format:'Y-m-d',
minValue:'2007-12-14',
disabledDays:[0,6],
disabledDaysText:'只能选择工作日'
} )),
renderer: function(value) {
return value.format("Y-m-d");
}
}
//{header:'日期',dateIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
//定义数据
var data = [
['1','啊','descn1','male',new Date()],
['2','波','descn2','female',new Date()],
['3','车','descn3','male',new Date()],
['4','衣','descn4','female',new Date()],
['5','服','descn5','male',new Date()],
['6','波','descn2','female',new Date()],
['7','车','descn3','male',new Date()],
['8','衣','descn4','female',new Date()]
];
//数据转换
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name:'id'},
{name:'name'},
{name:'descn'},
{name:'sex'},
{name:'date'}
//{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
]),
sortInfo: {field:"name", direction:"ASC"}
});
//store.load();
//取得描述列的信息
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;
}
//定义表格
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width:650,
height: 250,
frame:true,
//loadMask: true,
stripeRows:true,
store: store,
cm: cm,
sm:sm,
//viewConfig:{
// forceFit: true
//}
//autoExpandColumn:'descn',
//添加分页工具条
bbar:new Ext.PagingToolbar({
pageSize:2,
store:store,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录，一共{2}条',
emptyMsg:"没有记录"
})
});
//数据加载
store.load();
//删除记录
Ext.get('remove').on('click',function() {
store.remove(store.getAt(1));
grid.view.refresh();
});
//拖动表格
var rz = new Ext.Resizable('grid', {
wrap:true,
minHeight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid.syncSize,grid);
//添加右键菜单
var contextmenu = new Ext.menu.Menu({
id:'theContextMenu',
items: [{
text:'查看详情',
handler: function() {
}
},
{
text:'菜单二',
handler: function() {}
}]
});
//调用右键菜单
grid.on("rowcontextmenu",function(grid, rowIndex,e) {
e.preventDefault();
grid.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});
});
</script>
<table border="1" align="center">
<tr>
<td><font color="red">grid表格样式如下：</font></td>
</tr>
<tr>
<td><div id="grid"> </div></td>
</tr>
<tr>
<td><input type="button" id="remove" value="删除第二行"/></td>
</tr>
</table>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort('lastpost', 'desc');
// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
var pagingBar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
// create the Data Store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});
store.setDefaultSort('lastpost', 'desc');
// pluggable renders
function renderTopic(value, p, record){
return String.format(
'<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
var pagingBar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
