PDA

View Full Version : RowEditing Combo losing it's value?



mcryan
21 Sep 2011, 3:57 PM
HI All,

I have a grid with RowEditing enabled with a combobox as one of the fields. All fields are required, and when going into edit mode the combo's value is set to blank, making the user reselect the combo every time he edits a row. None of the other fields have this problem...

Thanks for the help.


Combobox Store and Model:


var types = [
{"id": 1, "name": "Proclamations"},
{"id": 2, "name": "General Notice"},
{"id": 3, "name": "Government Notices"},
{"id": 4, "name": "Government Notices (Regulations)"}
];
Ext.define('typesModel',
{
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'name'}
]
}
);
var typesStore = Ext.create('Ext.data.Store', {
model: 'typesModel',
data: types
});


Row Editor:


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 1
});


Grid:


var grid = Ext.create('Ext.grid.Panel', { store: store,
width: 950,
height: 450,
renderTo: 'main_div',
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
this.down('#delete').setDisabled(false);
}
},
columns: [{
text: "Description",
dataIndex: 'description',
flex: 1,
editor: {
allowBlank: false
}
}, {
text: "Number",
dataIndex: 'number',
width: 200,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
text: "Type",
dataIndex: 'type',
width: 250,
renderer: typeRenderer,
editor: {
xtype: 'combobox',
store: typesStore
allowBlank: false,
queryMode: 'local',
typeAhead: true,
displayField: 'name',
forceSelection: true,
valueField: 'id',
emptyText: 'Select a type...'
}
}
],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
disabled: true,
itemId: 'add'
}, {
text: 'Remove',
disabled: true,
itemId: 'delete'
}]
}],
});

brokentwig
24 Sep 2011, 9:20 AM
Did you fix this issue? If so, can you post your fix? Thanks.

mcryan
25 Sep 2011, 1:32 PM
No, I haven't fixed this yet. I haven't actually been working on it since posting. I will be again within the next couple of days though. I will post a solution as soon as I come up with one, unless someone else is able to before me :)

lucasguaru
26 Sep 2011, 6:38 AM
Hello there.
Usually this happens because of renderer.
Who is your typeRenderer? Can you post that code?
Maybe the problem is in there.

skirtle
26 Sep 2011, 7:11 AM
The usual cause of this is that the value in the grid's store doesn't tie up with the value in the valueField of the combobox. In the code posted, that would need the type field to contain one of the numbers 1, 2, 3 or 4. From what's been posted so far I don't see any obvious problems (though there seems to be a missing comma in the editor config, which makes me wonder if this is actually the code you're running).

I agree that it would be useful to see typeRenderer. It may also be useful to know the exact ExtJS version number and which browsers you've tried. I'd be curious to know whether selecting a value in the combobox successfully updates the cell when you finish editing. Would it be possible to try switching from row editing to cell editing, just to see what happens?

mcryan
27 Sep 2011, 4:43 AM
@ Skirtle, what you said here brought me to the right solution:


The usual cause of this is that the value in the grid's store doesn't tie up with the value in the valueField of the combobox. In the code posted, that would need the type field to contain one of the numbers 1, 2, 3 or 4.

Though I am not sure I totally understand why, I changed my data from this:


var types = [ {"id": 1, "name": "Proclamations"},
{"id": 2, "name": "General Notice"},
{"id": 3, "name": "Government Notices"},
{"id": 4, "name": "Government Notices (Regulations)"}
];

To this:


var types = [ {"id": "1", "name": "Proclamations"},
{"id": "2", "name": "General Notice"},
{"id": "3", "name": "Government Notices"},
{"id": "4", "name": "Government Notices (Regulations)"},
{"id": "5", "name": "Board Notices"}
];

And the problem went away. Thanks for pointing me in the right direction.

For the record, the problem would still occur when using a Cell Editor, and nothing was wrong with the renderer, it was only returning the paired "name" field above. And yes, the above code was a simplified version of what I was actually running, hence the missing comma ;)

skirtle
27 Sep 2011, 4:53 AM
The 'numbers' in your fields must actually be strings. It's probably worth you digging into that a little more to figure out why that is happening, it could cause other problems.

Many people don't realize that the string '2' is not the same as the number 2 in JavaScript. This confusion is in part caused by the double equals operator, that performs implicit type-conversion. e.g.:


2 == '2' // true
2 === '2' // false

For the purposes of the combobox it needs to be properly equal, i.e. triple equals. Personally I never use double equals due to its strange idiosyncrasies.

mcryan
27 Sep 2011, 4:57 AM
I agree with this, and I am aware of the differences in the double and triple equals operators. Most of my combo's are remote combo's and work with proper integers: 2 not '2' and work fine... I am keeping a close eye on this though. So far everything is working as it should, so I am not too concerned that the id isn't an integer at this point.

Thanks again.