본문 바로가기

닷컴's_열공/jQueryJavaScript/Ajax

[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’ 이벤트를 기다렸다가, 그게 발생하면, 쪼르르 달려가서, 데이터를 폼에 넣어주면 된다.