<link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var conn = new Ext.data.Connection({
//userinfojson.ashx格式已写在另一篇文章中
url: "userinfojson.ashx"
})
var proxy = new Ext.data.HttpProxy(conn);
var store = new Ext.data.Store({
proxy: proxy,
reader: new Ext.data.JsonReader(
{ root: 'userlist' },
["id", "name", "passwd", "gender", "roleid", "stateid"]
)
});
store.load();
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
function GetSex(val) {
if (val > 0) {
return '<span style="color:green;">男</span>';
}
else {
return '<span style="color:red;">女</span>';
}
}
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ id: 'id', header: '个人编号', width: 60, sortable: true, dataIndex: 'id' },
{ header: '个人姓名', width: 60, sortable: true, dataIndex: 'name' },
{ header: '个人密码', width: 70, sortable: true, dataIndex: 'passwd' },
{ header: '性别', width: 70, sortable: true,renderer:GetSex, dataIndex: 'gender' },
{ header: '权限编号', width: 70, sortable: true, dataIndex: 'roleid' },
{ header: '状态编号', width: 70, sortable: true, dataIndex: 'stateid' }
],
stripeRows: true,
autoExpandColumn: 'id',
height: 110,
width: 600,
title: 'array-grid data',
stateful: true
});
grid.render('gridone');
})
</script>
<body>
<form id="form1" runat="server">
<div id="gridone"></div>
</form>
</body>