Edit grid does not work on 2nd attempt

[rav_leg]

Welcome on my first post.

I'm writing an app and I need some guidance, because clearly there is something I'm not doing right.

There are two buttons and both of them create a separate grid. When one of the grids is created, it is possible to edit it and add new records, as much as you want, but when I create the second one, any editing is disabled.

I know that it is not a matter of a specific grid that is coded wrong, because the first grid that is being edited always work.

I have tried to look for similar problems in the previous posts, but I could not find any clues.

So to cut story short, there is my code, i have tried to make it as simple as possible for you to decipher

    var employee_model = Ext.data.Record.create(['empl_id','fullname','first']);
    var phone_model = Ext.data.Record.create(['phone_id','phone']);
    
    
    var employees = new Ext.data.ArrayStore({
        fields:employee_model,
        idIndex: 0
    });
    
    var phones = new Ext.data.ArrayStore({
        fields:phone_model,
        idIndex: 0
    });
    
    var myData = [
        [1, 'Fred Flintstone', 'Fred'],  
        [2, 'Barney Rubble', 'Barney']
    ];
    employees.loadData(myData);
    
    var myPhones = [
        [1, '07981167840'],  
        [2, '00441234566']
    ];
    phones.loadData(myPhones);
    
    var text_editor = new Ext.form.TextField();
    
    function show_employees() {
        var contentDiv = Ext.get('contentDiv');
        
        var employees_grid = new Ext.grid.EditorGridPanel({
                autoExpandColumn: 'empl-col-full',
                frame:false,
                title: 'Employees',
                height:300,
                width:330,
                store: employees,
                tbar: [
                    {
                        text: 'Add new employee', 
                        iconCls:'add',
                        handler: function(){
                            var r= new employee_model ({
                                    empl_id: 0,
                                    fullname: '',
                                    first: ''
                                });
                            employees_grid.stopEditing();
                            employees.insert(0,r);
                            employees_grid.startEditing(0,0);    
                        }
                    },'-'
                    
                ],
                columns: [
                    {id: 'empl-col-first', header: 'First name', dataIndex: 'first',editor:text_editor},
                    {id: 'empl-col-full', width:30, header: 'Full name', dataIndex: 'fullname',editor:text_editor}
                    
                ]
            });
        
        if (!contentDiv) {
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            employees_grid.render('contentDiv');
        }else {
            contentDiv.remove();
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            employees_grid.render('contentDiv');
        }
    }
    
    function show_phones() {
        var contentDiv = Ext.get('contentDiv');
        
        var phones_grid = new Ext.grid.EditorGridPanel({
                autoExpandColumn: 'phon-col-numb',
                frame:false,
                title: 'Phones',
                height:300,
                width:330,
                store: phones,
                tbar: [
                    {
                        text: 'Add new phone', 
                        iconCls:'add',
                        handler: function(){
                            var r= new phone_model ({
                                    phone_id: 0,
                                    phone: ''
                                });
                            phones_grid.stopEditing();
                            phones.insert(0,r);
                            phones_grid.startEditing(0,0);    
                        }
                    },'-'
                    
                ],
                columns: [
                    {id: 'phon-col-id', header: 'Id', dataIndex: 'phone_id',editor:text_editor},
                    {id: 'phon-col-numb', width:30, header: 'Number', dataIndex: 'phone',editor:text_editor}
                    
                ]
            });
        
        if (!contentDiv) {
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            phones_grid.render('contentDiv');
        }else {
            contentDiv.remove();
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            phones_grid.render('contentDiv');
        }
    }


    
    var win = new Ext.Toolbar({
        renderTo: document.body,
        items: [
            {
                text: 'Employees', 
                handler: show_employees
            },'-',
            {
                text: 'Phones', 
                handler: show_phones
            }
        ]
    });

    win.show(); 

Probbably it will be too easy for most of you, but please do not hesitate to respond. I am looking forward to any suggestions.

[httpdotcom]

Most likely, when you "close" one of your grids, you are destroying something you need for the editing process.
When creating your grid objects, if you are trying to reuse any components, make sure you are either not destroying them, or recreating them on demand.

Welcome on my first post.

I'm writing an app and I need some guidance, because clearly there is something I'm not doing right.

There are two buttons and both of them create a separate grid. When one of the grids is created, it is possible to edit it and add new records, as much as you want, but when I create the second one, any editing is disabled.

I know that it is not a matter of a specific grid that is coded wrong, because the first grid that is being edited always work.

I have tried to look for similar problems in the previous posts, but I could not find any clues.

So to cut story short, there is my code, i have tried to make it as simple as possible for you to decipher

    var employee_model = Ext.data.Record.create(['empl_id','fullname','first']);
    var phone_model = Ext.data.Record.create(['phone_id','phone']);
    
    
    var employees = new Ext.data.ArrayStore({
        fields:employee_model,
        idIndex: 0
    });
    
    var phones = new Ext.data.ArrayStore({
        fields:phone_model,
        idIndex: 0
    });
    
    var myData = [
        [1, 'Fred Flintstone', 'Fred'],  
        [2, 'Barney Rubble', 'Barney']
    ];
    employees.loadData(myData);
    
    var myPhones = [
        [1, '07981167840'],  
        [2, '00441234566']
    ];
    phones.loadData(myPhones);
    
    var text_editor = new Ext.form.TextField();
    
    function show_employees() {
        var contentDiv = Ext.get('contentDiv');
        
        var employees_grid = new Ext.grid.EditorGridPanel({
                autoExpandColumn: 'empl-col-full',
                frame:false,
                title: 'Employees',
                height:300,
                width:330,
                store: employees,
                tbar: [
                    {
                        text: 'Add new employee', 
                        iconCls:'add',
                        handler: function(){
                            var r= new employee_model ({
                                    empl_id: 0,
                                    fullname: '',
                                    first: ''
                                });
                            employees_grid.stopEditing();
                            employees.insert(0,r);
                            employees_grid.startEditing(0,0);    
                        }
                    },'-'
                    
                ],
                columns: [
                    {id: 'empl-col-first', header: 'First name', dataIndex: 'first',editor:text_editor},
                    {id: 'empl-col-full', width:30, header: 'Full name', dataIndex: 'fullname',editor:text_editor}
                    
                ]
            });
        
        if (!contentDiv) {
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            employees_grid.render('contentDiv');
        }else {
            contentDiv.remove();
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            employees_grid.render('contentDiv');
        }
    }
    
    function show_phones() {
        var contentDiv = Ext.get('contentDiv');
        
        var phones_grid = new Ext.grid.EditorGridPanel({
                autoExpandColumn: 'phon-col-numb',
                frame:false,
                title: 'Phones',
                height:300,
                width:330,
                store: phones,
                tbar: [
                    {
                        text: 'Add new phone', 
                        iconCls:'add',
                        handler: function(){
                            var r= new phone_model ({
                                    phone_id: 0,
                                    phone: ''
                                });
                            phones_grid.stopEditing();
                            phones.insert(0,r);
                            phones_grid.startEditing(0,0);    
                        }
                    },'-'
                    
                ],
                columns: [
                    {id: 'phon-col-id', header: 'Id', dataIndex: 'phone_id',editor:text_editor},
                    {id: 'phon-col-numb', width:30, header: 'Number', dataIndex: 'phone',editor:text_editor}
                    
                ]
            });
        
        if (!contentDiv) {
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            phones_grid.render('contentDiv');
        }else {
            contentDiv.remove();
            Ext.DomHelper.append(Ext.getBody(), {tag:'div',id:'contentDiv'});
            phones_grid.render('contentDiv');
        }
    }


    
    var win = new Ext.Toolbar({
        renderTo: document.body,
        items: [
            {
                text: 'Employees', 
                handler: show_employees
            },'-',
            {
                text: 'Phones', 
                handler: show_phones
            }
        ]
    });

    win.show(); 

Probbably it will be too easy for most of you, but please do not hesitate to respond. I am looking forward to any suggestions.

[rav_leg]

Solved.

The problem was caused by the shared cell editor.

All columns in both grids had the same format so I figured - why create new cell editor

new Ext.form.TextField() 

...if I can create one and assign variable to it so i could call that variable in each column editor definition?

Like so:

{id: 'empl-col-first', header: 'First name', dataIndex: 'first',editor:text_editor}, 
{id: 'empl-col-full', width:30, header: 'Full name', dataIndex: 'fullname',editor:text_editor} 

When I assigned a new Ext.form.TextField() for each column, ther problem disappeared.

Thanks for the clue httpdotcom.