模拟了一个数组，想将其渲染到一个GridPanel上显示，但是到最后的时候居然显示不出来。弄了很久终于找到问题所在。
页面代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ext array grid</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="scripts/extjs/ext-base.js"></script>
<script type="text/javascript" src="scripts/extjs/ext-all.js"></script>
<script type="text/javascript" src="scripts/js/gridpanel.js"></script>
</head>
<div id="gpanel" style="margin: 100,100,100,200;width: 600"></div>
</html>
注意这里的id为gpanel
js代码如下：
Ext.onReady(function(){
//创建表模型
var model = new Ext.grid.ColumnModel(
[
{header:'编号',dataIndex:'id',width:40},//dataIndex : String 要绑定的Store之Record字段名
{header:'名称',dataIndex:'name'},
{header:'性别',dataIndex:'gender'},
{header:'描述',dataIndex:'description'}
]
);
//测试数据
var data =
[
['1','kevin','male','a good boy'],
['2','shower','female','a good boy'],
['3','joey','male','a good boy'],
['4','smith','female','a good boy']
];
//创建store存储数据
var ds = new Ext.data.Store(
{
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},
[
{name:'id'},
{name:'name'},
{name:'gender'},
{name:'description'}
]
)
}
);
//装载数据
ds.load();
//创建gridpanel展现数据
var panel = new Ext.grid.GridPanel({
cm:model,
store:ds,
autoHeight:true,
autoWidth:true
}
);
panel.renderTo("gpanel") //01
});
页面无法渲染，原来问题在01处。有以下几种修改方法：
//创建gridpanel展现数据
var panel = new Ext.grid.GridPanel({
applyTo:gpanel, //02
cm:model,
store:ds,
autoHeight:true,
autoWidth:true
}
);
// panel.render(document.getElementById("gpanel")); //03
panel.render(); //04
//使用panel.renderTo("gpanel")报错
添加02 04，或者注释掉02 04 只是添加03
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
