Description
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.
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:
app.js app/Application.js app/model/CompanyModel.js app/model/CityComboModel.js app/store/CompanyStore.js app/store/CityComboStore.js app/view/MainGridView.js app/controller/MainController
Source Code
If you want to see the example code, login or sign-up. Free membership is available.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
