PDA

View Full Version : Combo Box passing display instead of value, one solution of many



SSTFigleaf
10 Mar 2011, 11:30 AM
I've been beating on a combo box for a couple of hours trying to get it to pass the valueField instead of the displayField. Here's the solution I came up with:

Here's my form:

/*form component, extends Ext.form.FormPanel*/
var movieSearchForm = Ext.extend(Ext.form.FormPanel,{
name: 'movieSearchForm',
title: 'Search Movies',
frame: true,
defaultType: 'textfield',
labelWidth: 75,
initComponent: function(){
var config = {
items: [{
fieldLabel: 'Movie Name',
name: 'mName',
id:'mName',
allowBlank: true

}, {
fieldLabel: 'Director First Name',
name: 'directorFname',
id:'directorFname',
allowBlank: true
}, {
fieldLabel: 'Director Last Name',
name: 'directorLname',
id:'directorLname',
allowBlank: true
}, {
xtype: 'datefield',
fieldLabel: 'Release Date',
name: 'date',
id:'date',
value: '01/01/1901'
}, {/*combo box*/
xtype: 'combo',
store: sGenre,
mode:'local',
fieldLabel:'Genre',
id:'genre',
hiddenName:'cGenreID',
hiddenValue:0,
valueField:'genreId',
displayField:'genreType',
triggerAction: 'all',
editable: false,
width: 100
/*end combo box*/
}, {
xtype: 'button',
text: 'Search',
id:'SearchButton',
handler:function(){
Ext.Ajax.request({
waitMsg:'Searching',
url: 'cfc/baseADO.cfc?method=getMovies&dsn=cpMovieStore',
method:'post',
params:{
mName:Ext.get('mName').dom.value,
directorFname:Ext.get('directorFname').dom.value,
directorLname:Ext.get('directorLname').dom.value,
date:Ext.get('date').dom.value,
genre:Ext.getCmp('genre').getValue()

},
success:function(){
Ext.Msg.alert('It worked')
},
failure:function(){
Ext.Msg.alert('Epic Fail')

}
});


}

}]
};


Ext.apply(this, Ext.apply(this.initialConfig, config));
movieSearchForm.superclass.initComponent.apply(this, arguments)
}

});

Ext.reg('movieSearchForm',movieSearchForm);Here's the store that populates it from a ColdFusion component:

/*creates dropdown store*/
var sGenre = new Ext.data.Store({
url:'cfc/baseADO.cfc',
baseParams:{
method:'getGenreDrop',
returnFormat:'JSON',
dsn: 'cpMovieStore'
},
reader:new Ext.data.CFQueryReader({
id:'PK_GenreID', // matches the 'name' attribute of your id field
totalProperty:'totalrowcount' // Case Specific
},[
{name: 'genreId', mapping: 'PK_GenreID'},
{name: 'genreType', mapping: 'genre'}
]),
autoLoad:true
});
I'm using Ext.Ajax.request to post the form response. In the params values I had been doing this:

genre:Ext.get('genre').dom.valueWhich would consistently return the displayField instead of the valueField. Once I changed the way that I was getting the Combo Box value to:

genre:Ext.getCmp('genre').getValue()I now get the value which I can pass back to a query

Hope this helps someone out :D