Ext.onReady(function () {
    var conn = new Ext.data.Connection();
    conn.request({
        method: "Get",//请求方式
        timeout: 300,//请求超时时间
        autoAbort: false,//是否自动断开链接
        disableCaching: false,//是否禁用缓存
        defaultHeaders: { referer: "http://localhost:54480/" },  //请求的网址的头部
        url: "test", //asp.net mvc当前页面所属控制器下的Test方法，如果是其它控制器下的方法，需要填Controller/Action
        params: { //请求附带的参数
            name: 'sam'
        },
        success: function (response) {
            //将远程反馈的Json字符解析为Json对象
            var m = Ext.JSON.decode(response.responseText);
            Ext.Msg.alert("success",m.name);
        },
        failure: function () {
            Ext.Msg.alert("error", "http错误");
        }
    });
});

public string Test(string name)
{
    string s = $"{{name:'{name}'}}";
    return s;
}

//创建数据模型
Ext.define("employee", {
    extend: "Ext.data.Model",
    fields: [
        { name: "employeeName", type: "string", convert: function (value) { /*……convert是可选项，可对字段的值做出判断，可return一个新值*/ } },
        { name: "age", type: "int", convert: null },
        { name: "gender", type: "int" },
        { name: "IsMarried", type: "boolean", defaultValue: true, convert: null }, //defaultValue是可选项
        { name: "favit", type: "auto" } //auto类型表示数组，比如服务端返回的json数据的某个属性是一个数组
    ]
});

//如果Model的某个字段是一维数组，绑定数据的组件可以直接显示数组内容
//但如果是锯齿数组则需要渲染时指定读取数组的那一层
var column = [
    {
        text: "喜好",
        dataIndex: "favit",
        renderer: function () {
            return favit[1];
        }
    }
];

Ext.define("Employee", {
    extend: "Ext.data.Model",
    fields: [
        { name: "employeeID", type: "int" },
        { name: "employeeName", type: "string" }
    ]
});

var employee = new Employee({
    employeeID: 1,
    employeeName:"sam"
});

//获取记录
var name = employee.get("employeeName");
var name = employee.data["employeeName"];
var name = employee.data.employeeName;

//修改记录
employee.set("employeeName", "leo");
employee.data["employeeName"] = "leo";
employee.data.employeeName = "leo";

//Ext.data.Model不仅存储了字段的数据，同时还有很多额外的有关数据的信息
//使用get和set访问、修改记录就可以得到这些信息
//比如可以判断字段的值是否与之前不一致，
//不一致将被视为新值，修改值之前它会将旧值取出来存入modified属性中以便你有可能用得上
//而Ext.data.Model的data属性则只存储字段的数据，它不存储额外信息，
//所以推荐使用get和set访问器获取或修改字段。不过data属性自有它的优势，
//当你需要将记录拷贝一份时，data具备简洁的特性，这要比直接拷贝Ext.data.Model要节约资源得多

commit()
//提交数据，调用此方法后，会清空modified并将drity设为false。

reject()
//撤销修改，把修改后的数据还原为modified中存储的值，再清空modified并将drity设为false。

getChanges()
//获取修改的数据并包装成Json对象返回。
示例：
//处理表单
Ext.get("saveDataBtn").on("click", function () {
    //获取所有数据有被修改过的record
    var c = store.getModifiedRecords();
    var msg = "";
    c.forEach(function (record) {
        //被修改过的字段包装成Json返回
        //转化为Json字符
        var jsonStr=Ext.encode(record.getChanges());
        msg += "<br>" + jsonStr + "<br>";
    });
    Ext.Msg.alert(msg);
})

isModified()
//测试数据是否被修改。

copy()
//忽略drity，将记录拷贝一份，返回与store没有任何关系的Ext.data.Model副本。

save()
//使用代理发起REST请求。服务端会视为这是一个添加记录的请求。
示例：
//创建一条新记录
var stu2 = new Student({
    id:2,
    name: "korn"
});
stu2.save({
    //这有别于connection.request的success，以下参数中的record实际上=operation.responseText
    success: function (record, operation) {
        serverMsg = Ext.decode(operation.responseText).msg;
        Ext.Msg.alert(serverMsg);
    }
});

load(id,Json)
//id：远程请求时，从远程返回数据时，该数据被看做是本地数据模型的实例，你得配置该实例的id
Json：{ 
    scope: 作用域 , 
    failure: function(record, operation) ,    
    success: function(record, operation)                
}

destore()
//使用代理发起REST请求。服务端会视为这是一个删除记录的请求
//示例：
stu.destore({
    success: function (record, operation) {
        serverMsg = Ext.decode(operation.response.responseText);
        Ext.Msg.alert(serverMsg);
    }
});

save()
//使用代理发起REST请求。服务端会视为这是一个修改记录的请求

//加载本地数据到GridPanel中
Ext.define("Employee", {
    extend: "Ext.data.Model",
    fields: [
        { name: "employeeID", type: "int" },
        { name: "employeeName", type: "string" },
        { name: "employeeAge", type: "int" },
        { name: "employeeGender", type: "int", convert: function (val) { return val==1?"男":"女" } },
        { name: "IsMarried", type: "boolean", defaulValue: true, convert: function (val) { return val==false? "否":"是"}}
    ]
});

var sam = new Employee({
    employeeID: 1,
    employeeName: "sam",
    employeeAge: 32,
    employeeGender: 2,
    IsMarried:false
});

var leo = new Employee({
    employeeID: 2,
    employeeName: "leo",
    employeeAge: 42,
    employeeGender: 1,
    IsMarried: true
});

var dataArray = [sam, leo]; //Ext.data.Model数组

var datasource = Ext.create("Ext.data.Store", {
    data: dataArray, //数据在哪里
    model: "Employee" //集合是什么类型            
});

var grid =new Ext.grid.GridPanel({
    renderTo: "box",
    title: "员工信息表",
    width: 600,
    forceFit: true,
    store: datasource,
    columns: [
        { header: "编号", dataIndex: "employeeID" },
        { header: "姓名", dataIndex: "employeeName" },
        { header: "年龄", dataIndex: "employeeAge" },
        { header: "性别", dataIndex: "employeeGender" },
        { header: "婚否", dataIndex: "IsMarried" }
    ]
});

var store = new Ext.data.Store({
    model: "数据模型的名字",
    proxy: {
        type: 'ajax',
        url: 'xx.xml' | 'xx.ashx',
        reader: {
            type: 'xml' | 'json' | 'array'
        }
    }
});

using Newtonsoft.Json;

//服务端
namespace MyWeb.Controllers
{
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string EmployeeName { get; set; }
        public int EmployeeAge { get; set; }
        public int EmployeeGender { get; set; }
        public bool IsMarried { get; set; }

}
    public class DefaultController : Controller
    {
        public string Test(string name)
        {
            List<Employee> list = new List<Employee>
            {
                new Employee{ EmployeeID=1, EmployeeAge=32, EmployeeGender=2, EmployeeName="sam", IsMarried=false },
                new Employee{ EmployeeID=2, EmployeeAge=42, EmployeeGender=1, EmployeeName="leo", IsMarried=true }
            };
            return JsonConvert.SerializeObject(list);
        }
    }
}

//绑定远程数据
Ext.define("Employee", {
    extend: "Ext.data.Model",
    fields: [
        { name: "EmployeeID", type: "int" },
        { name: "EmployeeName", type: "string" },
        { name: "EmployeeAge", type: "int" },
        { name: "EmployeeGender", type: "int", convert: function (val) { return val == 1 ? "男" : "女" } },
        { name: "IsMarried", type: "boolean", defaulValue: true, convert: function (val) { return val==false? "否":"是"}}
    ]
});

var datasource = Ext.create("Ext.data.Store", {
    model: "Employee",
    autoLoad: true,
    proxy: {
        type: "ajax",
        url: "/default/test",
        reader: {
            type: "json"
        }
    }
});

var grid =new Ext.grid.GridPanel({
    renderTo: "box",
    title: "员工信息表",
    width: 600,
    forceFit: true,
    store: datasource,
    columns: [
        { header: "编号", dataIndex: "EmployeeID" },
        { header: "姓名", dataIndex: "EmployeeName" },
        { header: "年龄", dataIndex: "EmployeeAge" },
        { header: "性别", dataIndex: "EmployeeGender" },
        { header: "婚否", dataIndex: "IsMarried" }
    ]
});

getAt(RowIndex)
//搜索，根据索引行号获取记录对象，返回一个Ext.data.Model
//示例
var datasource = Ext.create("Ext.data.Store", {
    model: "Employee",
    autoLoad: true,
    proxy: {
        type: "ajax",
        url: "/default/test",
        reader: {
            type: "json"
        }
    },
    listeners: {
        datachanged: function (e, eOpts) {
            var model = e.getAt(0); 
            var name = model.get("EmployeeName");
            alert(name);
        }
    }
});
 
getRange(startRowIndex,endRowIndex)
//搜索，获取从startRowIndex到endRowIndex的记录，返回一个Ext.data.Model[ ]
 
getNewRecords()
//获取新插入的记录，返回一个Ext.data.Model[ ]数组，没有记录返回false，插入数据可通过insert和add方法实现，前者可提供索引插入指定位置，后者在记录集末尾追加新记录
 
getModifiedRecords()
//获取用户在编辑器上修改过数据的记录，返回一个Ext.data.Model[ ]，存储有被修改过数据的记录。使用add或insert插入到store中的新数据会被视为脏数据一并返回
//示例：假如动态insert了一行，该行可能未输入数据，则提交修改时可以先做判断，删除空行再getModifiedRecords
var store = Ext.getStore("TbRightStore");
//获取脏数据前先删除未做改动的新行，因为新行会被getModifiedRecords当做脏数据返回
store.query("TbRightId", 0).each(function (r) {
    if (r.get("RightName") == "") {
        store.remove(r);
    }
});
//获取被修改过的记录集
var dirtyRows = store.getModifiedRecords();            
  
getRemovedRecords()
//获取被删除的记录，返回一个Ext.data.Model[ ]数组没有记录返回false
 
getCount()
//获取总记录条数
 
getTotalCount()
//如果无分页则与getCount()一样，否则，返回分页后的当前页的记录条数
 
indexOf(record)
//查找并返回该记录的所在行索引如果存在过滤，被过滤的记录不会被发现
 
sum(PropertyName,startIndex,endIndex)
//计算某列的从startIndex到endIndex列的数据的总和，如果没有后两个参数则计算该列数据全部的总和
 
find(propertyName,RegExp,startRowIndex,anyMach,IsCase)
//搜索，根据参数进行特殊搜索find会自动遍历所有记录，找到符合规则的记录会立即返回行号，否则返回-1.
//property：要搜索的字段名
//RegExp：正则式或字符
//startRowIndex：起始行索引号，可选
//anyMach：是否不从头开始搜索，默认false，可选
//IsCase：是否区分大小写，可选
 
findBy(fn,scope,startRowIndex)
//fn需要你设定搜索条件，函数必须返回true or falsefindBy会自动遍历所有记录，测试每一条记录是否符合fn设定的搜索规则，如果符合马上返回行号，否则继续遍历直到结束，没有符合则返回-1
//fn：自定义的搜索函数，接收表示记录的record参数和表示记录id的id参数
//scope：fn执行的作用域(即this 引用)默认是当前的store，可选
//startRowIndex：搜索的起始行索引号，可选
//fn：自动迭代函数，参数如下：
//record:当前迭代的记录
//index：行号
//示例：
var index = datasource.findBy(function (record, id) {
    return record.get("employeeName") == "sam" && record.get("age") == 32;
});
 
query(propertyName,RegExp,anyMatch，IsCase)
//与find逻辑相同，但无startRowIndexfind返回数字，query返回Ext.util.MixedCollection对象包含了搜索到的记录
//示例：
var MixedCollections=.each(function(record,index,count)
    record.get(propertyName);    
});
//或：
if(MixedCollections.getCount()!=0) {
    rec = MixedCollections.getRange()[0];//获取第一条记录
    val=rec.get("fieldName")
}
 
queryBy(fn,scope,startRowIndex)
//与findBy逻辑相同，findBy返回数字，queryBy返回Ext.util.MixedCollection对象包含了搜索到的记录

load : fn ( store, records, success )
//load方法同时也是一个事件，在读取数据的过程中触发。另外，在load方法中也可以添加一个callback回调，表示数据读取完毕后触发。如：
//数据存储器load完毕后将回调，该函数处理IsPic的列，该列本身显示数字，要将其替换为汉字
store.load({
    callback: function () {
        var count = this.getCount();
        for (var i = 0; i < count; i++) {
            var record = store.getAt(i);                       
            var v = record.get("IsPic");
            if (v == "0") {
                record.set("IsPic", "否");
                alert(record.get("IsPic"));
            }
            else {
                record.set("IsPic", "是")
            }
        }
        this.commitChanges();
    }
});

beforeload: fn()
//在加载数据之前触发，通过此事件可以动态追加Store的参数
//示例：    
beforeload: function () {  
    //向proxy.extraParams追加参数
    Ext.apply( this.proxy.extraParams, { 参数1: 值1 , 参数2 : 值2 } );
}

datachanged：fn(this , eOpts)
//数据在加载完成后 | 更新后 | 删除后触发

url : urlString
//请求的路径

timeout : number
//请求超时微秒数，默认30000微秒，即30秒。

pageParam : string
//分页时，向服务端发送的分页页码，即指示要取第几页的数据。

startParam : string
//分页时，向服务端发送的提取记录的起始索引。

limitParam : string
//分页时，向服务端发送的每页显示的记录条数。

groupParam : string
//分组时，向服务端发送的分组的信息。
//示例：
//提交到服务的格式
//以gender列进行分组并升序或降序排
[{ property : 'gender' , direction : 'ASC' | 'desc' }]

sortParam : string
//排序时，向服务端发送的排序的信息。
//示例：
[{ property : 'age' , direction : 'ASC' | 'desc' } , ……]

filterParam : string
//过滤时，向服务端发送的过滤的信息。
//示例：
//过滤出city列的值是重庆的记录
[{ property : 'city' , value: '重庆' }]

//服务端

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json; 

string methodType = context.Request.HttpMethod;
switch (methodType)
{
    case "POST":
        context.Response.Write("{msg:'已添加'}");
        return;
    case "GET":
        var student = new { id = 32, name = "sam" };
        string msg = JsonConvert.SerializeObject(student);
        context.Response.Write(msg);
        return;
    case "PUT":
        context.Response.Write("{msg:'已更新}");
        return;
    case "DELETE":
        context.Response.Write("{msg:'已删除}");
        return;
}

//客户端

var msg = "";
Ext.onReady(function () {

Ext.define('Student', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'ID', type: 'int' },
            { name: 'name', type: 'string' }
        ],
        proxy: {
            type: 'rest',
            format: 'ashx',
            url:'StudentHandler.ashx'
        }
    });

var stu = null;
    var serverMsg = null;
    var panel = new Ext.Panel({
        renderTo:Ext.getBody(),
        title: '测试',
        width:300,
        height:100,
        tbar: [
            {
                text: '查询', handler: function () {
                    //向服务端发起rest请求
                    Student.load('student1', {
                        success: function (record, operation) {
                            stu = record;//将获取到的服务端返回的Student类型的实例存入变量
                            serverMsg=Ext.decode(operation.response.responseText).name;
                            panel.update(serverMsg);
                        }
                    })
                }
            },
            {
                text: "添加", handler: function () {
                    //创建一条新记录
                    var stu2 = new Student({
                        id:2,
                        name: "korn"
                    });
                    stu2.save({
                        success: function (record, operation) {
                            serverMsg = Ext.decode(operation.response.responseText).msg;
                            panel.update(serverMsg);
                        }
                    });
                }
            },
            {
                text: "删除", handler: function () {
                    stu.destore({
                        success: function (record, operation) {
                            serverMsg = Ext.decode(operation.response.responseText).name;
                            panel.update(serverMsg);
                        }
                    });
                }
            },
            {
                text: '更新', handler: function () {
                    Student.save({
                        success: function (record, operation) {
                            stu = record;
                            serverMsg = Ext.decode(operation.response.responseText).name;
                            panel.update(serverMsg);
                        }
                    })
                }
            }
        ]
    });

});