我正在使用ExtJS4并尝试使用表单构建搜索功能。我已经显示了表单，并且用户输入了4个条件之一并单击“搜索”，然后构建网格并显示JSON调用的结果。
我想要实现的目的是让用户能够输入不同的搜索条件并再次单击“搜索”并更新网格以显示新结果。在我的第一次尝试中，每次单击“搜索”时都会渲染网格，在第二次尝试时，它只是将搜索结果推送到网格中而不删除之前的条目。
这是我目前的设置：
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
{
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'component',
id: 'formErrorState',
baseCls: 'form-error-state',
flex: 1
}, {
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'FOO',
multiSelect:true,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: Ext.get('results'),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
var form = this.up('form').getForm();
var store = new Ext.data.Store({
model: 'job',
pageSize: 10,
autoLoad: true,
remoteSort:true,
proxy: {
actionMethods: {
read: 'POST'
},
type: 'ajax',
fields: ['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '/search?'+ form.getValues(true),
reader:{
type: 'json',
root: 'results',
totalProperty: 'totalCount'},
}, //end proxy
sorters:[{
property:'version',
direction:'ASC'
}]
}).on('load', function(){
userGrid.reconfigure(this); // ???
});
} // end button handler
}] //end items
}] // end dockeditems
});
});
我已经尝试刷新网格并调用load（），但我认为我还没有找到正确的组合。我希望将网格内容替换为最新的ajax调用/ search。
答案 0 :(得分：2)
您不应在每个搜索按钮上单击创建新面板和商店，因此将其移出按钮处理程序。如果您只是在用户按下搜索按钮时调用网格存储上的load（{params：{search：'whatever'}}），您将自动在网格中填充新数据。您无需重新配置网格或执行任何其他操作。本质上，网格绑定到商店，当商店数据发生变化时，网格后面的视图将自动刷新。
答案 1 :(得分：0)
我通过遵循DmitryB的一些建议解决了这个问题。我继承了这段代码，经过一些按摩，我按照预期的方式工作。以下是我的最终解决方案。在按钮上的处理函数中，您需要确保并更新商店中定义的代理的URL，以便在调用store.load（）时它是正确的。
Ext.require([
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
//'extjs.SlidingPager'
]);
/*Setup Data Model*/
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = new Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'none'
},
items: [{
xtype: 'textfield',
name: 'jobnumber',
fieldLabel: 'Job Number',
allowBlank: true,
minLength: 7,
maxLength: 7
}, {
xtype: 'textfield',
name: 'accountnumber',
fieldLabel: 'Account Number',
allowBlank: true,
minLength: 6,
maxLength: 7
}, {
xtype: 'textfield',
name: 'customername',
fieldLabel: 'Customer Name',
allowBlank: true,
}, {
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
store.proxy.url = '/search?' + formPanel.getForm().getValues(true)
store.load();
} // end button handler
}] //end items
}] // end dockeditems
});
var store = new Ext.data.Store({
model:'job',
pageSize:10,
autoLoad: false,
remoteSort:true,
proxy:{
type:'ajax',
fields:['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '',
reader:{
totalProperty:'totalCount',
type: 'json',
root: 'results'
},
actionMethods: 'POST'
},
sorters:[{
property:'version',
direction:'ASC'
}]
});
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'userGrid',
multiSelect: false,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: 'results',
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
});