ExtJS grid简单应用之 展示JSON数据

 Grid功能:  展示json数据,编辑行,排序,分页.分页功能要根据请求URL的参数,在服务器端返回相应JSON,此处服务端未写.(url参数,可通过firebug控制台查看)

 1,首先引用

<script src="ext-4.0.0/ext-all.js" type="text/javascript"></script>   //ExtJS文件
   <link href="ext-4.0.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />  //ExtJS样式文件

 

2.前端代码:

Ext.onReady(function () {

           var itemsPerPage = 2;
           //定义model
           Ext.define('User', {
               extend: 'Ext.data.Model',
               // fields定义字段和数据类型
               fields: [
                         { name: 'id', type: 'int' },
                         { name: 'name', type: 'string' },
                         { name: 'date', type: 'datetime' }
                       ]
           });

           //定义数据集
           var store = Ext.create('Ext.data.Store', {

               model: 'User',
               autoLoad: true,

               pageSize: itemsPerPage,  //分页数据条数

               //使用ajax代理
               proxy: {
                   type: 'ajax',
                   url: 'Handler.ashx', //获取json地址
                   //Reader 解码json数据
                   reader: {
                       type: 'json',
                       root: 'users',
                       total: 'total'

                   }

               }

           })

           Ext.create('Ext.grid.Panel', {

               renderTo: Ext.getBody(), //页面显示
               store: store,        //设置数据源
               width: 400,
               height: 300,
               title: 'asdasd',   //标题

               //定义列名
               columns: [
               {
                   text: 'id', width: 100, sortable: true, dataIndex: 'id' /*绑定字段*/, editor: 'textfield' /*定义编辑是显示的空间类型*/

               },
               {
                   text: '姓名', width: 120, dataIndex: 'name', editor: 'textfield'
               },
               {
                   text: '日期', width: 120, dataIndex: 'date', editor: 'datefield'

               }

               ],

               //单元格编辑

               /*
               selType: 'cellmodel',
               plugins: [
               Ext.create('Ext.grid.plugin.CellEditing', {
               clicksToEdit: 1
               })
               ],
               */

               //行编辑编辑
               selType: 'rowmodel',
               plugins: [
                            Ext.create('Ext.grid.plugin.RowEditing', {
                                clicksToEdit: 1
                            })
                        ],

               //分页
               dockedItems: [{
                   xtype: 'pagingtoolbar',
                   store: store,   // same store GridPanel is using
                   dock: 'bottom',
                   displayInfo: true
               }]

           })

 

 

 

       })

 

3,服务器端代码:

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        User user = new User(1, "马来西亚", DateTime.Now);
        User u = new User(2, "意大利", DateTime.Parse("02/03/2012"));
        List<User> l = new List<User>();
        l.Add(user);
        l.Add(u);

 

        JavaScriptSerializer jss = new JavaScriptSerializer();

        string users = "{  success: true, users:  " + jss.Serialize(l) + " }";
    
        context.Response.Write(users);

 

    }
  

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

public class User
{
    public User() { }
    public User(int id, string name, DateTime date) { Id = id; Name = name; Date = date; }
    private int Id;

    public int id
    {
        get { return Id; }
        set { Id = value; }
    }
    private string Name;

    public string name
    {
        get { return Name; }
        set { Name = value; }
    }

    private DateTime Date;

    public DateTime date
    {
        get { return Date; }
        set { Date = value; }
    }

}