Results 1 to 3 of 3

Thread: Edit grid does not work on 2nd attempt

  1. #1

    Default Edit grid does not work on 2nd attempt

    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

    PHP Code:
        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,
            
    idIndex0
        
    });
        
        var 
    phones = new Ext.data.ArrayStore({
            
    fields:phone_model,
            
    idIndex0
        
    });
        
        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,
                    
    storeemployees,
                    
    tbar: [
                        {
                            
    text'Add new employee'
                            
    iconCls:'add',
                            
    handler: function(){
                                var 
    r= new employee_model ({
                                        
    empl_id0,
                                        
    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:30header'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,
                    
    storephones,
                    
    tbar: [
                        {
                            
    text'Add new phone'
                            
    iconCls:'add',
                            
    handler: function(){
                                var 
    r= new phone_model ({
                                        
    phone_id0,
                                        
    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:30header'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({
            
    renderTodocument.body,
            
    items: [
                {
                    
    text'Employees'
                    
    handlershow_employees
                
    },'-',
                {
                    
    text'Phones'
                    
    handlershow_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.

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288

    Default

    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.

    Quote Originally Posted by rav_leg View Post
    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

    PHP Code:
        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,
            
    idIndex0
        
    });
        
        var 
    phones = new Ext.data.ArrayStore({
            
    fields:phone_model,
            
    idIndex0
        
    });
        
        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,
                    
    storeemployees,
                    
    tbar: [
                        {
                            
    text'Add new employee'
                            
    iconCls:'add',
                            
    handler: function(){
                                var 
    r= new employee_model ({
                                        
    empl_id0,
                                        
    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:30header'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,
                    
    storephones,
                    
    tbar: [
                        {
                            
    text'Add new phone'
                            
    iconCls:'add',
                            
    handler: function(){
                                var 
    r= new phone_model ({
                                        
    phone_id0,
                                        
    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:30header'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({
            
    renderTodocument.body,
            
    items: [
                {
                    
    text'Employees'
                    
    handlershow_employees
                
    },'-',
                {
                    
    text'Phones'
                    
    handlershow_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.

  3. #3

    Default Solved

    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
    PHP Code:
    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:

    PHP Code:
    {id'empl-col-first'header'First name'dataIndex'first',editor:text_editor}, 
    {
    id'empl-col-full'width:30header'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.

Similar Threads

  1. Filtering editor grid combo doesn't work on first edit
    By csky in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 13 Oct 2009, 6:39 PM
  2. My first attempt to make a grid...
    By The Transporter in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 4 Jul 2009, 12:22 AM
  3. 2nd grid in the 2nd tab deformatted
    By tkm in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 8 Feb 2008, 9:48 AM
  4. Inline edit grid doesn't work in two panels BorderLayout
    By ajaxE in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 26 Sep 2007, 3:02 PM

Posting Permissions

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