ExtJS

Based on the ExtJS-Tutorial on how to build a combo box with an icon, I built a component that can be used as a country selector in ExtJS. Here you can find the code of the component: Ext.ns('Extreme.components'); Extreme.components.CountryCombo = Ext.extend(Ext.form.ComboBox, { constructor: function(config){ var data; if (config.phoneLabels) { data = [['+49', '+49', 'ux-flag-de'], ['+43', '+43', 'ux-flag-at'], ['+41', '+41', 'ux-flag-ch'], ['+352', '+352', 'ux-flag-lu'], ['+432', '+432', 'ux-flag-li']]; } else { data = [['DE', 'Deutschland', 'ux-flag-de'], ['AT', 'Österreich', 'ux-flag-at'], ['CH', 'Schweiz', 'ux-flag-ch'], ['LU', 'Luxemburg', 'ux-flag-lu'], ['LI', 'Lichtenstein', 'ux-flag-li']]; } Extreme....

To create a template in ExtJS you usually have to put the template code inline in your javascript. That could lead to problems if you want to edit your code and the designer wants to change the template. Therefore it’s a good idea to put the template in a separate file. For that reason I built this loader singleton that is capable of lazy loading ExtJS templates: Ext.ns('templates'); templates.Loader = function(){ var that = {}; var map = {}; that....

Note: Has been updated for ExtJS 4.1 In the last article we built a data grid mockup in ExtJS 4.1. Now we want to add some rows to the grid. Firstly we need to create a model class to store a data. We’ve done that also in the previously article, but for the better understanding, here’s it again: Ext.define('Person', { extend: 'Ext.data.Model', fields: ['firstName', 'lastName'] }); Having the Person class we can simply add new rows to the store (people in our case) by calling the add function with new instances of that class:...

Note: This post has been updated for ExtJS 4.1 In the early development phase it is usually a good idea to provide a mockup that is not using real data but some dummy data from memory. To do that for a grid in ExtJS we need to create a record class first. For a person this might look like this: Ext.define('Person', { extend: 'Ext.data.Model', fields: ['firstName', 'lastName'] }); Then we need a store where instances of the Person class will be stored:...

Very unfortunately ExtJS doesn’t offer a validator for its checkbox component. Normally a validator checks whether a field is valid and takes care of displaying an error message if not. For a checkbox we would like that to happen if the checkbox is not selected. Overriding the validate function of the checkbox we can provide such a functionality for all checkbox instances we are about to create: Ext.form.Checkbox.prototype.validate = function(){ if (this....