ExtJs has row and cell editing plugins. Unfortunately they do not allow the cells in bulk/batch mode. I have tried to implement bulk edit using custom selection replicator. and popup form for single and multiple columns edit.
Grid Color Column
A Column definition class which renders color. I have used Ext.ux.colorpick.Field. Nothing special, just extended the ‘Ext.grid.column.Template‘. It is also possible to implement using widget column nut I prefer the simplest way always.
Row Expander/Widget with editor
Row expander/widget is another way for editing grid records. It allows to edit hidden record fields which are not presented in grid, present row in form and show some additional information and/or validation.
In this sample I have developed a simple application which is using a CRUD store. I have used a separate form to change the data in the grid. It allowed me to implement “create new user at the base of existing one” feature.
I have already shown how to implement a Tree ComboBox. In the following example you can see how to implement a simpler ComboBox with a grid picker. It is implemented with support of the local and remote filtering. I have used also a calculated model field ‘fullName’ to use it as display value in the combo. You can also use as ‘displayTpl’ property to achieve the same effect.
Filter paging toolbar.
Filter paging toolbar will help users to filter the rows of grid. Users can select as target all or some of columns. It works with remote and local filtering. The code is pushed into one class (extension of the paging toolbar) to make the usage easier.
Automatically resizing grid columns to the longest content width.
Sometimes we need to show the content of all the cells of grid without cutting them. For this purpose you can use auto-resize grid cells plugin. The plugin does not work with flexed columns, it just removes the flex property. To keep the flex property you need to check if the column configured with flex and do not the ‘autoSize’ method.