PDA

View Full Version : Combo box doesn't show dropdown values



rbraddy
20 Oct 2009, 7:11 AM
Hi,

I have a combo control that's acting more like a text field than a dropdown combo box:



xtype: 'combo',
store: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
fieldLabel: 'Strength',
mode: 'local',
name: "answers[strength]"


I'm simply wanting to show the current value in the "answers[strength]" form store (which is working), and allow the user to choose one of the values. I see the current value of "answers[strength]" in the combo box text field, but there's no values to choose from (should be 1-10, but nothing shows up when one clicks the dropdown control).

I'm guessing the issue is that I'm effectively specifying two conflicting stores here with both the 'store' and 'name' keywords, but haven't found a good example or way to specify the dropdown list values separately from the form store integration via "name".

I'm still relatively new to ExtJS, so this is probably a simple enough fix (to a complicated control with lots of options).

Thanks

Rick

jay@moduscreate.com
20 Oct 2009, 7:14 AM
The following works for me:


new Ext.Window({
width : 400,
items : {
xtype: 'combo',
store: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
fieldLabel: 'Strength',
mode: 'local',
name: "answers[strength]"
}

}).show();

mitchellsimoens
20 Oct 2009, 7:17 AM
worked in my formPanel and it sent it to the server. Is your form complicated? If so, try simplifying.

rbraddy
20 Oct 2009, 7:27 AM
The form isn't very complicated.

It seems to work fine whenever there's no "name" field (form store) value. If I comment out the "name" field, then I get the drop-down values to show up. It's when I use the name field to set the current value that it breaks.

I'm thinking your example works because it's in a Window, not a Form layout that contains a form store.

mitchellsimoens
20 Oct 2009, 7:31 AM
I'm thinking your example works because it's in a Window, not a Form layout that contains a form store.

I tried it in an actual Ext.form.FormPanel so no. Can you post your whole formPanel and any relevant functions?

jay@moduscreate.com
20 Oct 2009, 7:39 AM
What do you mean by "form store"? Why are you using a data store for a Form panel?

jay@moduscreate.com
20 Oct 2009, 7:41 AM
The form isn't very complicated.

It seems to work fine whenever there's no "name" field (form store) value. If I comment out the "name" field, then I get the drop-down values to show up. It's when I use the name field to set the current value that it breaks.

I'm thinking your example works because it's in a Window, not a Form layout that contains a form store.




*sigh* - this works....



var f = {
xtype : 'form',
items : {
xtype: 'combo',
store: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
fieldLabel: 'Strength',
mode: 'local',
name: "answers[strength]"
}

}

new Ext.Window({
width : 400,
height : 100,
layout : 'fit',
items : f

}).show();

jay@moduscreate.com
20 Oct 2009, 7:41 AM
I tried it in an actual Ext.form.FormPanel so no. I don't get what the above means :(

mitchellsimoens
20 Oct 2009, 7:43 AM
I don't get what the above means :(

I was responding to him saying that your code you provided when you used it in a window didn't work so I said that I used it in a FormPanel instance and it worked so it wasn't that you used it in a window.

jay@moduscreate.com
20 Oct 2009, 7:45 AM
:) thanks -- it's been a long day

rbraddy
20 Oct 2009, 8:08 AM
By "form store" I'm just referring to the store that's apparently inherent in the BasicForm underlying a FormPanel (that I'm using for Json exchange with the server via form load/submit as usual).

Here's the full code below (sorry for the length). I highlighted the combo item in question.
"RailsForm" is an extension of Ext.form.FormPanel that handles the form loading and submission of a form interacting with the Rails server.




//////////////////////////////////////////////////////////////////////////////
// Project Form
//////////////////////////////////////////////////////////////////////////////
ww.ProjectForm = Ext.extend(ww.RailsForm, {

initComponent:function() {

var config = {
items:[
{
xtype:"tabpanel",
height:430,
width:'auto',
activeTab:0,
items:[{
layout:"form",
title:"Project Settings",
tabTip: 'View/edit project settings',
style:'padding-left:10px;padding-top:10px;',
items:[{
style:'margin-bottom:10px;',
xtype:"textfield",
fieldLabel:"Project Name", name:'project[name]', width: 300, allowBlank:false,
minLength: 4, maxLength: 64,
validator : function(v){
var t = /^[a-zA-Z0-9_\-\. ]+$/;
return t.test(v);
}
},{
xtype:"textfield",
style:'margin-bottom:10px;',
name:'project[email]', fieldLabel:'Project Emails', width: 200, vtype: 'email', allowBlank:true
},{
style:'margin-bottom:10px;',
xtype:"datefield", fieldLabel:"Launch Date", name:"answers[launchdate]"
},{
style:'margin-bottom:10px;',
xtype:"time-selector", fieldLabel:"Launch Time", name:"answers[launchtimeofday]"
},{
style:'margin-bottom:10px;',
xtype:"timezone-combo", fieldLabel:"Launch Timezone", name:"answers[launchzone]", width:300
}]
},{
layout:"form",
title:"Goals",
columns: 1,
defaults:{width:'80'},
tabTip: 'View/edit the project goals',
style:'padding-left:10px;padding-top:10px;',
items:[{
xtype:"numberfield",
fieldLabel:"Launch Revenues ($)",
name:"answers[revenuegoal]"
},{
xtype:"numberfield",
fieldLabel:"Average Selling Price (ASP $)",
name:"answers[asp]"
},{
xtype:"numberfield",
fieldLabel:"List Size (subscribers)",
name:"answers[listsize]"
}
]
},{
xtype:"panel",
tabTip: 'View/edit the project objectives',
title:"Objectives",
style:'padding-left:10px;padding-top:10px;',
items:[{
// column layout with 2 columns
layout:'column'
// defaults for columns
,defaults:{
columnWidth:0.5
,layout:'form'
,border:false
,xtype:'panel'
,bodyStyle:'padding:0 5px 0 0'
}
,items:[{
// left column
// defaults for fields
defaults:{anchor:'100%'}
,items:[{
id:'marketpriority',
xtype: 'radiogroup',
fieldLabel: 'Market Priority',
style:'padding-top:4px;',
name:'answers[marketpriority]',
columns: 1,
items: [
{boxLabel: 'Optimize for Short-term Launch Profits', name: 'answers[marketpriority]', inputValue:'1'},
{boxLabel: 'Optimize for Long-term Market Share', name: 'answers[marketpriority]', inputValue:'2'}
]
},{
id:'timingchoice',
xtype: 'radiogroup',
fieldLabel: 'Market Timing',
style:'padding-top:4px;',
name:'answers[markettiming]',
columns: 1,
items: [
{boxLabel: 'Optimize for Market-Readiness', name: 'answers[markettiming]', inputValue:'1'},
{boxLabel: 'Optimize for Time-to-Market', name: 'answers[markettiming]', inputValue:'2'}
]
},{
id:'entrychoice',
xtype: 'radiogroup',
fieldLabel: 'Market Entry Type',
style:'padding-top:4px;',
name:'answers[marketentry]',
columns: 1,
items: [
{boxLabel: 'Optimize for Existing Market entry', name: 'answers[marketentry]', inputValue:'1'},
{boxLabel: 'Optimize for entering a New Market', name: 'answers[marketentry]', inputValue:'2'}
]
},{
id:'maturitychoice',
xtype: 'radiogroup',
fieldLabel: 'Product Maturity',
style:'padding-top:4px;',
name:'answers[productmaturity]',
columns: 1,
items: [
{boxLabel: 'Optimize for New Product', name: 'answers[productmaturity]', inputValue:'2'},
{boxLabel: 'Optimize for Existing Product', name: 'answers[productmaturity]', inputValue:'1'}
]
}
]
},{
// right column
// defaults for fields
defaults:{anchor:'99%'}
,items:[{
xtype:'combo',
store:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
fieldLabel:'Relationship Strength',
mode:'local',
name:"answers[relationshipstrength]",
displayField:'name'
},{
xtype:'checkbox',
fieldLabel:'List',
id:'cbmonetizelist',
boxLabel: 'Monetize existing list assets',
name:"answers[monetizelist]"
},{
xtype:'checkbox',
id:'cbgrowlist',
boxLabel: 'Grow existing list size',
name:"answers[growlist]"
},{
xtype:'checkbox',
id:'cbimproverelations',
boxLabel: 'Improve/repair relationships',
name:"answers[improverelationship]"
},{
xtype:'checkbox',
id:'cbnewlist',
boxLabel: 'Establish a completely new list',
name:"answers[newlist]"
},{
id:'cbexistingcommunity',
style:'margin-top:10px;',
fieldLabel:'Community',
xtype:'checkbox',
boxLabel: 'Tap into existing, public communities',
name:"answers[existingcommunity]"
},{
xtype:'checkbox',
id:'cbexpandcommunity',
boxLabel: 'Expand an existing, private community',
name:"answers[expandcommunity]"
},{
xtype:'checkbox',
id:'cbcreatecommunity',
boxLabel: 'Create a new community',
name:"answers[createcommunity]"
}
]
}]
}
]
},{
layout:"form",
tabTip: 'View/edit the product information',
title:"Product",
style:'padding-left:0px;padding-top:0px;',
items:[{

xtype:"tabpanel",
activeTab:0,
items:[{
layout:"form",
style:'padding-left:10px;padding-top:10px;',
tabTip:'General product settings',
title:"General",
items:[{
xtype: 'radiogroup',
style:'padding-top:4px;',
name:"answers[producttype]",
fieldLabel: 'Product Type',
columns: 1,
items: [
{boxLabel: 'Product - a packaged product of some kind', name: 'answers[producttype]', inputValue:'1'},
{boxLabel: 'Website - a free website (often advertising sponsored)', name: 'answers[producttype]', inputValue:'2'},
{boxLabel: 'Membership Site - a paid website with members', name: 'answers[producttype]', inputValue:'3'},
{boxLabel: 'Subscription - a service provided as a subscription (e.g., SaaS)', name: 'answers[producttype]', inputValue:'4'},
{boxLabel: 'Service - a service that is rendered by your company', name: 'answers[producttype]', inputValue:'5'},
{boxLabel: 'Other - other type of product or service', name: 'answers[producttype]', inputValue:'6'}
]
},{
xtype: 'textfield',
id : 'prodname',
name : 'answers[productname]',
fieldLabel : 'Product Name',
allowBlank : false,
minLength: 4,
maxLength: 32,
width:400,
validator : function(v){
var t = /^[a-zA-Z0-9_\-\. ]+$/;
return t.test(v);
}
}, {
xtype: 'textfield',
id : 'proddesc',
name : 'answers[productoneliner]',
fieldLabel : 'Brief Product Description',
allowBlank : false,
minLength: 4,
maxLength: 64,
width:500,
validator : function(v){
var t = /^[a-zA-Z0-9_\-\!\.\(\)\:\"\'\, ]+$/;
return t.test(v);
}
}, {
xtype: 'textfield',
id : 'tagline',
name : 'answers[producttagline]',
fieldLabel : 'Product Tag Line',
allowBlank : true,
maxLength: 64,
width:500,
validator : function(v){
var t = /^[a-zA-Z0-9_\-\.\(\)\:\"\'\, ]+$/;
return t.test(v);
}
}

]
},{
layout:"form",
style:'padding-left:10px;padding-top:10px;',
tabTip:'Brief product description',
title:"Brief",
items:[{
xtype:'htmleditor',
fieldLabel : 'Product Brief Description',
name : 'answers[productbriefdesc]'
}]
},{
layout:"form",
style:'padding-left:10px;padding-top:10px;',
tabTip:'Full product description',
title:"Full",
items:[{
xtype:'htmleditor',
fieldLabel : 'Product Brief Description',
name : 'answers[productfulldesc]'
}]
},{
layout:"form",
style:'padding-left:10px;padding-top:10px;',
tabTip:'Product technical description',
title:"Technical",
items:[{
xtype:'htmleditor',
fieldLabel : 'Product Brief Description',
name : 'answers[producttechdetails]'
}]
}]
}]

},{
layout:"form",
tabTip: 'View/edit your audience and messaging information',
title:"Audience & Messaging",
style:'padding-left:10px;padding-top:10px;',
items:[{
}]
},{
layout:"form",
tabTip: 'View/edit the offer settings',
title:"Offers",
style:'padding-left:10px;padding-top:10px;',
items:[{
}]
}]
}
]

}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
ww.ProjectForm.superclass.initComponent.apply(this, arguments);

}, // eo function initComponent

rbraddy
20 Oct 2009, 8:31 AM
OK. I think I'm miscommunicating the original problem or something...

Your examples do not have a form with an inherent data store that contains the form data that's been read from the server (my "answsers[field-name]" references) - mine does, and that's where the conflict seems to arise.

The form has been loaded and the "answer[]" and "project[]" arrays have the data values read from the server (database) loaded into the underlying BasicForm data store, which I'm binding to all these form controls (that's the way it's supposed to work, as I understand it).

The issue is, I can't also seem to have a "local" set of combo box value choices (like one would do in HTML, for example).

If your form had been pre-loaded with form values, I suspect it will fail as mine does.

Thanks in advance for your help with this.

Rick

jay@moduscreate.com
20 Oct 2009, 8:33 AM
try adding triggerAction : 'all' to the combo, does that fix it?

mitchellsimoens
20 Oct 2009, 8:35 AM
So it's when you use displayField that it breaks your code is what you're saying?

I also see that you are using the mode attribute now too and I tried your code using jgarcia's simple code and the drop down first works but after selecting a value it becomes the only one listed.

Is this your problem that there only becomes one value listed? If so, then triggerAction set to all will fix it

mitchellsimoens
20 Oct 2009, 8:36 AM
try adding triggerAction : 'all' to the combo, does that fix it?

dang it! he beat me! lol :))

rbraddy
20 Oct 2009, 9:36 AM
Yep! Adding triggerAction:'all' to it did the trick.

Here's the final, working code:




xtype:'combo',
store:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], // combo box choices
fieldLabel:'Relationship Strength',
mode:'local',
triggerAction:'all', // required to display 'store' value in combo
name:"answers[relationshipstrength]", // connect to form data
displayField:'name'



Thank you so very much for that magical Ext incantation!


Best,

Rick

cchain
5 Nov 2009, 10:33 AM
Just wanted to express my gratitude... this thread helped me as well.

Same situation, loading values into a form from a database, and only getting the current db value in the combo instead of all of the manually defined values. Only difference, I was using a two-dimensional array for my values.

rbraddy
5 Nov 2009, 10:42 AM
Glad it was helpful.

I find this forum to be extremely helpful. Sure makes ExtJS a lot more fun and productive to use.