View Full Version : Combobox in EditorGridPanel not selecting the desired item (with test case)

22 Apr 2010, 10:07 AM
I have a combobox in my EditorGridPanel that is not working as I'd expect it to.

When the user types the first letter of an item in the drop down list, the combobox seems to ignore it and select the first item in the list. I can reproduce the error consistently and have put together a test case here: http://cluebucket.com/dev/testcase/testcase.html

Load the page and reproduce the behavior by the following -- note that this is all done using the keyboard, no mouse clicks:

1. Click 'Add Record' (A new row is added to the grid)
2. enter text in the text field.
3. TAB to the Priority field without selecting anything (None will remain selected)
4. TAB out of the Priority field. (A new row is added to the grid)

5. enter text and TAB to the Priority field
6. TYPE v (Very High is selected)
7. TAB out of the priority field (A new row is added to the grid)
8. enter text and TAB to the Priority field
9. Type v (None is selected, but Very High should have been)

10. TAB out of the priority field
11. Enter text and TAB to the priority field
12. Type l ('el') (Low is selected)
13. TAB out, enter text, TAB to priority
14. Type l (None is selected)

It appears that whenever the user attempts to select the same value that was selected in the previous row, the combobox selects None.

Any ideas? The code is available at cluebucket.com/dev/testcase/js/testcase.js and included below for convenience.

Thoughts/Pointers/Corrections are appreciated!!



Ext.onReady(function() {


function getsampleGrid(prospectID) {

var sampleRecord = Ext.data.Record.create([{name:'id', type:'int'},{name:'quote'}, {name:'priorityID'}]);

var priorityStore =new Ext.data.ArrayStore({
id: 0,
fields: [ 'id', 'title', 'cssrule' ],
data: [[0,'None','priorityNone'], [1,'Low','priorityLow'], [2,'Medium','priorityMedium'], [3,'High','priorityHigh'], [4,'Very High','priorityVeryHigh']]

// The editors for the grid cell editor
var priorityCB = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: priorityStore,
valueField: 'id',
displayField: 'title',
tpl: '<tpl for="."><div class="x-combo-list-item {cssrule}">{title}</div></tpl>',
priorityCB.on('render', editorRenderHandler);

quoteTextEditor = new Ext.form.TextField ({ allowBlank: false, selectOnFocus:true });
quoteTextEditor.on('render', editorRenderHandler);

// renderer for the priority field when the dropdown editor is not present
var renderPriority = function(value, metaData, record, rowIndex, colIndex, store) {
// reset to 0/None in the event that the user puts in a value that is not in the store
if(isNaN(parseInt(value))) {
value = 0;
metaData.css = priorityStore.getById(parseInt(value)).get('cssrule');
return priorityStore.getById(parseInt(value)).get('title');

// the column model
var quoteColumnModel = new Ext.grid.ColumnModel({
// specify defaults applicable to each column
{ id: 'quotecol', header: "Text", width: 20, dataIndex: 'quote', editor:quoteTextEditor},
{ header: "Priority", width: 4, sortable: true, dataIndex:'priorityID', renderer:renderPriority, editor: priorityCB }

var sampleStore = new Ext.data.ArrayStore({ id: 0, fields:sampleRecord });

sampleGrid = new Ext.grid.EditorGridPanel({
renderTo: 'maincolcontent',
store: sampleStore,
colModel: quoteColumnModel,
viewConfig: {forceFit: true},
width: 800,
height: 1800,
collapsible: false,
iconCls: 'icon-grid',
hideCollapseTool: true,
enableColumnMove: false,
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Record',
handler: function(){
var quoteNumber = 1; // not needed for this test case, so fix it at 1
var qr = new sampleRecord({quoteNumber:quoteNumber,quote:'New Text',priorityID:0});
sampleStore.insert(0, qr);
sampleGrid.startEditing(0, 0);

function sampleStoreUpdate(record, insertNewRow) {
// create a new quote record from the one that was passed in . . .
var qr = new sampleRecord({quoteNumber:parseInt(record.data['quoteNumber'])+1, quote:'New Text',metadataID:record.data['metadataID'],priorityID:record.data['priorityID']});
sampleStore.insert(0, qr);
sampleGrid.startEditing(0, 0); // start editing in row 0, column 0

// functions below are used to determine when the user has left the grid. i.e. the user has tabbed out
// of the last column of the first row, clicked out of the grid or ???
function editorBlurHandler(field) {
var e, lostFocus, view, within;

e = Ext.EventObject;
lostFocus = false;
if (e.type.substr(0, 5) === "mouse") {
// The user clicked out of the cell. See if that click was on another cell or if it was
// outside the grid (with column header cells being considered outside the grid).
view = sampleGrid.getView();
within = e.within(view.mainBody);
lostFocus = !within;

if (lostFocus) {
// The user clicked outside the grid, which caused the editor's blur event. The grid lost focus.
var sel = sampleGrid.getSelectionModel().selection;
sampleStoreUpdate(sel.record, false);

function editorSpecialKeyHandler(field, evt) {
//if (evt.getKey() === evt.TAB && !evt.shiftKey && !this.activeEditor && field.id == "priorityCB") {
if (evt.getKey() === evt.TAB && !evt.shiftKey && field.id == "priorityCB") {
// The user pressed the TAB key and no editor is active, which means the user tabbed out of the grid.
var sel = sampleGrid.getSelectionModel().selection;
// sel.cell[0] is the row number of the row *after* the one that just completed editing
// if sel.cell[0] != 1, just update the row and carry on
// The exception to this is when this is the first row added to the grid, in which case this is row
// 0 and there is no row 1 -- the desired behavior is that a new row be added
var insertNewRow = (sel.cell[0] != 1 && sel.cell[0] != 0) ? false : true;
var rowIndex = Math.max(sel.cell[0] - 1, 0);

sampleStoreUpdate(sampleStore.getAt(rowIndex), insertNewRow);

} else if (evt.getKey() === evt.ENTER) {
// update the current record
var sel = sampleGrid.getSelectionModel().selection;

sampleStoreUpdate(sel.record, false);

// Attached to each editor's "render" event with the grid as the handler's scope.
function editorRenderHandler(editor) {
// For detecting whether the user has tabbed out of the grid with the keyboard.
editor.on("specialkey", editorSpecialKeyHandler, this);

return sampleGrid;
} // end getsampleGrid


23 Apr 2010, 11:38 AM
By adding the follwing to the combobox config, I seem to have removed the problem.

listeners: {
// delete the previous query in the beforequery event
beforequery: function(qe){
delete qe.combo.lastQuery;

I'm supposing that since the same CB is being used over and over (instead of a new one being instantiated) that somehow the query that the CB is using to select from the list is getting horked up in a way that it doesn't recognize a previously selected item (??) Dunno.

If anyone has any insight, I'd really appreciate the info.