我对 Extjs 网格组件有疑问。如果您查看随附的屏幕截图，您将看到两行正确的 JSON 数据。
但是，正如您在附加的屏幕截图中看到的那样，ExtJS 网格组件仅显示一行，这是一个奇怪的问题。我尝试了一切都没有成功:(
这是 ExtJS 代码：
客户部分的数据存储：
var customersStore = new Ext.data.JsonStore({
root: 'customers',
baseParams: { action: 'customers'},
proxy: new Ext.data.HttpProxy({
url: '../invoice/grid-master-details.php',
method: 'POST'
}),
fields: ['MetroNo', 'SpecVatNo', 'HomeStoreNo', 'CustShortName', 'StoreName', 'months',
{ name: 'invtotal', type: 'float' },
{ name: 'invcount', type: 'int' }],
idProperty: 'MetroNo'
});
网格初始化参数：
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
var customersGrid = new Ext.grid.GridPanel({
title: 'Customer Informations',
plugins: new Ext.ux.GridTotals(),
renderTo: 'customers-div',
store: customersStore,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
columns: [
{ id: 'vat-no',
header: "Tax Number",
width: 50,
dataIndex: 'SpecVatNo',
sortable: false,
hidden: true
},
{ id: 'store-name',
header: 'Store Name',
width: 70,
dataIndex: 'StoreName',
sortable: true
},
{ id: 'cust-name',
header: 'Customer Title',
width: 130,
dataIndex: 'CustShortName',
sortable: true,
totalsText: 'TOTAL'
},
{ id: 'invoice-count',
header: "Invoice Address",
width: 40,
dataIndex: 'invcount',
align: 'right',
sortable: false,
summaryType: 'sum'
},
{ id: 'invoice-total',
header: "Invoice Total",
width: 60,
dataIndex: 'invtotal',
align: 'right',
sortable: false,
renderer: Ext.util.Format.CurrencyFactory(true, 2, ",", ".", "TL", true),
summaryType : 'sum',
roundToPlaces: 3
},
{
id: 'selected-date',
header: "Period",
width: 20,
dataIndex: 'months',
sortable: false,
hidden: true
}
],
autoExpandColumn: 'cust-name',
width: 700,
height: 240,
loadMask: {msg:'Loading customer infos ...'},
stripeRows: true,
columnLines:true,
stateful: true,
stateId: 'customerGrid',
viewConfig: {
forceFit: true
},
tbar: new Ext.Toolbar({
items: [{ xtype: 'tbtext', text: 'Period' },
{ xtype: 'tbspacer', width: 10},
{ xtype: 'combo',
store: datesStore,
id: 'monthid',
displayField: 'months',
valueField: 'dateid',
editable: false,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select Period...',
selectOnFocus: true
},
{ xtype: 'tbspacer', width: 15},
{ xtype: 'tbseparator'},
{ xtype: 'tbspacer', width: 10},
{ xtype: 'tbtext', text: 'Tax Number'},
{ xtype: 'tbspacer', width: 10},
{ xtype: 'textfield', id: 'vatnoid'},
{ xtype: 'tbspacer', width: 10},
{ xtype: 'button',
text: ' Show ',
iconCls: 'quicksearch',
handler: function() {
var mid = Ext.getCmp('monthid').getValue();
var vid = Ext.getCmp('vatnoid').getValue();
customersStore.load({
params: {'months': mid, 'vatno': vid}
});
}
}
]
})
});