工具栏分页Extjs 4&；Json

我正在使用ExtJS4开发一些丰富的接口。我是ExtJS的初学者，我有一些问题。我有100条记录，我想每页显示20条记录。我已经完成了这段代码，但它在所有页面中只显示了20条录音。我已经在firebug中验证了我是否拥有所有的数据：我只有20个，总数等于100。我需要帮助

网络服务页面：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class Service : System.Web.Services.WebService
{
public class DataGridSource
    {
        public List<MyDvpt> maListe = new List<MyDvpt>();
        private int _total;
        public int Total 
        {
            get { return _total; }
            set {  _total = value; }
        }
    }

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
    public DataGridSource GetMyDvpt3(int pageSize, int pageNumber)
    {
        string connectionString = "Data source=DARWIN;Initial Catalog=AGREO_DVPT;User ID=temp;Password=pmet";

        SqlConnection connection = new SqlConnection(connectionString);

        SqlCommand command = new SqlCommand("SELECT TOP 100 E.NOM_EXP,ESP.NOM_ESP,V.NOM_VAR,P.SURF_PG,P.DD_CYCLE_PROD from gc.PG P inner join ADM.EXP E on E.ID_EXP = P.ID_EXP inner join GC.VAR V on V.ID_VAR = P.ID_VAR inner join GC.ESP ESP on ESP.ID_ESP = V.ID_ESP", connection);

        connection.Open();

        SqlDataReader reader = command.ExecuteReader();

        List<MyDvpt> list1 = new List<MyDvpt>();
        while (reader.Read())
        {
            MyDvpt dev = new MyDvpt();
            dev.NOM_EXP = reader[0].ToString();
            dev.NOM_ESP = reader[1].ToString();
            dev.NOM_VAR = reader[2].ToString();
            dev.SURF_PG = reader[3].ToString();
            dev.DD_CYCLE_PROD = reader[4].ToString();

            list1.Add(dev);
        }
        return new DataGridSource { maListe = list1.Skip(pageSize * pageNumber).Take(pageSize).ToList<MyDvpt>(), Total = list1.Count };            
    }

public class MyDvpt
    {
        public string NOM_EXP { get; set; }
        public string NOM_ESP { get; set; }
        public string NOM_VAR { get; set; }
        public string SURF_PG { get; set; }
        public string DD_CYCLE_PROD { get; set; }

        private string _total;
        public string Total
        {
            get { return _total; }
            set { _total = value; }
        }
    }
}

function onReady() {   
store = new Ext.data.JsonStore({
    autoLoad: true,
    pageSize: 20,
    pageNumber: 1,
    groupField: 'NOM_VAR',
    proxy: ({
        type: 'ajax',
        url: '../Service.asmx/GetMyDvpt3?pageSize=20 &pageNumber=1',
        reader: {
            type: 'json',
            root: 'd.maListe',
            totalProperty: 'd.Total'            
        },
        headers: {
            'Content-type': 'application/json'
        }
    }),
    fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
});


store.loadPage(1);

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
    groupHeaderTpl: 'NOM_VAR: {NOM_ESP} ({rows.length} enregistrement{[values.rows.length > 1 ? "s" : ""]})'
});

Ext.create('Ext.grid.Panel', {
    store: store,
    id:'grid',
    collapsible: true,
    frame: true,
    iconCls: 'icon-grid',
    features: [groupingFeature],
    columnLines: true,
    columns: [
                { dataIndex: 'NOM_EXP', header: 'NOM_EXP', flex: 1 },
                { dataIndex: 'NOM_ESP', header: 'NOM_ESP', flex: 1 },
                { dataIndex: 'NOM_VAR', header: 'NOM_VAR', flex: 1 },
                { dataIndex: 'SURF_PG', header: 'SURF_PG', flex: 1 },
                { dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
            ],

    fbar: ['->', {
        text: 'Clear Grouping',
        iconCls: 'icon-clear-group',
        handler: function () {
            groupingFeature.disable();
        }
    }],
    renderTo: 'panel',
    viewConfig: {
        stripeRows: true
    },
    title: 'Dvpt Grid',
    width: 1220,
    height: 500,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,
        dock: 'bottom',
        displayInfo: true
    }]
});
}

firebug中的store.load（）响应：

得到

{“d”：{“类型”：“MaquetteExtJs.Service+DataGridSource”，“maListe”：[{“类型”：“MaquetteExtJs.Service+MyDvpt”，“NOM_EXP”：“DECKERT”，“NOM_ESP”：“BléDur Hiver”，“NOM_VAR”：“AMBRAL”，“SURF PG”：“30000”，“DD_CYCLE_PROD”：“26/02/2003 00:00”，“Total”：null}， ... {“\uuuu类型”：“MaquetteExtJs.Service+MyDvpt”，“NOM\u EXP”：“DECKERT”，“NOM\u ESP”：“BléDur Hiver”，“NOM\u VAR”：“SOLDUR”，“SURF\u PG”：“25000”，“DD\u CYCLE\u PROD”：“06/03/2002 00:00”，“Total”：null}]，“Total”：“100”}

---

d Object{{uuuu type=“MaquetteExtJs.Service+DataGridSource”，maListe=[20]，Total=“100”}

当前您的响应如下

{"d":{"_type":"MaquetteExtJs.Service+DataGridSource","maListe":[{"_type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"AMBRAL","SURF_PG":"30000","DD_CYCLE_PROD":"26/02/2003 00:00:00","Total":null}, ... {"__type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"SOLDUR","SURF_PG":"25000","DD_CYCLE_PROD":"06/03/2002 00:00:00","Total":null}],"Total":"100"}}

{"_type":"MaquetteExtJs.Service+DataGridSource","maListe":[{"_type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"AMBRAL","SURF_PG":"30000","DD_CYCLE_PROD":"26/02/2003 00:00:00","Total":null}, ... {"__type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"SOLDUR","SURF_PG":"25000","DD_CYCLE_PROD":"06/03/2002 00:00:00","Total":null}],"Total":"100"}

但它应该是这样的

{"d":{"_type":"MaquetteExtJs.Service+DataGridSource","maListe":[{"_type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"AMBRAL","SURF_PG":"30000","DD_CYCLE_PROD":"26/02/2003 00:00:00","Total":null}, ... {"__type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"SOLDUR","SURF_PG":"25000","DD_CYCLE_PROD":"06/03/2002 00:00:00","Total":null}],"Total":"100"}}

{"_type":"MaquetteExtJs.Service+DataGridSource","maListe":[{"_type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"AMBRAL","SURF_PG":"30000","DD_CYCLE_PROD":"26/02/2003 00:00:00","Total":null}, ... {"__type":"MaquetteExtJs.Service+MyDvpt","NOM_EXP":"DECKERT","NOM_ESP":"Blé Dur Hiver","NOM_VAR":"SOLDUR","SURF_PG":"25000","DD_CYCLE_PROD":"06/03/2002 00:00:00","Total":null}],"Total":"100"}

您还需要更新

JsonStore

中的

JsonReader

配置

proxy: ({
    type: 'ajax',
    url: '../Service.asmx/GetMyDvpt3?pageSize=20 &pageNumber=1',
    reader: {
        type: 'json',
        root: 'maListe',
        totalProperty: 'Total'            
    }
}),

---

尝试保留旧的json响应和存储根属性（root:'d.maListe'），并修改totalProperty:'Total'

您可以发布存储请求中的响应吗？Jaitsu对于您的响应，我刚刚将存储响应添加到响应中，我只有20条记录，所有记录的总数相等是否有任何原因表明您的响应是嵌套在具有单个属性的对象中的对象？我的意思是。。。你的回答应该是

{u-type:“MaquetteExtJs…”，“maListe:[{…}]}

我想我不理解你的问题。问题是如果我只把“maListe”作为根，记录不会显示在我的网格中，并且回答总是一样的：{“d”：{u-type:…}您是否更改了读卡器配置？

reader

中的

root

配置告诉Ext从何处读取您的记录如果我更改了它，它将不起作用正确的根配置是：d.maListehello，我已测试过使用Total修改totalProperty，但它不起作用：如果我将Total放入totalProperty，我只有一个带有20 r的页面ecords，但当我输入d.Total时，我有20条记录和5页，但所有页面的记录都是一样的