grid store를 load하기 위한 일반적인 방법은 button 등의 action에 grid.store의 속성을 지정하여 grid.store.load()를 실행시킨다.
grid.store의 속성으로는 store.proxy.url을 지정하고 load()함수를 호출하면 proxy가 url을 호출 할 때 GET 방식을 사용한다.
Ext.define('GridList_Model',{
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
reader: 'json'
},
fields: [ 'field1','field2','field3','field4','field5','field6','field7','field8' ]
});
// create the Data Store
var GridList_store = Ext.create('Ext.data.Store', {
model: 'GridList_Model',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/query/JSON_GRID1.jsp',
reader: {
type: 'json'
}
}
});
GriList_store.on('load', function(){ AfterGrid(); });
// create the grid
var GridMasterList = Ext.create('Ext.grid.Panel', {
id: 'GridList',
// data of this grid comes from 'GridList_store' store
store: GridList_store,
columnLines: true,
...
} // end of grid definition
Ext.create('Ext.form.FormPanel', {
width: 1024,
id: 'SearchForm',
margin: '0 0 10 0',
xtype: 'fieldset',
layout: 'column',
border: 1,
items: [{
xtype: 'datefield',
fieldLabel: '기준날짜',
format: 'Y-m-d',
id: 'BaseDate1',
maxLength:10,
width:300 ,
...
GET 방식은 URL에 parameter를 붙여 전송하는 방식이다.
// form submit button definition....
xtype: 'button',
id: 'OkButton',
width: '120',
height: '30',
margin: '10px 10px 10px 10px',
handler: function() {
var date1 = Ext.getCmp('BaseDate1');
var baseday = date1.getSubmitValue().replace("/g", "-");
baseday = baseday.replace(/-/g, "");
var name = Ext.getCmp('Name').value();
var addr = Ext.getCmp('Address').value();
Ext.getCmp('GridList').show();
// store : store of grid. store is data part of 'GridList' grid...
var store = Ext.getCmp('GridList').getStore();
// add parameter to url with '?' and '&' parameter...
// : url = 'http://www.xxx.com/query.jsp?data1=Hi&data2=Hello&data3=world
store.proxy.url = "/query/JSON_GRID1.jsp?DATE="+baseday+'&NAME=' + name + '&ADD=' + addr;;
store.load();
},
text: '검색'
Form의 Field가 많은 경우 field를 모두 parameter를 모두 url로 지정해야 한다. 그런데 ajax로 서버에 request를 보내는 경우 꼭 GET 방식만 보낼 수 있는 것이 아니다. POST 방식도 가능하다. ExtJs API에는 나와있지 않지만 POST 방식으로 데이터를 보내면 URL이 간단하고 여러개의 parameter를 실수 없이 보낼 수 있다.
xtype: 'button',
id: 'OkButton',
width: '120',
height: '30',
margin: '10px 10px 10px 10px',
handler: function() {
var frm = this.up('form').getForm();
var values = frm.getValues();
// values is object ( 'values' is record type )
// parameters are object's record
Ext.getCmp('GridList').show();
var store = Ext.getCmp('GridrList').getStore();
store.proxy.url = "/query/JSON_GRID1.jsp";
// change actionMethod.read as POST
store.proxy.actionMethods.read = "POST";
// ajax parameters are form field values...(Object)
store.proxy.extraParams = values;
store.load();
},
text: '검색'
POST 방식으로 보내면 당연히 각 parameter를 일일이 지정하지 않아도 form에 있는 모든 field 가 전달되므로 쉽고 편리하다.store.proxy.extraParams에 ‘values’ Object를 지정하고 actionMethods.read를 POST로 지정하여 store.load()를 실행하면 Server측에는 data가 POST 방식으로 전달된다. 이 때 Server측에 전달되는 변수 명은 각 field의 id 이다.
