1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    3
    Vote Rating
    0
    lieven juwet is on a distinguished road

      0  

    Default Unanswered: Grid getEditor not setting correct value in field for Firefox

    Unanswered: Grid getEditor not setting correct value in field for Firefox


    Hello,

    I am creating an application using Ext js 4.2. One of the features is configuring several modules. Each module has a different amount of parameters. Each parameter can be a different type. One of the things that needs to be done is editing/creating a configuration changing the values of the parameters.

    I got this working already using a grid bound to a store which contains my parameters. Because a parameter can be string/int/boolean i need a field based on the type of parameter. To make this work I specified the getEditor method in the column for my value. In this function I determine which field should be used and return it with a cellEditor object.

    This works for the latest chrome and IE9. However in firefox it gives some strange behaviour. Each field doesn't get his initial value set and for textfields the initial value is a piece of hmtl code containing the original value.

    I have supplied the code for my grid and the changeEditor method below:

    PHP Code:
    this.grid Ext.create('Ext.grid.Panel', {
                    
    title'Parameters',
                    
    storethis.config.parameters(),
                    
    columns: [
                        { 
    text'Name',  dataIndex'name'flex:2,
                                
    renderer: function(valuemetaDatarecordrowIndexcolIndexstore) {
                                
    metaData.tdAttr 'data-qtip="' value '"';
                                return 
    value;
                           },
                        
                        },
                        { 
    text'Description'dataIndex'description'flex4,
                            
    renderer: function(valuemetaDatarecordrowIndexcolIndexstore) {
                                
    metaData.tdAttr 'data-qtip="' value '"';
                                return 
    value;
                           },
                        
                        
                        },
                        {     
                            
    text'Value',
                            
    getEditor: function(record,defaultField){return me.changeEditor(recorddefaultField);},
                            
    flex:3,                
                            
    renderer: function(valuemetaDatarecordrowIndexcolIndexstore) {
                                
                                if ((
    record.data.type.toLowerCase() == 'dropbox_key' || record.data.type.toLowerCase() == 'dropbox_secret' ) && record.data.value != '' ) {
                                    
    metaData.tdAttr 'data-qtip="Access code has been retrieved"';
                                    return 
    'Access code has been retrieved';
                                }
                                
    metaData.tdAttr 'data-qtip="' record.data.value '"';
                                return 
    record.data.value;
                           },
                           


                        },
                    
                        
                    ],
                    
                     
    plugins: [
                        
    me.editor
                    
    ],
                    
    width'90%',
                    
            }); 
    PHP Code:
    changeEditor : function(recorddefaultEditor)
        {
            var 
    me this;
            var 
    field;
            var 
    type record.data.type.toLowerCase();
            switch(
    type)
            {
                case(
    'string') :
                            
    field Ext.create('Ext.form.field.Text', {
                                                    
    allowBlankfalse
                                        
    });
                            
                            break;
                    
                case(
    'time') :
                            
    field Ext.create('Ext.form.field.Date',
                                            {
                                                
    valuerecord.data.value,
                                                
    format'd-m-Y H:i'
                                            
    });
                            break;
                
                case(
    'boolean') : 
                            
    field = {
                                            
    xtype'checkbox',
                                            
    valuerecord.data.value
                                        
    };
                            break;
                
                case(
    'integer') : 
                            
    field = {
                                            
    xtype'numberfield',
                                            
    valuerecord.data.value
                                        
    };
                            break;
                case(
    'long') : 
                            
    field = {
                                            
    xtype'numberfield',
                                            
    valuerecord.data.value
                                        
    };
                            break;
                
                case(
    'dropbox_key'): case('dropbox_secret') : 
                            
    field Ext.create('DS.view.auxiliary.DropboxTrigger', {
                                        
    controllerme.controller,
                                        
    emptyText'click button to get codes',
                                        
    onTriggerClick: function() {
                                            
    DS.app.getController('Dropbox').getUserAuthTokens();
            
                                        }
                                    });
                            break;
                case(
    'dropbox_folder') : 
                            
    field Ext.create('DS.view.auxiliary.DropboxTrigger', {
                                        
    controllerme.controller,
                                        
    emptyText'click button to select your folder',
                                        
    onTriggerClick: function() {
                                            
    DS.app.getController('Dropbox').createDropboxBrowser();
            
                                        }
                                    });
                            break;
            }
            return 
    Ext.create('Ext.grid.CellEditor', { 
                        
    fieldfield
            
    });
                
        }, 
    Would be awsome if anyone has a solution for this. Our app has to run in most browsers and since only firefox is giving this trouble it is very anoying.

    Thanks in advance!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Any chance you could post an inline test case showing the issue you're seeing? Or even modify this one?

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
            {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
            {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
            {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    3
    Vote Rating
    0
    lieven juwet is on a distinguished road

      0  

    Default


    Hi,

    Thanks for the reply.

    Below I posted 2 images showing what happens. The first one is the normal expected behaviour in chrome. The second image displays the result I get when editing a textfield. As mentioned before, other field types display no initial value.

    Chrome:
    chrome-example.png
    firefox-example.png
    This is the complete value of the textfield in firefox:

    <div unselectable="on" class="x-grid-cell-inner" style="text-align:left;">\\192.168.10.150\ds_out</div>

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Posts
    3
    Vote Rating
    0
    lieven juwet is on a distinguished road

      0  

    Default


    I have fiddled a bit with my code and found the cause of the problem.

    I didn't specify a dataIndex in my column definition. This apparently caused the strange behaviour in Firefox while in chrome or IE everything worked fine.

    Thanks for having a look at it anyway.

  5. #5
    Sencha User
    Join Date
    Jun 2014
    Posts
    1
    Vote Rating
    0
    wujunpei is on a distinguished road

      0  

    Default


    the same case, thanks

Thread Participants: 2

Tags for this Thread