Ext JS

From PGWiki

Ext JS는 자바스크립트 프레임워크이다.

constructor와 initComponent의 호출 순서

theExtendedClass = Ext.extend(theParentClass, {  
    //reconfigurables 
    aaa: 'test',

    //end reconfigurables

    /** @private */
    constructor: function(config){
        config = config || {};

        Ext.apply(config, {
            // stuff
        });

        console.info('1. before constructor parent');

        // call the superclass's constructor
        theExtendedClass.superclass.constructor.call(this, config);

        console.info('4. after constructor parent');
    },

    /** @private */
    initComponent: function(config) {
        console.info('2. before initComponent parent');

        Ext.apply(this, {
            // stuff
        });

        // call the superclass's constructor
        theExtendedClass.superclass.initComponent.apply(this, arguments);

        console.info('3. after initComponent parent');
    }
});

TreeStore가 반복적으로 로딩되는 문제

TreeStore를 사전 적재(pre-loaded) 방식으로 한꺼번에 불러오는 과정에서 프록시를 Ajax로 하면 무한 로딩이 되는 문제가 있다.

정확히는 프록시의 JsonReader의 root 속성을 사용자 정의하는 경우가 문제이며, 이러한 경우에는 반환되는 데이터에서 자식 노드를 가리키는 필드 이름을 사용자 정의하는 root 속성의 값과 일치하게 해주면 된다.

스토어 프록시에서 JSON 형식으로 매개변수 전달하기

ExtJS 4.2.3부터 제공되는 옵션인 paramsAsJson을 사용하면 JSON 데이터를 바로 송신할 수 있다.

var myStore = Ext.create('Ext.data.Store', {
    model: 'myModel',
    //*
    proxy: new Ext.data.proxy.Ajax({
        url: '/api/user/list',
        reader: new Ext.data.JsonReader({
            root: 'entity'
        }),
        paramsAsJson: true,
    }),
    /*/
    proxy: {
        type: 'ajax',
        url: '/api/user/list',
        paramsAsJson: true,
        reader: {
            type: 'json',
            root: 'args'
        }
    },
    //*/
    listeners: {
        beforeload: function(store, operation, eOpts) {
            store.proxy.setExtraParam(
                'entity',
                {
                    potatogim: 1,
                }
            );

            console.log(operation);
        },
        load: function(store, records, success) {
            console.log(store);
        }
    }
});

위 방법 중 1안은 프록시를 재정의해서 사용하는 경우에 적합한 경우이고, 그게 아니라 단순 매개변수 변환이라면 2안이 조금 더 간단한 선택지가 될 수 있겠다.

폼 제출 시, JSON 형식으로 매개변수 전달하기

var myFormPanel = Ext.create('Ext.form.Panel', {
    id: 'myForm',
    frame: false,
    // jsonSubmit을 활성화하면 폼 데이터가 JSON 형식으로 제출된다.
    jsonSubmit: true,
    items: [
        {
            ...
        },
        {
            xtype: 'textfield',
            fieldLabel: "Name",
            id: 'username',
            name: 'username',
            allowBlank: false,
        }
    ]
});

Ext.getCmp('myForm').getForm().submit({
    method: 'POST',
    url: '/api/user/info',
    # submit() 호출 시점에 지정된 params 또한 JSON 형식으로 전달된다.
    params: {
        username: ...,
    },
});

프록시에서 스토어로 데이터 적재 전 변경하기

var myStore = Ext.create('Ext.data.Store', {
    model: 'myModel',
    proxy: {
        type: 'ajax',
        url: '/api/user/info',
        reader: {
            type: 'json',
            root: 'entity',
            totalProperty: 'count',
            getResponseData: function(response) {
                try {
                    var json = Ext.decode(response.responseText);

                    return this.readRecords({
                        entity: json.group,
                        count: json.count ? json.count : 0,
                        success: json.success,
                    });
                }
                catch(ex) {
                    var error = new Ext.data.ResultSet({
                        total: 0,
                        count: 0,
                        records: [],
                        success: false,
                        message: ex.message,
                    });

                    Ext.log('Unable to parse the JSON returned by the server');
                    return error;
                }
            }
        }
    },
    load: function(store, records, success) {
        ...
    }
});

바깥 고리