Extjs初学者,请教一个关于使用Ext创建一个表格的问题

杨_静 2013-09-25 02:33:16
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext_Table,表格的练习</title>
<!-- 点击确定按钮,获取文本框中的值 -->
<!--导入Ext3.2-->
<link rel="stylesheet" type="text/css" href="extjs3.2/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs3.2/ext-all.js"></script>
<script type="text/javascript" src="extjs3.2/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.data.Store.prototype.applySort = function(){
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1,r2){
var v1 = st(r1.data[f]),v2 = st(r2.data[f]);
if(typeof(v1) == "string"){
return v1.localeCompare(v2);
}
return v1>v2?1:(v1<v2?-1:0)
};
this.data.sort(s.direction,fn);
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction,fn);
}
}
};

//搭建表格的骨架
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable:true}, //此处的sortable可以理解为排序的意思
{header:'性别',dataIndex:'sex',sortable:true, renderer:function(value){
if(value == 'sex1'){
return "<span style='color:red;font-weight:bold;'>红男</span>"
}else{
return "<span style='color:green;font-weight:bold;'>绿女</span>"
}
}},
{header:'名称',dataIndex:'name',sortable:true},
{header:'描述',dataIndex:'descn',sortable:true}
]);
//为搭建好的表格骨架填充数据
var data = [
['1','sex1','name1','descn1'],
['2','sex2','name2','descn2'],
['3','sex1','name3','descn3'],
['4','sex2','name4','descn4'],
['5','sex1','name5','descn5'],
];
//利用Ext.data.Store进行数据的转换
var ds = new Ext.data.Store({
//store中有两个参数:1、proxy:从哪里获得数据,2、reader:如何解析数据
proxy:new Ext.data.MemoryProxy(data),
//Ext.data.MemoryProxy 该方法是用来解析js变量的
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'descn'}
]),
//Ext.data.ArrayReader该方法是用来解析数组的,这里的含义是没行读取三个数据
sortInfo:{field:"name",direction:"ASC"}
});
ds.load();//对数据的初始化

var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
});
s
grid.render();

});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>


代码就是这些;但是效果却不是我晓得效果,练习上面显示的效果图是:

但是我自己做了过后却是这般效果:

它只显示了一行,需要鼠标滚动才能看到下面的其他数据。
我想知道我到底是哪儿没设置好呢,还是哪儿用错方法了望各位大神能帮帮小弟
...全文
389 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
php 复制过去 直接失败了 创建表格那段代码执行不下去了.....悲催
杨_静 2013-10-08
  • 打赏
  • 举报
回复
引用 4 楼 yangqiu0928 的回复:
[quote=引用 3 楼 u012141686 的回复:] [quote=引用 1 楼 yangqiu0928 的回复:] 你用的是什么浏览器?
所有的浏览器(IE9,谷歌,火狐)我都试了一遍,还是一样的显示结果[/quote] 跟RP有关系吗,我把你的代码复制下来,在我这运行显示良好。 这事在goole下,IE下运行有问题[/quote] 你用extsdk是多少版本的啊!!
niss 2013-09-27
  • 打赏
  • 举报
回复
ext好看是好看,关键是javascript代码太难维护了,居然还要收费,最终我放弃了这个东西
练习Crazy 2013-09-27
  • 打赏
  • 举报
回复
var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm, width: 200; //试试设置一下大小 height:200; }); <div id="grid" style="width: 200px; height: 200px;"></div>
shayebuhui0 2013-09-27
  • 打赏
  • 举报
回复
引用 3 楼 u012141686 的回复:
[quote=引用 1 楼 yangqiu0928 的回复:]
你用的是什么浏览器?


所有的浏览器(IE9,谷歌,火狐)我都试了一遍,还是一样的显示结果[/quote]

跟RP有关系吗,我把你的代码复制下来,在我这运行显示良好。 这事在goole下,IE下运行有问题
杨_静 2013-09-27
  • 打赏
  • 举报
回复
引用 1 楼 yangqiu0928 的回复:
你用的是什么浏览器?
所有的浏览器(IE9,谷歌,火狐)我都试了一遍,还是一样的显示结果
杨_静 2013-09-27
  • 打赏
  • 举报
回复
所有的浏览器(IE9,谷歌,火狐)我都试了一遍,还是一样的显示结果
杨_静 2013-09-27
  • 打赏
  • 举报
回复
引用 6 楼 niss 的回复:
ext好看是好看,关键是javascript代码太难维护了,居然还要收费,最终我放弃了这个东西
没办法啊! 我才毕业,现在经理叫我跟个项目就是采用extjs进行前台开发!
杨_静 2013-09-27
  • 打赏
  • 举报
回复
引用 5 楼 zxysoftware 的回复:
var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm, width: 200; //试试设置一下大小 height:200; }); <div id="grid" style="width: 200px; height: 200px;"></div>
你这样写我试过了! 这样写的后果就是页面什么都没有。
shayebuhui0 2013-09-26
  • 打赏
  • 举报
回复
你用的是什么浏览器?

67,549

社区成员

发帖
与我相关
我的任务
社区描述
J2EE只是Java企业应用。我们需要一个跨J2SE/WEB/EJB的微容器,保护我们的业务核心组件(中间件),以延续它的生命力,而不是依赖J2SE/J2EE版本。
社区管理员
  • Java EE
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧