1
저는 ExtJS4를 사용하고 있고 양식을 사용하여 검색 기능을 구축하려고합니다. 양식이 표시되고 사용자가 4 가지 기준 중 하나를 입력하고 검색을 클릭하면 그리드가 작성되고 JSON 호출의 결과가 표시됩니다.ExtJS4 리로드 그리드 패널 버튼 핸들러
내가 얻으려고하는 것은 사용자가 다른 검색 조건을 입력하고 다시 검색을 클릭하고 새로운 결과를 표시하도록 그리드를 업데이트 할 수있게하는 것입니다. 첫 번째 시도에서 그리드는 Search를 클릭 할 때마다 렌더링되고 두 번째 시도에서는 단순히 이전 항목을 제거하지 않고 검색 결과를 그리드로 푸시합니다.
여기에 내 현재 설정입니다 : 내가 그리드를 새로 고침 및로드()를 호출하려고했습니다
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
});
});
하지만 난 오른쪽 조합에 아직 명중했다고 생각하지 않습니다. 그리드의 내용을/ajax에 대한 최신 Ajax 호출의 내용으로 교체하고 싶습니다.
이 ExtJs3입니까? – sha
예 ExtJS4입니다. –