PDA

View Full Version : StateCombo



CutterBl
21 Aug 2008, 6:08 PM
OK, so someone has probably done this already. But, while working on modularizing an app recently, I said to myself "Self..." (Cause that's what I call myself) "Self, wouldn't this make sense as a custom component?" And then I told myself "Makes sense to me..."

Here is a simple extension of the ComboBox component, to provide a 'State' drop down. Dead simple, with notes in the header. Sorry, US states only (though, it's easily edited).



/*
* TEMPLATE
* StateCombo.js
* v .001
*
* AUTHOR
* Steve 'Cutter' Blades, Jr.
*
* PURPOSE
* Simple extension of ComboBox to provide a state drop down
*
* GENERAL NOTES
* Include this script in your doc (or document header). New
* field xtype:'statecombo'. By default the abbr column is set
* for both the valueField and displayField, though either can
* be used. Simple data store takes in the array, to back the
* component.
*
* On initialization the data Store will (local) sort alpha-
* betically on the displayField column.
*
* As an extension of ComboBox, all typical properties, methods
* and events apply, with the only custom properties being the
* stateData (an array of states to abbreviations) and storeFields
* (used as the field definition for the simple data Store).
*
* CHANGELOG
* SGB [08.21.08] Initial creation
*/

Ext.namespace('Ext.ux');

Ext.ux.StateCombo = Ext.extend(Ext.form.ComboBox,{
stateData:[
['AK', 'Alaska'],
['AL', 'Alabama'],
['AR', 'Arkansas'],
['AZ', 'Arizona'],
['CA', 'California'],
['CO', 'Colorado'],
['CT', 'Connecticut'],
['DC', 'District of Columbia'],
['DE', 'Delaware'],
['FL', 'Florida'],
['GA', 'Georgia'],
['HI', 'Hawaii'],
['IA', 'Iowa'],
['ID', 'Idaho'],
['IL', 'Illinois'],
['IN', 'Indiana'],
['KS', 'Kansas'],
['KY', 'Kentucky'],
['LA', 'Louisiana'],
['MA', 'Massachusetts'],
['MD', 'Maryland'],
['ME', 'Maine'],
['MI', 'Michigan'],
['MN', 'Minnesota'],
['MO', 'Missouri'],
['MS', 'Mississippi'],
['MT', 'Montana'],
['NE', 'Nebraska'],
['NC', 'North Carolina'],
['ND', 'North Dakota'],
['NH', 'New Hampshire'],
['NJ', 'New Jersey'],
['NM', 'New Mexico'],
['NV', 'Nevada'],
['NY', 'New York'],
['OH', 'Ohio'],
['OK', 'Oklahoma'],
['OR', 'Oregon'],
['PA', 'Pennsylvania'],
['RI', 'Rhode Island'],
['SC', 'South Carolina'],
['SD', 'South Dakota'],
['TN', 'Tennessee'],
['TX', 'Texas'],
['UT', 'Utah'],
['VA', 'Virginia'],
['VT', 'Vermont'],
['WA', 'Washington'],
['WI', 'Wisconsin'],
['WV', 'West Virginia'],
['WY', 'Wyoming']
],
storeFields:['abbr','state'],
typeAhead:true,
displayField:'abbr',
valueField:'abbr',
mode:'local',
triggerAction:'all',
selectOnFocus:true,
fieldLabel:'State',
forceSelection:true,
initComponent: function(){
Ext.apply(this,{
store: new Ext.data.SimpleStore({
fields:this.storeFields,
data:this.stateData
}),
width:(this.displayField == 'abbr')?40:130
});
Ext.ux.StateCombo.superclass.initComponent.call(this);
this.store.sort(this.displayField);
}
});

Ext.reg('statecombo',Ext.ux.StateCombo);

danh2000
21 Aug 2008, 10:06 PM
I said to myself "Self..." (Cause that's what I call myself) "Self, wouldn't this make sense as a custom component?"

Thanks - I laughed out loud reading that! :)

evant
21 Aug 2008, 10:25 PM
Just FYI you might want to change this line:



RIM.forms.StateCombo.superclass.initComponent.call(this);