extjs 做数据库增删改查时,原先是全部查上来显示的,现在用条件查询,怎么在原先的位置上显示条件查询的结果
重写store的onbeforeload方法,构造查询参数,执行查询时这些参数可以直接在后台获取到。这种方式比较好理解。
每次刷新(refreshGrid)都会执行这个方法。
[code="java"]
var grid;
/**
var rIndex;/** 操作行的id **/
function getGrid(){
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : proPath + '/area/area!orderGrid.action'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'total',root : 'root'},
[ {name:'id'},
{name:'name'},
{name:'code'}
]
)
});
var rn = new Ext.grid.RowNumberer();
var colm = new Ext.grid.ColumnModel([rn,{
header : "ID",
dataIndex : "id",
width : 50,
sortable : true
}, {
header : "区域名称",
dataIndex : "name",
width : 170,
sortable : true
}, {
header : "区域代码",
dataIndex : "code",
width : 100,
sortable : true
},{
header : "排序",
dataIndex : "id",
renderer : orderButton,
width : 50
}]);
grid = new Ext.grid.GridPanel({
id : JCmpId.grid,
region : 'center',
store: store,
cm : colm,
stripeRows: true,
height:320,
width:600,
frame:true,
title:'区域排序',
plugins: new Ext.ux.PanelResizer({
minHeight: 100
}),
tbar : new Ext.Toolbar({
items : [
'-', '所属城市 ', citySiteCom(),
'-',
{text : '查询',
iconCls : 'mtfQuery',
handler :function (){refreshGrid(grid);}
}
]
}),
bbar: new Ext.PagingToolbar({
pageSize: 1000,
store: store,
displayInfo: true,
refresh : function() {
refreshGrid(grid);
},
plugins: new Ext.ux.ProgressBarPager()
})
});
grid.addListener('rowclick', function(grid,rowindex,e){
rIndex = rowindex;
});
// 查询参数统一在此处处理 ,点击刷新按钮更新 start limit见 base.js refreshGrid
store.on('beforeload', function(thiz, options) {
Ext.apply(thiz.baseParams, {
time : new Date().getTime(),
'cityId' : Ext.getCmp("csId").getValue()
});
});
// store.load({
// params : params
// });
return grid;
}
function refreshGrid(grid) {
var s = grid.getStore();
Ext.apply(params, {
'start' : grid ? grid.getBottomToolbar().cursor : 0
});
s.load( {
params : params
});
}
[/code]
你的数据显示应该是Grid的吧,直接把grid数据刷掉不就可以了?有什么问题?
在Store的请求上加参数
ext3.0使用baseParams
ext4.0使用extraParams
Ext.getCmp('unusualGrid').getStore().baseParams={
sapNum:Ext.getCmp("sapNum").getValue(),
poNum:Ext.getCmp("poNum").getValue(),
mateNum:Ext.getCmp("mateNum").getValue()
}
Ext.getCmp("unusualGrid").getStore().load();
把新的查询条件设置到store里面,然后直接调用store.load(),grid自然就刷新显示新的查询结果了。
[code="java"]
//事件列表
Mes.issue.IssueGrid = Ext.extend(Ext.grid.GridPanel , {
initComponent : function() {
var me = this ,pageSize = 25,
sm = new Ext.grid.CheckboxSelectionModel(),
store = new Ext.data.JsonStore({
autoDestroy: true,
url: 'issue!query.action',
root: 'list',
totalProperty: 'total',
fields : [
'id' , 'status' , 'statusDesc','happenAt','definationId',
'causeId' , 'causeCode' , 'causeName' , 'typeId' , 'typeName' , 'typeCode' , 'oitType' ,
'locationId' , 'locationFullName' , 'equiipmentId' , 'equiipmentCode' , 'equipmentName' ,
'reportRfid' , 'reportName' , 'reportTime' ,
'check' , 'checkRfid' , 'checkName' , 'checkTime',
'manage', 'manageRfid','manageName','manageTime','manageDesc',
'close','closeRfid','closeName','closeTime',
'order' , 'ip', 'createdAt','modifiedAt','createdBy','modifiedBy'
],
listeners : {
beforeload : function(store){
store.baseParams.start = 0;
store.baseParams.limit = pageSize;
store.baseParams.condition = me.getQueryCondition();
},
exception : function(store , type , action , options , response) {
var resp = Ext.decode(response.responseText);
resp && resp.message && Mes.Msg.error( resp.message );
}
}
}),
colModel = new Ext.grid.ColumnModel({
defaults: {
width: 80,
sortable: true
},
columns: [
sm,
{ header : '事件原因' , dataIndex : 'causeName' },
{ header : '设备编码' , dataIndex : 'equiipmentCode' },
{ header : '设备名称' , dataIndex : 'equipmentName' },
{ header : '当前状态' , dataIndex : 'statusDesc' },
{ header : '地点', dataIndex : 'locationFullName' , width : 150},
{ header : '发生时间' , dataIndex : 'happenAt' , width : 120},
{ header : '报告RFID卡号' , dataIndex : 'reportRfid' },
{ header : '报告人' , dataIndex : 'reportName' },
{ header : '报告时间' , dataIndex : 'reportTime' , width : 120},
{ header : '是否确认' , dataIndex : 'check' },
{ header : '确认RFID卡号' , dataIndex : 'checkRfid' },
{ header : '确认人' , dataIndex : 'checkName' },
{ header : '确认时间' , dataIndex : 'checkTime' },
{ header : '是否处理' , dataIndex : 'manage' },
{ header : '处理RFID卡号' , dataIndex : 'manageRfid' },
{ header : '处理人' , dataIndex : 'manageName' },
{ header : '处理时间' , dataIndex : 'manageTime' },
{ header : '处理描述' , dataIndex : 'manageDesc' },
{ header : '是否关闭' , dataIndex : 'close' },
{ header : '关闭RFID卡号' , dataIndex : 'closeRfid' },
{ header : '关闭人' , dataIndex : 'closeName' },
{ header : '关闭时间' , dataIndex : 'closeTime' },
{ header : '创建时间' , dataIndex : 'createdAt' , width : 120},
{ header : '修改时间' , dataIndex : 'modifiedAt' , width : 120},
{ header : '创建人' , dataIndex : 'createdBy' },
{ header : '修改人' , dataIndex : 'modifiedBy' }
]
}),
bbar = new Ext.PagingToolbar({
pageSize: pageSize,
store: store,
displayInfo: true,
displayMsg: '显示事件 {0} - {1} 共 {2} 条',
emptyMsg: "没有事件显示"
});
var createContextMenu = function() {
return new Ext.menu.Menu({
items : [
{text : '导出...' , handler : function(){
Ext.each(Ext.query('form[class=export-excel]') , function(v) {
Ext.removeNode(v);
});
var params = me.queryParams , dh = Ext.DomHelper ,
form = dh.append(Ext.getBody() , {tag : 'form' ,cls : 'export-excel', action : 'issue!export.action' , method : 'post'}),
tpl = dh.createTemplate({tag : 'input' , type : 'hidden' , name : '{0}' , value : '{1}'});
tpl.append(form , ['condition.keyword' , params.keyword ? params.keyword : '']);
var tbar = me.getTopToolbar() ,
start = tbar.getComponent('startTime'),
end = tbar.getComponent('endTime');
me.queryParams.start = start.disabled ? null : (start.getValue() && start.getValue().format('Y-m-d'));
me.queryParams.end = end.disabled ? null : (end.getValue() && end.getValue().format('Y-m-d'));
if (!start.disabled)
tpl.append(form , ['condition.start' , me.queryParams.start]);
if (!start.disabled)
tpl.append(form , ['condition.end' , me.queryParams.end]);
Ext.each(params.status , function(v , i) {
tpl.append(form , ['condition.status[' + i + ']' , v]);
});
Ext.each(params.types , function(v , i) {
tpl.append(form , ['condition.types[' + i + ']' , v]);
});
form.submit();
}},
{text : '短信日志...' , handler : function() {
var sm = me.getSelectionModel();
if (!sm.hasSelection()) {
Mes.Msg.alert('请选择事件记录!');
return;
}
var issue = sm.getSelected().data;
var win = new Mes.issue.IssueLogWindow({ issueId : issue.id });
win.show();
}} ,
{text : '事件定义...' , handler : function() {
var sm = me.getSelectionModel();
if (!sm.hasSelection()) {
Mes.Msg.alert('请选择事件记录!');
return;
}
var issue = sm.getSelected().data;
var win = new Mes.issue.EventViewWindow({ issue : issue });
win.show();
}} ,
{text : '详细...' , handler : function() {
var sm = me.getSelectionModel();
if (!sm.hasSelection()) {
Mes.Msg.alert('请选择事件记录!');
return;
}
var issue = sm.getSelected().data;
var win = new Mes.issue.IssueViewWindow({ issue : issue });
win.show();
}}
]
});
};
Ext.apply(me , {
layout : 'fit',
loadMask: true,
minHeight:150,
tbar : me.createTopbar(),
bbar : bbar,
store : store,
sm : sm ,
colModel : colModel ,
listeners : {
rowclick :function(grid, rowIndex){
var record = me.store.getAt(rowIndex),
cur = me.issue,
issue = me.issue = record.data;
if(cur == undefined || (cur && (issue.id != cur.id))) {
me.fireEvent('issueselctionchange' , me , issue);
}
},
rowcontextmenu : function(grid , index ,e){
var m = createContextMenu();
e.stopEvent();
m.showAt(e.getPoint());
} ,
search : function(grid , cond) {
grid.store.load();
}
}
});
Mes.issue.IssueGrid.superclass.initComponent.call(this , arguments);
me.addEvents('issueselctionchange' , 'search');
},
createTopbar : function() {
var me = this;
function operateHandler() {
var url = this.url , sm = me.getSelectionModel();
if (!sm.hasSelection()) {
Mes.Msg.alert('请选择事件!');
return;
}
var list = [] , datas = sm.getSelections();
Ext.each(datas , function(item){
var d = item.data;
list.push(d);
});
Ext.Ajax.request({
url : url,
params : {issues : list},
success: function(response){
var resp = Ext.decode(response.responseText);
if (resp.failure) {
Mes.Msg.error(resp.message);
} else {
Mes.Msg.alert(resp.message , function(){
me.store.load();
});
}
}
});
}
return new Ext.Toolbar({
items : [
{text : '查询' , handler : function() {
win = new Mes.issue.QueryWindow({condition : me.condition});
win.on('condition' , function(panel , condition) {
var cond = condition || {};
Ext.apply(cond , me.getQueryCondition());
me.condition = cond;
me.fireEvent('search' , me , cond);
});
win.show();
}},
' ',
{ text: '刷新' , handler : function() {
me.store.load();
}},
'-',
{text : '确认' , url : 'issue!confirm.action' , handler : operateHandler},
{text : '处理', url : 'issue!process.action' , handler : operateHandler},
{text : '关闭', url : 'issue!close.action' , handler : operateHandler},
]
});
},
getQueryCondition : function() {
var cond = this.condition || {};
cond.locationId = this.location;
return cond;
}
});
[/code]
这个是我项目里的一个例子
http://qq1988627.iteye.com/blog/1108952 附件
[size=xx-large]晕,没那么复杂,重新加载load数据就可以了。
开始的时候ajax调用过一次,现在你再次调用一次。
data.reload();[/size]