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: '姓名', 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: { //一个配置对象,该对象将被应用到网格的UI视图

                    stripRows:true

                }

            });

        });

    </script>

</head>

<body>

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

</body>

</html>

 

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

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

ExtJS4 Grid1学习1

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 Grid1学习1

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。

 

 

 

你可能感兴趣的:(extjs4)