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.
Menu button is a mix of combobox and button. It changes the text and icon on menu check item click. You can use to show some state of your application: used theme (dark or light) or some view profile of grid panel. I have implemented getter and setter methods.
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.
Editable grid with multiSelect combobox in column editor
This post is about an editable grid with editable multi-select combobox. This solution is for extjs 4.2. In the newer versions (>= v5.1) the ‘multiSelect’ property is deprecated. If you do not want to have problems during your framework upgrade in the future, I would suggest not to use the deprecated functionality and use the tag field.
Subgrid for row expander plugin in modern toolkit.
To create a sub grid in a grid expandable row (Modern Toolkit), you can extend the existing ‘RowExpander‘ plugin and override the ‘onGridTap’ method. This technique can be used to show FormPanel, Tree or some other custom ExtJs component in the expanded row body.
Roman – Decimal converter
Small util functions to validate Roman numerals, and to convert Roman numerals into the decimal numeral system and vice versa. Because of strict limitation of the Roman numeric system to represent the numerals, such as M, D, C, L, X, V, and I, the maximum roman numeral is “MMMCMXCIX” (3999). I have used recursion algorithm in the toDecimal function to make that function even smaller. Continue reading
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.
Button search field
Button-field is an GUI component which may help to keep the GUI clean and minimalist. I decided to implement it in the following sketch and add keymap support.
To implement password strength form I have used the simplest algorithm. To make appropriate calculations and to change the the color of the
night progress bar and the internal text the form is using ViewModel .
Storing form field values in cookies.
Storing field values in cookies maybe useful not only during the debugging/developing the app but also for users who can continue working on the same browser next day.
Another method which makes user’s life lighter is to implement form template mechanisms. Users will be able to store some form states on the server and use them later.