GridPanel页面渲染的问题
模拟了一个数组,想将其渲染到一个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,//02cm:model,store:ds,autoHeight:true,autoWidth:true});//panel.render(document.getElementById("gpanel")); //03panel.render(); //04//使用panel.renderTo("gpanel")报错 添加02 04,或者注释掉02 04 只是添加03
页:
[1]