Results 1 to 2 of 2

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

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    25
    Vote Rating
    0
      0  

    Default 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,389
    Answers
    716
    Vote Rating
    498
      0  

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •