`
dowhathowtodo
  • 浏览: 775303 次
文章分类
社区版块
存档分类
最新评论

ExtJS4学习笔记(七)---Grid的使用

 
阅读更多

Extjs4 Grid创建还是比较容易的，难记、难理解的地方，也就是数据的获取。下面，就创建一个最简单的Grid组件，后面，我们会逐渐丰富这个Grid的功能。

HTML代码：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>Grid-MHZG.NET</title>
  6. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  7. <scripttype="text/javascript"src="../../bootstrap.js"></script>
  8. <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>
  9. <scripttype="text/javascript"src="grid.js"></script>
  10. </head>

  12. <body>
  13. <divid="demo"></div>
  14. </body>
  15. </html>

grid.js：

  1. Ext.require([
  2. 'Ext.grid.*',
  3. 'Ext.data.*'
  4. ]);
  5. Ext.onReady(function(){
  6. Ext.define('MyData',{
  7. extend:'Ext.data.Model',
  8. fields:[
  9. //第一个字段需要指定mapping，其他字段，可以省略掉。
  10. {name:'UserName',mapping:'UserName'},
  11. 'Sex',
  12. 'Age',
  13. 'XueHao',
  14. 'BanJi'
  15. ]
  16. });
  18. //创建数据源
  19. varstore=Ext.create('Ext.data.Store',{
  20. model:'MyData',
  21. proxy:{
  22. //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
  23. type:'ajax',
  24. url:'mydata.json',
  26. reader:{
  27. type:'json',
  28. root:'items',
  29. //totalProperty:'total'
  30. }
  31. },
  32. autoLoad:true
  33. });
  35. //创建Grid
  36. vargrid=Ext.create('Ext.grid.Panel',{
  37. store:store,
  38. columns:[
  39. {text:"姓名",width:120,dataIndex:'UserName',sortable:true},
  40. {text:"性别",flex:1,dataIndex:'Sex',sortable:false},
  41. {text:"年龄",width:100,dataIndex:'Age',sortable:true},
  42. {text:"学号",width:100,dataIndex:'XueHao',sortable:true},
  43. {text:"班级",width:100,dataIndex:'BanJi',sortable:true}
  44. ],
  45. height:400,
  46. width:480,
  47. x:20,
  48. y:40,
  49. title:'ExtJS4Grid示例',
  50. renderTo:'demo',
  51. viewConfig:{
  52. stripeRows:true
  53. }
  54. })
  55. })

mydata.json：当然，你也可以使用任意服务端程序返回json数据（asp?.net?java还是php，看你的爱好了）

  1. {
  2. "items":[
  3. {
  4. "UserName":"李彦宏",
  5. "Sex":"男",
  6. "Age":25,
  7. "XueHao":00001,
  8. "BanJi":"一班"
  9. },
  10. {
  11. "UserName":"马云",
  12. "Sex":"男",
  13. "Age":31,
  14. "XueHao":00002,
  15. "BanJi":"二班"
  16. },
  17. {
  18. "UserName":"张朝阳",
  19. "Sex":"男",
  20. "Age":30,
  21. "XueHao":00003,
  22. "BanJi":"一班"
  23. },
  24. {
  25. "UserName":"朱俊",
  26. "Sex":"男",
  27. "Age":28,
  28. "XueHao":00004,
  29. "BanJi":"一班"
  30. },
  31. {
  32. "UserName":"丁磊",
  33. "Sex":"男",
  34. "Age":29,
  35. "XueHao":00005,
  36. "BanJi":"二班"
  37. },
  38. {
  39. "UserName":"李国军",
  40. "Sex":"男",
  41. "Age":30,
  42. "XueHao":00006,
  43. "BanJi":"二班"
  44. },
  45. {
  46. "UserName":"王志宝",
  47. "Sex":"男",
  48. "Age":25,
  49. "XueHao":00007,
  50. "BanJi":"一班"
  51. }
  52. ]
  53. }

Extjs4 Grid组件的数据需要几点注意。

第一，就是数据类型，我们可以指定数据类型，比如：

  1. varstore=Ext.create('Ext.data.ArrayStore',{
  2. fields:[
  3. {name:'company'},
  4. {name:'price',type:'float'},
  5. {name:'change',type:'float'},
  6. {name:'pctChange',type:'float'},
  7. {name:'lastChange',type:'date',dateFormat:'n/jh:ia'}
  8. ],
  9. data:myData
  10. });

数据类型分为以下几种：

1、auto（默认）
2、string
3、int
4、float
5、boolean
6、date

第二：Ext.data.Model，示例中，只指定了一个mapping，那么第一个mapping是必须要指定的，从第二个开始，我们就不需要再去指定mapping了，Extjs很聪明，他会根据数据来判断需要的mapping。


分享到：
| ExtJS4学习笔记(五)---VBox的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs4.0学习笔记

    ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4...

    extjs4 学习笔记源码

    exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net

    Extjs4.0学习与开发笔记

    Extjs4.0学习与开发笔记 描述了菜单的实现、带搜索的Grid，带checkbox的可编辑的Grid等知识点，并附实现代码

    extjs 学习笔记 四 带分页的grid

    因此，现在几乎所有的grid控件都会支持分页功能。extjs也不例外，它对分页也提供了强大而方便的支持，使得我们在分页处理上可以得心应手。 在extjs中，类Ext.PagingToolbar封装了关于分页的操作，该类从Toolbar继承...

    extjs 学习笔记（三） 最基本的grid

    今天学习extjs中的grid，它可以说是功能强大，无出其右，只有你想不到的，没有它做不到的，呵呵，好像是有点夸张了。好，不说废话了，我们就从最简单的grid开始，一步步来看看extjs给我们提供的grid究竟给我们提供...

    extjs实例与学习资料

    因为前段时间有两个专案要用到extjs技术，所以自己学了一段时间，在专案才发现extjs的强大，无论对于开发者还是使用者他都是一场视觉盛宴，这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料，里面包括...

    EXTJS 学习笔片段1

    EXTJS 学习笔片段1 Form ComboBox 远程ComboBox 替代页面上已经存在的Select控件 Grid EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口（模态窗口） ...

    ext 4.0 学习笔记.doc

    ext 4.0 学习笔记（1）Array Grid 2011-09-20 13:18 860人阅读 评论(1) 收藏 举报 今天刚开始接触EXT，直接跳过2.2等较旧版本；由于网上的中文资料几乎都是2.2，并且我也是刚开始接触EXT，所以用笔记的方式记录我...

Magicbox
Global site tag (gtag.js) - Google Analytics