ComboBox with Any option


During the developement of the GUI, many a times we need a ComboBox with an optional entry besides the store entries, which user can select. E.g. on the Search screens (say, country drop-down), we may have to an entry -Any- in the ComboBox (appearing on the top) so that the user can indicate that they are not very particular about the country. To achieve this, in ExtJS 2.2.x, you need to add the following lines of code:

var rowRecord = Ext.data.Record.create(this.store.fields);
var arrFields = new Array();
arrFields[this.store.fields.items[0].name] = '';
arrFields[this.store.fields.items[1].name] = '-Any-';
this.store.insert(0, new rowRecord(arrFields));

before:
this.view.on("click", this.onViewClick, this);

inside the initList function of ComboBox. You need to extend ComboBox and override the initList function by copying the code from original ComboBox initList function and adding the above mentioned code.

Note: The above code will make sure that when you use this extended ComboBox, -Any- will appear as the first element in the list and when selected it passes the value ” (empty string) to the caller.

Screenshot:

optcombo

optcombo

Tagged with: , ,
Posted in Sencha ExtJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: