[Ext JS] Window, FormPanel, SearchField 결과 업데이트 방법

Ext.Window에 FormPanel을 구성하고, 여러 필드 설정, 그 가운데 SearchField를 장착했다. 검색하면 서버에 가서 데이터를 가져와서, 윈도의 FormPanel에 채워주는 작업이다.

 

어떻게 하면 될까?

 

아래의 예는 크게 관련은 없지만, 그냥, 참고로…

http://hilldan.springnote.com/pages/1525768

var data = []; modifiedRecords = grid.store.getModifiedRecords(); for(i=0;i<modifiedRecords.length;i++) {     data.push(modifiedRecords[i].data); }

 

내려받는 데이터와 채우려는 폼의 필드가 똑같으면, 훨씬 간단한 방법이 있지만, 여기서는 데이터를 모아서 넣어줘야 한다.

FormPanel.getForm().loadRecord(rec); // 한 방에 채우는 방법.

 

국제도서번호(ISBN)을 검색하면, 서버에서 Naver API를 호출해서 결과를 JSON으로 내려준다. 그걸 받아서 모아서 폼에 채운다.

 

var storeFormPanelAddBook = new Ext.data.Store({     url: '/index/search-isbn'     ,reader: new Ext.data.JsonReader(         { root: 'rows' ,totalProperty: 'num_of_rows' ,id: 'id' }         ,[             'id'             ,'isbn'             ,'title'             ,'link'             ,'author'             ,'pubdate'             ,'description'         ]     )     ,listeners: {         load: function(store, records, options) {             var win = Ext.getCmp('WinAddBook');             if (win != undefined && win != null) {                 try {                     var form = win.getForm();                     var data = store.data.get(0).data;                     form.findField('title').setValue(data['title']);                     var info = String.format("저자: {0} 출판일: {1} 개요: {2} ISBN: {3}",                             data['author'], data['pubdate'], data['description'], data['isbn']);                     form.findField('info').setValue(info);                 } catch (e) {                     console.log('exception ', e);                 }             }         }         ,loadexception: function(store, options, response, e) {             console.log('storeFormPanelAddBook loadexception event');         }     } });

 

중간에 있는 win.getForm()은 아래와 같이, 따로 설정해준 거다. 하도 자주 콜하게 되는 지라…

 

WinAddBook = Ext.extend(Ext.Window, {     initComponent: function(config) {       // 생략     } // the end of initComponent     ,getForm: function() {         return this.findById('FormPanelAddBook').getForm()     } });

 

암튼, 요약하면, 이렇다. store의 ‘load’ 이벤트를 기다렸다가, 그게 발생하면, 쪼르르 달려가서, 데이터를 폼에 넣어주면 된다.