您的位置：首页 > Web前端 > JavaScript

ExtJs 之GridPanel实例2

2013-02-19 17:30 85 查看 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="../ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.4.0/ext-all.js"></script>
<link href="../ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="grid-div"></div>
<div id="binding-example" ></div>
<script>
function checkSex(val)
{
if(val=='0')
{
return '<span style=\"color:blue\">男</span>';
}
else
{
return '<span style=\"color:green\">女</span>';
}
}
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
//设置好表的列头
{header:'编号',dataIndex:'id',sortable:true}, //{首部显示文本,列对应的记录集字段,列是否排序(sortable)}
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'},
{header:'性别',dataIndex:'sex',sortable:true,renderer:checkSex},//renderer就是在读取该字段前执行的函数
{ header:'出生日期',dataIndex:'birthdate',renderer:Ext.util.Format.dateRenderer('m/d/Y')},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon   : '../ext-3.4.0/examples/shared/icons/fam/delete.gif',  // Use a URL in the icon config
tooltip: 'Sell stock',
handler: function(grid, rowIndex, colIndex) {
var rec = ds.getAt(rowIndex);
alert("Sell " + rec.get('name'));
}
}]
}

]) ;
var data = [
['1','张三','descn1','0','9/12 12:00am'],
['2','李四','descn2','1','9/12 12:00am'],
['3','王五','descn3','0','9/12 12:00am'],
['4','赵六','descn4','1','9/12 12:00am'],
['5','孙奇','descn5','0','9/12 12:00am']
] ;
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),//获取数据的方式   (用Ext.data.MemoryProxy专门解析JavaScript变量)
reader:new Ext.data.ArrayReader({},[  //如何解析这堆数据
{name: 'id' },
{name: 'name' },
{name: 'descn' },
{name:'sex' },
{name:'birthdate',type:'date',dateFormat: 'n/j h:ia'}
])
}) ;//远程读取数据使用ScriptTagProxy  如要从本地读取数据  需要将MemoryProxy改成PagingMemoryProxy
ds.load() ;//加载数据
var grid = new Ext.grid.GridPanel({
el:'grid-div',
ds: ds, //ds可以把任何格式的数据转化成grid可以使用的形式
cm: cm,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
width:505,
height:233
}) ;
grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);

});

grid.render() ;
//注意这些文件是有顺序的，最好放在render()下面，否则就运行不出来上面的内容
var ct = new Ext.Panel({
renderTo: 'binding-example',
frame: true,
title: 'Book List',
width: 540,
height: 400,
layout: 'border',
items: [
grid,
{
id: 'detailPanel',
region: 'center',
bodyStyle: {
background: '#ffffff',
padding: '7px'
},
html: 'Please select a book to see additional details.'
}
]
})

// define a template to use for the detail view
var bookTplMarkup = [
'id: <a href="" target="_blank">{id}</a><br/>',
'name: {name}<br/>',
'descn: {descn}<br/>',
'birthdate: {birthdate}<br/>'
];
var bookTpl = new Ext.Template(bookTplMarkup);//创建一个模版
}) ;
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航