Extjs Grid 不显示数据
不显示数据(后台已接受请求,并且回发数据),不提示任何错误
确定数据格式以及路径正确
JS如下
var grid;
var record;
var store;
Ext.onReady(function () {
//后台返回的数据格式是 {total:总页数值,rows:[{},{}]}
store = new Ext.data.JsonStore({
url: 'ExtDataModifyShipAddressList.aspx?p=' + Math.random(),
root: 'rows',
totalProperty: 'total',
fields: [
{ name: 'Id' },
{ name: 'Sid' },
{ name: 'Status' },
{ name: 'CustomerID' },
{ name: 'Description' },
{ name: 'ShipAddress' },
{ name: 'StateName' },
{ name: 'CityName' },
{ name: 'ZipCode' },
{ name: 'ContactPerson' },
{ name: 'ContactTel' },
{ name: 'ShipVia' },
{ name: 'Country' },
{ name: 'StId' },
{ name: 'Default'}],
method: 'post'
});
//加载数据
store.load({
params: {
start: 0,
limit: 20
}
});
grid = new Ext.grid.GridPanel({
frame: true,
title: 'New Customer Application List',
stripeRows: true, //斑马线
store: store,
applyTo: 'grid', //指定显示数据的div
trackMouseOver: true,
height: 550,
width: window.screen.width - 17, //屏幕分辨率的宽
loadMask: { msg: 'loading……' },
columns: [
new Ext.grid.RowNumberer(), //行号
{header: '<font size=2>Id</font>', dataIndex: 'Id', sortable: true },
{ header: '<font size=2>Sid</font>', dataIndex: 'Sid', sortable: true },
{ header: '<font size=2>Status</font>', dataIndex: 'Status', sortable: true },
{ header: '<font size=2>CustomerID</font>', dataIndex: 'CustomerID', sortable: true },
{ header: '<font size=2>Description</font>', dataIndex: 'Description', sortable: true },
{ header: '<font size=2>ShipAddress</font>', dataIndex: 'ShipAddress', sortable: true },
{ header: '<font size=2>StateName</font>', dataIndex: 'StateName', sortable: true },
{ header: '<font size=2>CityName</font>', dataIndex: 'CityName', sortable: true },
{ header: '<font size=2>ZipCode</font>', dataIndex: 'ZipCode', sortable: true },
{ header: '<font size=2>ContactPerson</font>', dataIndex: 'ContactPerson', sortable: true },
{ header: '<font size=2>ContactTel</font>', dataIndex: 'ContactTel', sortable: true },
{ header: '<font size=2>ShipVia</font>', dataIndex: 'ShipVia', sortable: true },
{ header: '<font size=2>Country</font>', dataIndex: 'Country', sortable: true },
{ header: '<font size=2>StId</font>', dataIndex: 'StId', sortable: true}],
//分页
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true, //显示分页
emptyMsg: "NO DATA"
})
})
//底下容器
var bookTplMarkup = [
'Id: <br/>{Id}<br/><br/>',
"<input type='button' value='Del' onclick=Del({Id})><br/>"
];
var bookTpl = new Ext.Template(bookTplMarkup);
var ct = new Ext.Panel({
renderTo: 'grid',
frame: true,
title: 'Customer Detailed Info',
loadMask: { msg: 'loading……' },
width: window.screen.width - 17,
height: 500,
layout: 'border',
items: [
grid,
{
id: 'detailPanel',
region: 'center',
bodyStyle: {
background: '#ffffff',
padding: '7px'
},
html: 'Please select a row to see additional details.'
}
]
})
grid.getSelectionModel().on('rowselect', function (sm, rowIdx, r) {
var detailPanel = Ext.getCmp('detailPanel');
bookTpl.overwrite(detailPanel.body, r.data);
record = r;
});
})