After having used the shiny new YUI3 library for a project, it’s about time to share my YUI3 experiences with you. For the project I built an item selector: A modal dialog is openend and the user has to select an item. After selection the dialog is closed and the selected item is passed to a callback function. Here you can find the full source for the item selector. An example to use the selector can be as simple as this:...
Wouldn’t it be nice to use a combo box of flag images to select the country code of phone numbers? If you use a country selection component that’s quite easy. Just wrap it in a re-usable component together with a textfield for the local number and the result looks like this: And here’s the example’s source: Ext.onReady(function(){ var panel = new Ext.FormPanel({ style: 'padding: 10px;', frame: true, labelWidth: 50, width: 400, items: [{ fieldLabel: 'Mobile', xtype: 'phonefield', anchor: '100%', emptyText: '(e....
Ext already provides a component to select multiple items. The thing I do not like about it is that it covers too much space on the screen. Therefore I thought of a component that initially looks like a combo box and then opens a new window to let the user select the items. As a nice example tells more than thousand words - here it is: As you can see, it is actually based on the component provided by the Ext examples....
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....