PDA

View Full Version : Grid getEditor not setting correct value in field for Firefox



lieven juwet
6 Jun 2013, 5:34 AM
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:



this.grid = Ext.create('Ext.grid.Panel', {
title: 'Parameters',
store: this.config.parameters(),
columns: [
{ text: 'Name', dataIndex: 'name', flex:2,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
},

},
{ text: 'Description', dataIndex: 'description', flex: 4,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
},


},
{
text: 'Value',
getEditor: function(record,defaultField){return me.changeEditor(record, defaultField);},
flex:3,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {

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%',

});





changeEditor : function(record, defaultEditor)
{
var me = this;
var field;
var type = record.data.type.toLowerCase();
switch(type)
{
case('string') :
field = Ext.create('Ext.form.field.Text', {
allowBlank: false
});

break;

case('time') :
field = Ext.create('Ext.form.field.Date',
{
value: record.data.value,
format: 'd-m-Y H:i'
});
break;

case('boolean') :
field = {
xtype: 'checkbox',
value: record.data.value
};
break;

case('integer') :
field = {
xtype: 'numberfield',
value: record.data.value
};
break;
case('long') :
field = {
xtype: 'numberfield',
value: record.data.value
};
break;

case('dropbox_key'): case('dropbox_secret') :
field = Ext.create('DS.view.auxiliary.DropboxTrigger', {
controller: me.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', {
controller: me.controller,
emptyText: 'click button to select your folder',
onTriggerClick: function() {
DS.app.getController('Dropbox').createDropboxBrowser();

}
});
break;
}
return Ext.create('Ext.grid.CellEditor', {
field: field
});

},


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!

slemmon
10 Jun 2013, 3:45 PM
Any chance you could post an inline test case showing the issue you're seeing? Or even modify this one?



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()
});

lieven juwet
11 Jun 2013, 12:12 AM
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:
44285
44286
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>

lieven juwet
12 Jun 2013, 3:29 AM
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.

wujunpei
11 Jun 2014, 2:04 AM
the same case, thanks

Rockz
1 Oct 2014, 2:26 AM
Hi Selemmon,
Thanks for your reply. I'am also facing the same problem in my grid eventhough dataIndex is set for my grid column.

Attaching screen shot for your reference.

50524

Any help is highly appreciated.
Thanks in Advance

slemmon
1 Oct 2014, 11:33 AM
Hi,

If you post a test case demonstrating the issue you're seeing we can try and help you debug. You can post it inline here or at https://fiddle.sencha.com