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

最新推荐文章于 2021-02-01 19:27:52 发布

zhaoqiliang527

最新推荐文章于 2021-02-01 19:27:52 发布

阅读量1.4k

点赞数

分类专栏： ExtJs4.0 ExtJs JS 文章标签： extjs float autoload json date flex

本文链接：https://blog.csdn.net/zhaoqiliang527/article/details/6733244

版权

ExtJs 同时被 3 个专栏收录

61 篇文章 0 订阅

订阅专栏

50 篇文章 0 订阅

订阅专栏

ExtJs4.0

22 篇文章 1 订阅

订阅专栏

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

HTML代码：

       
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Grid-MHZG.NET</title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
    <script type="text/javascript" src="../../bootstrap.js"></script> 
    <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script> 
    <script type="text/javascript" src="grid.js"></script> 
</head> 

 
<body> 
<div id="demo"></div> 
</body> 
</html>

grid.js：

       
   
Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*'
]); 
Ext.onReady(function(){ 
    Ext.define('MyData',{  
        extend: 'Ext.data.Model', 
        fields: [ 
            //第一个字段需要指定mapping，其他字段，可以省略掉。 
            {name:'UserName',mapping:'UserName'}, 
             'Sex', 
             'Age', 
             'XueHao', 
             'BanJi'
        ] 
    }); 
     
    //创建数据源 
    var store = Ext.create('Ext.data.Store', { 
        model: 'MyData',  
        proxy: { 
           //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可 
            type: 'ajax', 
            url: 'mydata.json', 
             
            reader: { 
                type: 'json', 
                root: 'items', 
                //totalProperty  : 'total' 
            } 
        }, 
        autoLoad: true
    }); 
     
    //创建Grid 
    var grid = Ext.create('Ext.grid.Panel',{ 
        store: store, 
        columns: [ 
            {text: "姓名", width: 120, dataIndex: 'UserName', sortable: true}, 
            {text: "性别", flex: 1, dataIndex: 'Sex', sortable: false}, 
            {text: "年龄", width: 100, dataIndex: 'Age', sortable: true}, 
            {text: "学号", width: 100, dataIndex: 'XueHao', sortable: true}, 
            {text: "班级", width: 100, dataIndex: 'BanJi', sortable: true} 
        ], 
        height:400, 
        width:480, 
        x:20, 
        y:40, 
        title: 'ExtJS4 Grid示例', 
        renderTo: 'demo',  
        viewConfig: { 
            stripeRows: true
        } 
    }) 
})

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

       
   
{  
    "items": [  
        {  
            "UserName": "李彦宏",  
            "Sex": "男",  
            "Age":25, 
            "XueHao":00001, 
            "BanJi":"一班"
        },  
        {  
            "UserName": "马云",  
            "Sex": "男",  
            "Age":31, 
            "XueHao":00002,  
            "BanJi":"二班"
        }, 
        {  
            "UserName": "张朝阳",  
            "Sex": "男",  
            "Age":30, 
            "XueHao":00003, 
            "BanJi":"一班"
        }, 
        {  
            "UserName": "朱俊",  
            "Sex": "男",  
            "Age":28, 
            "XueHao":00004,  
            "BanJi":"一班"
        }, 
        {  
            "UserName": "丁磊",  
            "Sex": "男",  
            "Age":29, 
            "XueHao":00005, 
            "BanJi":"二班"
        }, 
        {  
            "UserName": "李国军",  
            "Sex": "男",  
            "Age":30, 
            "XueHao":00006,  
            "BanJi":"二班"
        }, 
        {  
            "UserName": "王志宝",  
            "Sex": "男",  
            "Age":25, 
            "XueHao":00007, 
            "BanJi":"一班"
        } 
    ]  
}  

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

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

       
   
var store = Ext.create('Ext.data.ArrayStore', { 
        fields: [ 
           {name: 'company'}, 
           {name: 'price',      type: 'float'}, 
           {name: 'change',     type: 'float'}, 
           {name: 'pctChange',  type: 'float'}, 
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 
        ], 
        data: myData 
    });