1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    25
    Vote Rating
    0
    minjuny is on a distinguished road

      0  

    Default Unanswered: combobox in grid column's row editor fire 'select' event only once..

    Unanswered: combobox in grid column's row editor fire 'select' event only once..


    I have grid with rowediting plug-in, and it's editor have 3 combobox.
    3 combo-boxes are dependent for example, when user select first combo box, we have to clear second combo-box and load new data from server. And then user can select sencond combo box,....

    So, I'd try to make 'select' event listener for first and second combox. But this select lisenter didn't be fired after first time selection.

    Furthermore, I tried with 'change' event also, but I could get same result.

    below is the my full source code w/o model, store
    Code:
    Ext.define('Master.view.organ.List', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.organlist',
    
    
        autoScroll: true,
        setLoading: true,
    
    
        shortColumn: false,
    
    
        requires: [
            'Ext.grid.*',
            'Ext.data.*',
            'Ext.selection.CheckboxModel',
        ],
    
    
        initComponent: function () {
            var me = this;
                cateStore1 = Ext.create('Master.store.OrganCategories'),
                cateStore2 = Ext.create('Master.store.OrganCategories'),
                cateStore3 = Ext.create('Master.store.OrganCategories');
            var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit:1,
                autoCancel: false
            });
    
    
            Ext.apply(this, {
                plugins: rowEditor,
                store: 'Organs',
                columnLines: true,
    
    
                columns: [{
                    text: 'idx',
                    dataIndex: 'organ_idx',
                    width: 30
                }, {
                    text: '대분류',
                    dataIndex: 'category1',
                    width: 70,
                    renderer: function (value, metaData, record, row, col, store, gridView) {
                        return record.get('category1_name');
                    },
                    editor: {
                        xtype: 'combo',
                        allowBlank: false,
                        itemId: 'category1',
                        store: cateStore1,
                        displayField: 'title',
                        valueField: 'co_idx',
                        editable: false,
                        listConfig: {
                            loadingText: '읽는 중',
                            emptyText: '분류가 없습니다.'
                        },
                    }
                }, {
                    text: '중분류',
                    dataIndex: 'category2',
                    displayField: 'category2_name',
                    width: 50,
                    renderer: function (value, metaData, record, row, col, store, gridView) {
                        return record.get('category2_name');
                    },
                    editor: {
                        xtype: 'combo',
                        itemId: 'category2',
                        store: cateStore2,
                        displayField: 'title',
                        valueField: 'co_idx',
                        editable: false,
                        listConfig: {
                            loadingText: '읽는 중',
                            emptyText: '분류가 없습니다.'
                        },
                    }
                }, {
                    text: '소분류',
                    dataIndex: 'category3',
                    displayField: 'category3_name',
                    width: 90,
                    renderer: function (value, metaData, record, row, col, store, gridView) {
                        return record.get('category3_name');
                    },
                    editor: {
                        xtype: 'combo',
                        itemId: 'category3',
                        store: cateStore3,
                        displayField: 'title',
                        valueField: 'co_idx',
                        editable: false,
                        listConfig: {
                            loadingText: '읽는 중',
                            emptyText: '분류가 없습니다.'
                        },
                    }
                }, {
                    text: '카테고리 추가',
                    dataIndex: 'category_text',
                    width: 100,
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    text: '교육기관 이름',
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield',
                    }
                }, {
                    text: '사업자 번호',
                    dataIndex: 'business_regnum',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }, {
                    text: '법인 번호',
                    dataIndex: 'corporation_regnum',
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    text: '설립자 이름',
                    dataIndex: 'founder',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                } ,{
                    text: '대표 전화번호',
                    dataIndex: 'phone',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }, {
                    text: '대표 이메일',
                    dataIndex: 'email',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
                }, {
                    text: '팩스',
                    dataIndex: 'fax',
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    text: '주소',
                    dataIndex: 'address',
                    editor: {
                        xtype: 'textfield',
                        allowBlank: false
                    }
    //            }, {
    //                text: '설립일',
    //                dataIndex: 'found_date',
    //                editor: {
    //                    xtype: 'datefield',
    //                    allowBlank: false
    //                }
                }, {
                    text: '홈페이지',
                    dataIndex: 'website',
                    editor: {
                        xtype: 'textfield'
                    }
                }],
    
    
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    items: [{
                        text:'교육기관 추가',
                        tooltip:'새로운 교육기관을 추가합니다.',
                        action: 'add',
                        handler:function () {
                            var store = me.getStore();
    
    
                            rowEditor.cancelEdit();
                            var r = Ext.create('Master.model.Organ');
                            store.insert(0, r);
                            rowEditor.startEdit(0, 0);
                        }
                    }, '->', {
                        text:'교육기관 삭제',
                        tooltip:'교육기관을 삭제합니다. 되돌릴 수 없습니다.',
                        action: 'delete',
                        handler:function () {
                            var store = me.getStore();
                            rowEditor.cancelEdit();
                            store.remove(me.getSelectionModel().getSelection());
                            store.sync();
                        }
                    }]
                }, {
                    xtype: 'pagingtoolbar',
                    store: 'Organs',
                    dock: 'bottom',
                    displayInfo: true
                }]
    
    
            });
    
    
            this.callParent(arguments);
        },
    
    
        //  Template Functions
        afterRender: function () {
            var me = this;
            this.callParent(arguments);
    
    
            //  데이터베이스를 읽어온다.
            this.reloadList(false);
            this.on('beforeedit', me.beforeEditing);
            this.on('edit', me.endEditing);
            this.on('canceledit', me.cancelEditing);
        },
    
    
        //  Interface함수: Controller에서 호출한다.
        reloadList: function (clearpage) {
            var store = this.getStore();
    
    
            if (clearpage) {
                store.loadPage(1);
            } else {
                store.load();
            }
        },
    
    
        beforeEditing: function (editor, e, opts) {
            console.log(editor);
            var record = e.record,
                combo1Idx = record.get('category1'),
                combo2Idx = record.get('category2');
            var form = editor.editor.form,
                combo1 = form.findField('category1'),
                combo2 = form.findField('category2'),
                combo3 = form.findField('category3');
            var combo2Store = combo2.getStore(),
                combo2Proxy = combo2Store.getProxy();
            var combo3Store = combo3.getStore(),
                combo3Proxy = combo3Store.getProxy();
    
    
            //  기본적으로 현재 상태로 각 스토어의 extraParams를 설정하도록 한다.
            combo2Proxy.extraParams = { parent: combo1Idx };
            combo2Store.load();
            combo3Proxy.extraParams = { parent: combo2Idx };
            combo3Store.load();
    
    
            combo1.on('select', function (combo, records, opts) {
                console.log('combo1 select handler is called');
    
    
                combo2.clearValue();
                combo2.enable();
                combo2Proxy.extraParams = { parent: records[0].get('oc_idx') };
    
    
                combo3.clearValue();
                combo3.disable();
                combo2Store.load();
    
    
            } );
    
    
            combo2.on('select', function (combo, records, opts) {
    
    
                console.log('combo2 select handler is called');
    
    
                combo3.clearValue();
                combo3.enable();
                combo3Proxy.extraParams = { parent: records[0].get('oc_idx') };
                combo3Store.load();
            });
        },
    
    
        endEditing: function (editor, e, opts) {
            console.log(e);
            temp = e.record;
            this.getStore().sync();
        },
    
    
        cancelEditing: function (editor, e, opts) {
            if(e.record.get('organ_idx') == 0) {
                this.getStore().remove(e.record);
                this.getStore().sync();
            }
        }
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    667
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

Thread Participants: 1

Tags for this Thread