formpanel로 만든후 ajax로 값을 가져온후 각 컴퍼넌트에 값을 세팅하려니 넘어온 xml을 일일이 파싱해야하고 이것을 각각 textfield등에 넣어주려니 여간 귀찮은 작업이 아니었다.
추후 유지 보수할때도 상당히 귀찮아 질듯하여 이것저것 뒤지다가 formpanel이 ajax로 xml을 가져오면 파싱하여 값을 넣어주는 기능이 있는것을 발견하고 해보았다.
Extjs만든 개발자를 구경하고싶다.


Ext.onReady(function(){

    var fs = new Ext.FormPanel({
        ...

        // configure how to read the XML Data
/*폼 페널에 값을 세팅할 xml

<?xml version="1.0" encoding="UTF-8"?>
<message success="true">
<contact>
    <name>
        <first>Jack</first>
        <last>Slocum</last>
    </name>
    <company>Ext JS</company>
    <email>support@extjs.com</email>
    <state>OH</state>
    <dob>04/15/2007</dob>
</contact>
</message>

*/
        reader : new Ext.data.XmlReader({
            record : 'contact', <--contact 노드를 기준노드로 설정하여 하위 노드의 값을 가져온다.
            success: '@success'
        }, [
            {name: 'first', mapping:'name/first'},  <--name은 formpanel의 textfield명이 된다.이 되고 mapping은  xml의 노드 명이된다.
            {name: 'last', mapping:'name/last'},
            'company', 'email', 'state',
            {name: 'dob', type:'date', dateFormat:'m/d/Y'}        
]),
        errorReader: new Ext.form.XmlErrorReader(),

        items: [
            new Ext.form.FieldSet({
                title: 'Contact Information',
                autoHeight: true,
                defaultType: 'textfield',
                items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        width:190
                    ....
                    new Ext.form.ComboBox({
                        fieldLabel: 'State',
                        hiddenName:'state',
                        store: new Ext.data.SimpleStore({
                            fields: ['abbr', 'state'],
                            data : Ext.exampledata.states // from states.js
                        }),
                        valueField:'abbr',
                        displayField:'state',
                        typeAhead: true,
                        mode: 'local',
                        triggerAction: 'all',
                        emptyText:'Select a state...',
                        selectOnFocus:true,
                        width:190
                    }),

                    new Ext.form.DateField({
                        fieldLabel: 'Date of Birth',
                        name: 'dob',
                        width:190,
                        allowBlank:false
                    })
                ]
            })
        ]
    });


        fs.getForm().load({url:'xml-form.xml', waitMsg:'Loading'}); <-- form panel의 값을 로딩시키는 함수 호출 waitMsg는 로딩시 표시될 문자열을 설정하는 변수이다.



Ext.form.XmlErrorReader = function(){
    Ext.form.XmlErrorReader.superclass.constructor.call(this, {
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    );
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);

Posted by genius3k

티스토리 툴바