?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; }
??? }

}

轉載于:https://www.cnblogs.com/Mr-Joe/archive/2012/02/21/2361010.html

總結

以上是生活随笔為你收集整理的ExtJS grid简单应用之 展示JSON数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。