(转)ExtJS4 Grid1学习1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://www.cnblogs.com/extjs-4.1.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/extjs-4.1.0/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        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: { //注意这里是reader  而不是
                        type: 'json',
                        root: 'items' //,//根节点
                        //totalProperty:'total'
                    }
                },
                autoLoad: true //指定数据后 将自动加载
            });
            var grid = Ext.create('Ext.grid.Panel', {
                store:store,//这里的参数不要放在引号内
                columns: [
                    { text: '姓名',  120, dataIndex: 'UserName', sortable: true },
                    { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false },
                    { text: "年龄",  100, dataIndex: 'Age', sortable: true },
                    { text: "学号",  100, dataIndex: 'XueHao', sortable: true },
                    { text: "班级",  100, dataIndex: 'BanJi', sortable: true }
                ],
                height: 400,
                 480,
                x: 20,
                y: 40,
                title: 'ExtJS4 Grid示例',
                renderTo: 'demo',
                viewConfig: { //一个配置对象，该对象将被应用到网格的UI视图
                    stripRows:true
                }
            });
        });
    </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

复制json数据保存为mydata.json 记得编码格式需要是utf-8 格式的哦

我的用的是NotePad++的方式是：

mydata.json

    { 
        "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
        });

数据类型分为以下几种：

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

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