How do I focus a combo box inside a grid panel?

1
votes

I've searched high and low and can't find this and all of my methods do not work.

Basically, here is what I have. I have a Grid Panel (using ExtJS 4) that contains many rows. Each row has a column that contains a combo box.

Now, I have a "Add" button that when clicked, adds a new model and inserts it into the store. Works great. However, the user has to use the mouse and click the combo box inside the newly inserted row to begin typing. Our app is heavily focused on the keyboard and the mouse is discouraged (being a data entry app).

I am able to select the first row with a:

grid.view.getSelectionModel().select(newRow);

However, the combo box inside isn't focused.

How can I solve this?

Thanks.

EDIT

I've tried to post my source code here on SO but it keeps timing out so here is a gist of my code:

https://gist.github.com/1089782

Thanks

2
comboboxextjs4gridpanel

2 Answers

1
votes
  1. You have to save reference to that combobox somewhere. For example in record you might have field 'combo' and it will reference to combobox.
  2. After selection you have to do: record.combo.fosus(); and that is all.
1
votes

I didn't check it for for comboboxes but it worked for textfields:

  1. Firstly assign id to celledit plugin:

    plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1, id: 'my_plugin' }) ]

  2. And then, provided newRow is newly inserted model and column with comboboxes has index == 1, you can use: grid.getPlugin('my_plugin').startEditByPosition({row: newRow.index, column: 1});