开发者社区> 科技小先锋> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ExtJS4.2学习(三)Grid表格

简介:
+关注继续查看

Ext中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid。在EXT中,表格控件必须包含列定义信息,并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义,表格的数据存储器由Ext.data.Store来定义。store负责把各种各样(如二维数组、JSON对象数组、XML文本等)的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式,这样就不需要为每种数据格式写一个对应的实现了。
制作一个简单的表格及属性说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript">
//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
    //定义列
    var columns = [
        {header:'编号',dataIndex:'id'}, //sortable:true 可设置是否为该列进行排序
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
      ];
    //定义数据
    var data =[
        ['1','张三','描述01'],
        ['2','李四','描述02'],
        ['3','王五','描述03'],
        ['4','束洋洋','思考者日记网'],
        ['5','高飞','描述05']
    ];
    //转换原始数据为EXT可以显示的数据
    var store = new Ext.data.ArrayStore({
        data:data,
        fields:[
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置
           {name:'name'},
           {name:'descn'}
        ]
    });
    //加载数据
    store.load();
           
    //创建表格
    var grid = new Ext.grid.GridPanel({
        renderTo:'grid'//渲染位置
        store:store, //转换后的数据
        columns:columns, //显示列
        stripeRows:true//斑马线效果
        //enableColumnMove: false, //禁止拖放列
        //enableColumnResize: false, //禁止改变列宽度
        loadMask:true//显示遮罩和提示功能,即加载Loading……
        forceFit:true //自动填满表格
    });
});
       
</script>
主要代码如上,注释部分已经写的很详细了,大家用到的时候可以参考下。最终效果如下:
ca175850446df6e75b22246bdd9d544d.jpg

另外,有什么想说的,欢迎大家在下面留言,大家一起讨论进步!



本文转自shyy8712872 51CTO博客,原文链接:http://blog.51cto.com/shuyangyang/1330020,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Elastic Cloud Kubernetes(ECK)安装Elasticsearch、Kibana实战教程
本文介绍了如何使用ECK在k8s集群中安装Elasticsearch、Kibana
785 0
Identity Server 4 - Hybrid Flow - Claims
前一篇 Identity Server 4 - Hybrid Flow - MVC客户端身份验证: https://www.cnblogs.com/cgzl/p/9253667.html Claims 我不知道怎么样翻译这个词比较好, 所以我一般就不翻译了.
1562 0
Android NDK开发系列教程4:对类变量进行操作
终于建了一个自己个人小站:https://huangtianyu.gitee.io,以后优先更新小站博客,欢迎进站,O(∩_∩)O~~ 通常我们也可以直接利用jni来访问和处理类的变量,不一定非要通过Java方法来操作Java类变量。
1160 0
Android项目实战(三十四):蓝牙4.0 BLE 多设备连接
  最近项目有个需求,手机设备连接多个蓝牙4.0 设备 并获取这些设备的数据。   查询了很多资料终于实现,现进行总结。   ---------------------------------------------------------------------------------------...
1026 0
流媒体服务器Wowza Streaming Engine 4安装升级教程
公司流媒体服务器运行的是wowzamediaserver 3.6 ,最近打算升级到Wowza Streaming Engine 4,其实wowza4发布也好长时间了,由于各种原因吧一直没有升级,今天跟大家分享下升级的过程。
1107 0
6963
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载