随笔 - 27  文章 - 1 评论 - 52 阅读 - 64245

ExtJS4学习笔记之Grid的使用

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

HTML代码：

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Grid-MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
  7.     <script type="text/javascript" src="http://www.cnblogs.com/bootstrap.js"></script>
  8.     <script type="text/javascript" src="http://www.cnblogs.com/locale/ext-lang-zh_CN.js"></script>
  9.     <script type="text/javascript" src="grid.js"></script>
  10. </head>
  12. <body>
  13. <div id="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.     });
  17.     
  18.     //创建数据源
  19.     var store = Ext.create('Ext.data.Store', {
  20.         model: 'MyData',
  21.         proxy: {
  22.            //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
  23.             type: 'ajax',
  24.             url: 'mydata.json',
  25.             
  26.             reader: {
  27.                 type: 'json',
  28.                 root: 'items',
  29.                 //totalProperty  : 'total'
  30.             }
  31.         },
  32.         autoLoad: true
  33.     });
  34.     
  35.     //创建Grid
  36.     var grid = 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: 'ExtJS4 Grid示例',
  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. var store = 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/j h:ia'}
  8.         ],
  9.         data: myData
  10.     });

数据类型分为以下几种：

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

原文链接： http://www.mhzg.net/a/20115/201151210270238.html
posted on   gmval  阅读(2547)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
Copyright © 2025 gmval
Powered by .NET 9.0 on Kubernetes Powered by: 博客园
点击右上角即可分享
微信分享提示