DataView Menu is designed to show menu elements focused in icons in form of button. The items property can be object with ‘defaults’ and ‘items’ configs or just array of items, similar to other ExtJS component items property. Here implemented only one new ‘iconItemClick’ event. I hope the code of ‘app.view.toolbar.cmp.application.Button’ is enough simple and you will be able to redesign it to your according to your needs.
Automatic tool-tip for grid cell text overflow
Automatic tool-tips for grid cell text overflow feature is developed in form of plugin. It is listening the ‘afterlayout’ event of the grid and set the tool-tip for cell if no tool-tip exists. If you want to disable overflow tool-tip for particular columns, set the ‘showOverFlowTooltip’ to false. If you will need to change this logic check the ‘GridOverflowTooltipPlugin:isOverFlowTooltipDisabled(column, record, store, view)’ method implementation. The plugin implemented for the latest ExtJS 6.5.3 version.
Grouping ComboBox Field
Grouping combobox list values helps to systematize the items. This feature is already available in ‘Ext.grid.Panel’ but unfortunately not available for ‘Ext.form.field.ComboBox’. To implement the field as a single class I have changed the ‘Ext.view.BoundList’ throw ‘Ext.form.field.ComboBox:listConfig’ configuration property.
Stabling the application and monitoring JavaScript errors on client side.
“Program testing can be used very effectively to show the presence of bugs but never to show their absence.” – E.W. Dijkstra, On the reliability of programs.
There are always some bugs which are failed to be detected by developers and QA. In this post I will try to show how to catch them on the client side.
Form field hideable triggers
To make the GUI more intuitive we must avoid to overload it with components. For this purposes we can hide some elements and show them only when they are required to use.
Integrating Ace editor to ExtJS
There was a question in the sencha forum “Does anyone know how to add a form field that is an Ace code editor?”. So I decided to implement such a field. I have done it once in 2011 but forgotten already which lib was used and in which form it was done.
Grid cell tooltips
Sometimes the content of cell is too long to show it inside, in this case we can show the content in the tooltip. Tooltips also used to show some meta information of the element. In the following example the full book description and subtitle are shown in tooltip. The ISBN of the book and book site URL are presented as link. The ISBN URL is generated in model via the calculated field.
Google reCAPTCHA, Version 2 field
reCAPTCHA protects internet users from spam and abuse wherever they go. Here is a ‘CaptchaField’ class which you can set to validate form. It changes the validation of the field, so you can bind appropriate buttons to the form.
Grid as a widget grid problem
If you are using widget column (Ext.grid.column.Widget class) with content grid you will get error “Uncaught TypeError: Cannot read property ‘isModel’ of null” on clicking on the cell of the child grid.
ViewModel example for solving quadratic equation
View-model is very convenient method for creating bindings in simple forms. You can bind the data also to child elements and/or use stand alone view-models for child elements, but I would be very careful with it (global and local environment paradigms). You can also get access to the view-model in view-controllers using Ext.app.ViewController::getViewModel() method and get/set the data from there.