EXT里的分页

todayapple

浏览: 40795 次
性别:
来自: 北京

最近访客更多访客>>

springstudent

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX—EXT2.0

EXT HTML 工作

<!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){
if ( value == 'male')
{
return "<span style='color:red;font-weight:bold;'>男</span><img src='drop-no.gif' />";
} 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里的EditorGridPanel | 面试题

2008-07-25 10:04
浏览 1114
评论(0)
论坛回复 / 浏览 (0 / 2014)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论