工具栏分页 Extjs 4&Json 的问题
Posted
技术标签:
【中文标题】工具栏分页 Extjs 4&Json 的问题【英文标题】：problem with Toolbar Paging Extjs 4&Json 【发布时间】：2011-06-23 07:32:03 【问题描述】：我正在使用 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;
JS 页面：
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() 响应：
获取http://localhost:1508/Service.asmx/GetMyDvpt3?pa...22NOM_VAR%22%2C%22direction%22%3A%22ASC%22%7D%5D
"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","总计“：空值， ... "__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","总计":null],"总计":"100"
d 对象 __type="MaquetteExtJs.Service+DataGridSource", maListe=[20], Total="100"
【问题讨论】：
您可以发布您对商店请求的回复吗？ 坦克 Jaitsu 的回复，我刚刚添加了商店回复 在响应中我只有 20 条记录，并且所有记录的总数相等 是否有任何理由表明您的响应是嵌套在具有单个属性d 的对象中的对象？我的意思是......你的回复应该是 "_type":"MaquetteExtJs..", "maListe":[ ... ]
我想我没听懂你的问题
【参考方案1】：
目前你的回复是这样的……
"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'
),
【讨论】：
问题是如果我只将“maListe”作为根，记录不会显示在我的网格中，并且响应总是相同的：“d”：“_type”：。 ... 您是否更改了阅读器配置？reader 中的 root 配置告诉 Ext 从哪里读取记录
如果我改变它，它不起作用正确的根配置是：d.maListe【参考方案2】：
尝试保留旧的 json 响应并存储根属性 (root: 'd.maListe') 并修改 totalProperty : 'Total'
【讨论】：
你好，我已经测试了用 Total 修改 totalProperty 并且它不起作用：s 如果我将 Total 放入 totalProperty 我只有一页有 20 条记录，但是当我放入 d.Total 时，我有 20 条记录和 5 页，但所有页面中的记录都相同以上是关于工具栏分页 Extjs 4&Json 的问题的主要内容，如果未能解决你的问题，请参考以下文章