[ExtJs] grid store “POST” 방식으로 load하기

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 이다.