<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<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>
<script type="text/javascript" src="../examples.js"></script>
<SCRIPT>
Ext.onReady(function(){
//自定义列,可以更改显示内容,比如 常用到的 0:男 1:女
function check(value)
{
if (value=='195154')
{
return '<span style="color:red;font-weight:bold;">内容已更改</span>';
}
else
{
return value;
}
}
//跨域读取数据使用 ScriptTagProxy url=http://extjs.com/forum/topics-remote.php
//可以直接访问 http://extjs.com/forum/topics-remote.php 查看json 数据形式
var store = new Ext.data.Store({
proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
},[
'post_id','topic_title','author'
])
});
store.load({params:{start:0, limit:10}});
//定义勾选框,不需要可不必定义
var sm = new Ext.grid.CheckboxSelectionModel();
//定义列
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号,不需要可不必定义
sm,//勾选框,不需要可不必定义
{header:'列1',dataIndex:'post_id',width:170,sortable:true,renderer:check},
// 生成列,sortable为列排序,不需要设置为false,默认false,renderer为该列增加自定义函数
{header:'列2',dataIndex:'topic_title',width:170,sortable:true},
{header:'列3',dataIndex:'author',width:170}
]);
//生成表格
var grid = new Ext.grid.GridPanel({
renderTo:'show',
title:"表格",
height:400,
width:600,
trackMouseOver:false,
loadMask: {msg:'正在加载数据,请稍侯……'},
cm:colM,
sm:sm,
store:store,
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: "没有数据"
})
});
});
</SCRIPT>
<DIV id=show></DIV>
</body>
</html>
这个例子,可以参考!!