Ext.grid.GridPanel
Ext.grid.GridPanel
* 创建GridPanel
1 创建数据对象store
var centerStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '<c:out value="${path}"/>/marcInfo.htm?method=marcInfoQuery'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'marcInfoArr'
},
Ext.data.Record.create([
{name: 'marcNo',type: 'string'},
{name: 'marcName',type: 'string'},
{name: 'marcDesc',type: 'string'},
{name: 'marcSpec',type: 'string'},
{name: 'marcUnit',type: 'string'},
{name: 'lastPrice',type: 'float'},
{name: 'statusRmk',type: 'string'},
{name: 'marcKind',type: 'string'},
{name: 'createUser',type: 'string'},
{name: 'createDate',type: 'string'},
{name: 'modifyUser',type: 'string'},
{name: 'modifyDate',type: 'string'}
]))
});
centerStore.setDefaultSort('marcNo', 'asc');
2 创建数据行模型column model
var centerColModel = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(),//行数号
{header: "物料编码", width: 120, dataIndex: 'marcNo'},
{header: "物料描述", width: 200, dataIndex: 'marcDesc'},
{header: "物料规格", width: 200, dataIndex: 'marcSpec'},
{header: "品名", width: 120, dataIndex: 'marcName'},
{header: "单位", width: 80, dataIndex: 'marcUnit'},
{header: "最近采购价格", width: 100, dataIndex: 'lastPrice',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if(value == 0){
return '';
}
return value+'元';
}
},
{header: "状态", width: 100, dataIndex: 'statusRmk',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
switch (value){
case '1': return '正常使用';
case '2': return '冻结状态';
case '3': return '删除';
}
return '';
}
},
{header: "物料类别", width: 100, dataIndex: 'marcKind',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
switch (value){
case '1': return '费用性物料';
case '2': return 'SAP物料';
}
return '';
}
},
{header: "创建者", width: 120, dataIndex: 'createUser'},
{header: "创建时间", width: 120, dataIndex: 'createDate' ,align: 'center'},
{header: "最后更改人", width: 120, dataIndex: 'modifyUser'},
{header: "最后更改时间", width: 120, dataIndex: 'modifyDate' ,align: 'center'}
],
defaults: {
sortable: true,
menuDisabled: false,
align: 'left'
}
});
3 创建 中央表格 GridPanel
var centerGrid = new Ext.grid.GridPanel({
id: 'centerGrid',
ds: centerStore,
border: false,
region: 'center',
stripeRows: true,
loadMask: {msg:'Loading……'},
colModel: centerColModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect:true
}),
viewConfig: {
enableRowBody: true,
showPreview: false,
getRowClass: function (record,rowIndex,p,store){
if(this.showPreview){
p.body = '<p>'+record.data.description+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
//分页工具栏
bbar: new Ext.PagingToolbar({
params: {
start: 0,
limit: 50
},
pageSize: 50,
store: centerStore,
displayInfo: true,
displayMsg: '显示数据从 第{0}条 - 第{1}条 共{2}条记录',
emptyMsg: '无数据显示！',
items: [
'-',
{
pressed: false,
enableToggle: false,
//text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn,pressed){
var view = centerGrid.getView();
view.showPreview = pressed;
view.refresh();
}
}
]
})
});
4 制定右键菜单：
var rightMenu = new Ext.menu.Menu({
id: 'defmenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [{
text: '修改',
handler: indexFun.update
}]
});
5 显示右键菜单：
centerGrid.addListener("contextmenu",function(e){
var target = e.getTarget();
e.preventDefault();
rightMenu.showAt(e.getXY());
var view = centerGrid.getView();
var rowIndex = view.findRowIndex(target);
centerGrid.getSelectionModel().selectRow(rowIndex);
}
);
6 设置基本参数：
centerGrid.addListener('beforeload',function(){
centerStore.setBaseParam("marcNo",marcNo.getValue());
centerStore.setBaseParam("marcDesc",marcDesc.getValue());
centerStore.setBaseParam("statusRmk",statusRmk.getValue());
centerStore.setBaseParam("marcKind",marcKind.getValue());
centerStore.setBaseParam("startDate",indexFun.getDateFieldFormatValue(startDate));
centerStore.setBaseParam("endDate",indexFun.getDateFieldFormatValue(endDate));
}
);
7 加载数据：
centerStore.load({
params: {
start: 0,
limit: 50,
marcNo :marcNo.getValue(),
marcName :marcName.getValue(),
marcDesc :marcDesc.getValue(),
statusRmk :statusRmk.getValue(),
marcKind :marcKind.getValue(),
startDate :indexFun.getDateFieldFormatValue(startDate),
endDate :indexFun.getDateFieldFormatValue(endDate),
queryFromForm :true
},
callback: function(r, options, success) {
if (!success) {
centerStore.removeAll();
}
}
});
8 centerrGrid.getView().refresh(); //可以使列号正确显示