“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.
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.
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.
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.
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.
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.
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.
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.
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.
To set the icon in field triggers you will have to use the ‘iconCls’ property. Unfortunately there is a bug in the classic-theme (it works in triton-theme). In the override you can see new property ‘glyph’ and new method ‘setGlyph(glyph). The last one will let you change the glyph pragmatically.
