ExtJS 6.5.3 and older versions has a bug. If you are using ‘Ext.grid.plugin.RowExpander’ plugin, the expanded rows will be collapsed after grid’s store reload/sort, on any refresh of the grid view.
Month: March 2018
Mocking requests
Mocking requests are used for developing and testing the applications. It can be also used for some test-driven development in RIA. It helps to develop in asynchronous mode with backend team or fake the results of diesel emissions tests.
Focusing form field in tabpanel
Focusing one of the form fields after rendering the panel or changing the active tab with form items will make the filling process of the form faster. Users will not need to click on the appropriate field to begin the typing. The focusing feature was implemented as plugin.
DataView Menu
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.