<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>onReady</title>
<link rel="stylesheet" type="text/css"
href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script>
function a()
{
function renderSex(value) {
if (value == 'boy') {
return "<span style='color:red;font-weight:bold;'>男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>女</span>";
}
}
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}
]);
alert(cm);
var data = [
['1','name1','girl','1970-01-15T02:58:04','descn1'],
['2','name2','boy','1970-01-15T02:58:04','descn2'],
['3','name3','girl','1970-01-15T02:58:04','descn3'],
['4','name4','girl','1970-01-15T02:58:04','descn4'],
['5','name5','boy','1970-01-15T02:58:04','descn5']
];
alert(data);
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'sex'},
{name: 'date', type:'date',dateFormat:'Y-m-dTH:i:s'},
{name: 'descn'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
sm: sm,
autoExpandColumn: 6,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: "沒有記錄"
})
});
grid.render();
}
Ext.onReady(a);
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>