简单的表格显示，ext的面向对象思想。在表格中有很好的体现，在menu中更为明显
测试文件：
grid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ext2.1 表格实例</title>
<link type="text/css" rel="stylesheet" href="../_js/resources/css/ext-all.css" />
<script src="../_js/ext-base.js"></script>
<script src="../_js/ext-all.js"></script>
<script src="../_js/ext-lang-zh_CN.js"></script>
<script src="grid.js"></script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
grid.js：
// JavaScript Document
//cm:ColumnModel表格的列模型
Ext.onReady(function(){
Ext.QuickTips.init();
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable=true},//按照id排序
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name6','descn5']
];
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
/*
为了解决Store中的reader的name和grid中的cm的列值的对应问题，可以使用map
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.dataArrayReader({},[
{name:'id',mapping:0},
{name:'name',mapping:1},
{name:'descn',mapping:2}
])
});
*/
ds.load();
var grid = new Ext.grid.GridPanel({
el : 'grid',
ds : ds,
cm : cm
});
grid.render();
});
测试文件：
grid.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ext2.1 表格实例</title>
<link type="text/css" rel="stylesheet" href="../_js/resources/css/ext-all.css" />
<script src="../_js/ext-base.js"></script>
<script src="../_js/ext-all.js"></script>
<script src="../_js/ext-lang-zh_CN.js"></script>
<script src="grid.js"></script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
grid.js：
// JavaScript Document
//cm:ColumnModel表格的列模型
Ext.onReady(function(){
Ext.QuickTips.init();
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable=true},//按照id排序
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name6','descn5']
];
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
/*
为了解决Store中的reader的name和grid中的cm的列值的对应问题，可以使用map
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data),
reader : new Ext.dataArrayReader({},[
{name:'id',mapping:0},
{name:'name',mapping:1},
{name:'descn',mapping:2}
])
});
*/
ds.load();
var grid = new Ext.grid.GridPanel({
el : 'grid',
ds : ds,
cm : cm
});
grid.render();
});
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
