Remote Combo in ExtJS Grid Example


It has been a never ending story of user questions, confusions and frustrations about combo as editor in grid especially if the combo store is loaded from the server. Users went through various configurations of grid renderers pulling the display value from the combo store but failing if the combo store has not yet been loaded or if it pulled data from a large table so it couldn’t be loaded completely. Not speaking about possible performance issues.

This example uses a couple of clever tricks that resolve the combo-editor puzzle once for ever. It is incredibly simple, effective and straightforward. No complex renderers or clumsy methods of displaying the name of the foreign key.

The key is to join tables at the server and to deliver the name of the foreign key together with the grid records data. Some other tweaks are necessary at client too, of course.

Open in new window

Main Features

  • uses cellediting plugin
  • combo store pulls cities from the server
  • combo is not initially auto-loaded
  • typing in combo initiates server search for cities with matching name
  • combo uses paging toolbar
  • no column renderer for City column
  • updated foreign keys (city ids) are persisted to the server database

Use Cases

Well, many… Use it whenever your foreign table is too large so you cannot load the combo editor store at once. Use it when you need to provide search functionality. A simplified version can also be used when you do not need to edit the foreign key itself but the table of values for the combo is too large.

Example Files (relative to example root)

The example has been initially generated with sencha generate app so the following list contains only added or edited files:

Source Code

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


  1. T. Nissen says

    I dont get it – there seems to be no connection between the field in company model and CityComboStore. Where is the magic ? In grid.js which is not viewed here ?

    • says

      Yes, the combo is an editor for “City” column of the grid. Here is the relevant part of the grid source:

      • Alexander Ridinger says

        I still can not see the “magic”. Column’s dataIndex links to ‘cityName’ and value ‘geonameId’ continues to be original.

      • says

        Yes and that’s the point. The natural impulse is to link the column to valueField (geonameId) but display displayField (cityName). That usually leads to problems described in the post.

        My approach is “upside-down”: valueField, although delivered from the server, is not among grid columns whatsoever, but displayField is a grid column. The only thing that must be done is to update both valueField and displayField of the underlying record in column editor edit event listener (onEdit).

  2. Peter Kellner says

    Is there meant to be some way that the combo in grid is discoverable? I only clicked on it as a guess. I think as it shows in the example, a real user may not realize it is a combo box.

    • says

      It is possible to add some styling to the field so that it looks like a combo to give user a cue, but it is not possible to have one-combo-per-row setup because there’s only one instance of the combo (or any other editor) per column that is just aligned to the cell being edited.

  3. alex says

    Maybe it would be useful for complete of the picture to show this magical ‘onEdit’ handler in example, as I was wondering too, until found that it is not shown.

    • says

      Well, onEdit handler is nothing special. It runs when edit completes and it just reads display and value fields from the combo and updates the corresponding fields in the underlying grid’s record. If it is critical for your app you can purchase the complete workable code. It’s not that expensive, IMO.

    • says

      MainGridView was omitted for the sake of simplicity but you can find the relevant part of it – the combo configuration – in the first comment. The download package is complete, of course.


    Hola Saki, estoy tratando de cargar un formulario que tiene un cuadro combinado, pero los datos están en la página número 2, pero, cuando intento cargar el combo con el FormLoad (“record”) y poner de Id, la cuadro combinado no se carga el valor, porque mi combo sólo muestra la página número uno, cuando se preste el formulario. ¿Qué puedo hacer para obtener la página donde mis datos es ?.
    muchas gracias Saki.

  5. Ilya Milosevic says

    Unfortunately, your “solution” does not work correctly. If we don’t change the cell at the opening of the editor, and then press the button “Save” (which becomes active, which, by the way, if other fields have not changed, too, is wrong), the field “geonameId” will be null in a send JSON.

    P.S. Hopefully my English is understandable. Otherwise I apologize.

  6. Narcis Moldovan says

    Can you make the combo save the value on select, not on focus change? It’s weird to have to click another cell, just to make the combo register the change.

    • says

      I’ve never used something.NET because I’m not a Microsoft customer, therefore, I can only advise to find a newer reference or forum. The link you posted dates back to 2012 and that is 2-3 Ext versions back.

We will be happy to hear back from you

Please Login to post a comment