ExtJS 4 Ext.data.proxy.Ajax

Posted 2020-08-21

namespace ExtJSProject.WebApi.Models
{
    [Serializable]
    [DataContract]
    public class Person
    {
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public int Age { get; set; }
    }
}

 

namespace ExtJSProject.WebApi.Controllers
{
    [RoutePrefix("api/Person")]
    public class PersonController : ApiController
    {
        [HttpGet]
        public List<Models.Person> Get(int page, int start, int limit)
        {
            return new List<Models.Person>()
            {
                new Models.Person() {Name="张三",Age=25 },
                new Models.Person() {Name="李四",Age=25 }
            };
        }
    }
}

 

var baseUrl = "http://" + window.location.hostname + "/ExtJS.WebApi/api/";
Ext.onReady(function () {

    Ext.define("Person", {
        extend: ‘Ext.data.Model‘,
        fields: [‘Name‘, ‘Age‘]
    });

    var ajaxProxy = new Ext.data.proxy.Ajax({
        url: baseUrl + ‘Person/Get‘,
        model: ‘Person‘,
        reader: ‘json‘
    });
    var operation = new Ext.data.Operation({
        action: ‘read‘,
        page: 2,
        start: 50,
        limit: 25
    });
    ajaxProxy.doRequest(operation, callBack);
    function callBack(operation) {
        console.log(operation.response.responseText);    //[{"Name":"张三","Age":25},{"Name":"李四","Age":25}]   
    }

});