PDA

View Full Version : Select valueField/displayFields problem



dac0nvu
26 Oct 2010, 10:40 AM
I have a Select field on my form that is passing the text as the value. The form is one card on a Tab Panel. There are other elements to this form, but I've included just the Select that I'm having a problem with:



var appsModel = Ext.regModel('apps', {
fields: [
{name: 'value', type: 'string'},
{name: 'label', type: 'string'}
]
});

var sourceStore = new Ext.data.JsonStore({
id: 'sources-store',
model: Ext.ModelMgr.types['apps'],
autoLoad: true,
proxy: {
type: 'ajax',
reader: {
type: 'json',
idProperty: 'value'
},
url: '/eaiaudit/MobileServices',
actionMethods: {
read: 'POST'
},
extraParams: {
command: 'getUserApps',
arg: 'abc0xyz'
}
}

});

var sourcesWidget = new Ext.form.Select({
name: 'messageSource',
label: 'Message Source',
id: 'messageSources',
valueField: 'value',
displayField: 'label',
store: sourceStore,
options: sourceStore.data
});

var auditCard = new Ext.form.FormPanel( {
title: 'Audit',
iconCls: 'info',
labelAlign: 'left',
fullscreen: true,
standardSubmit: true,
url: '/eaiaudit/AuditRecordSearch.do',
method: 'POST',
dockedItems:[toolbar],
items: [....., ....., sourcesWidget, ....., .....]
});
The JSON

[{"value":"T1","label":"Test1"},{"value":"T2","label":"Test2"}]The form looks good on the screen, the labels are displaying correctly ('Test1', 'Test2'...). But when I call my servlet, the form is passing my messageSource field's text ('Test1' and 'Test2') instead of its value ('T1' and 'T2'). Can you tell what's wrong? Why are my labels being passed as the values?

David

evant
26 Oct 2010, 3:16 PM
In the next release there will be a configuration option hiddenName to be used in conjunction with standardSubmit. Stay tuned ;)

dac0nvu
27 Oct 2010, 4:08 AM
Thanks for the reply Evan, but I'm confused by your response. What does this new 'hiddenName' option have to do with a field's text being passed incorrectly as its value?

Shouldn't displayField be the text that is shown for the Select option and valueField be the actual value of that Select option? And shouldn't that valueField be passed as the parameter for that Select field on the form?

evant
27 Oct 2010, 4:24 AM
It is, but you're using standard form submission. Note that the select isn't a <select> element, it's just a text field with some fancy styling. So it sends the value of the textbox. In the next version, it will sync the underlying value into this hidden field so you can use it with standard form submission.

dac0nvu
5 Nov 2010, 10:40 AM
Hi Evan, when I started this thread, I was using .96. Has this been implemented in any recently updated versions (.98, .99)? If not, any idea when this will appear?

aconran
5 Nov 2010, 11:59 AM
Yes hiddenName is in 0.99.

dac0nvu
10 Nov 2010, 7:42 AM
Thanks Aaron, I just downloaded 1.0RC1 and I can't seem to get it to work. Here is what I have:


var appsWidget = new Ext.form.Select({
name: 'applId',
label: 'Applications',
id: 'applications',
valueField: 'userAppValue',
displayField: 'userAppLabel',
hiddenName: 'userAppValue',
store: appsStore,
options: appsStore.data
});I've tried every combination of valueField, displayfield and hiddenName, but either the Label (instead of the actual value) is being passed or the Select doesn't actually select the item that I choose. I can't find 'hiddenName' in the API, has it been updated?

This is the data that is coming back from the store:

[{"userAppLabel":"Test1","userAppValue":"T1"},{"userAppLabel":"Test2","userAppValue":"T2"}]Is there a short example you can give me to show me how to display text but pass a value? For example, I want 'Test1', 'Test2' displayed in the drop down list, but I want the values T1, T2 passed in the submit.

Thanks.
David

aconran
10 Nov 2010, 10:49 AM
Hrm, you should be using options or store, not both. Possibly this is triggering the problem? I will do some further investigating.

How are you submitting? via form.submit or getValues?

dac0nvu
10 Nov 2010, 11:43 AM
Aaron,

I am submitting via a form. Here is more of the code:



var appsWidget = new Ext.form.Select({
name: 'applId',
label: 'Applications',
id: 'applications',
valueField: 'userAppValue',
displayField: 'userAppLabel',
hiddenName: 'userAppValue',
store: appsStore,
options: appsStore.data
});

var buttons = [
{xtype: 'spacer'},
{text: 'Reset',
ui: 'action',
handler: function() {
alertCard.reset();
}
},
{text: 'Search',
ui: 'action',
handler: function() {
alertCard.submit({
waitMsg : {
message: 'Submitting',
cls : 'demos-loading'
}
});
}
}
];

var toolbar = new Ext.Toolbar( {
dock: 'bottom',
centered: false,
items: buttons
});

var alertCard = new Ext.form.FormPanel( {
title: 'Alert',
iconCls: 'favorites',
labelAlign: 'left',
fullscreen: false,
standardSubmit: true,
url: '/eaiaudit/AlertRecordSearch.do',
method: 'POST',
dockedItems:[toolbar],
items: [appsWidget]
});
If I change to standardSubmit: false, the values do get sent, however, then when the JSON returns I get SyntaxError: Unable to parse JSON string

Commenting out store or options doesn't seem to make a difference. It seems to be a combination of standardSubmit and how the valueField, displayField and hiddenName are used.

evant
10 Nov 2010, 12:12 PM
The hiddenName is only supposed to be used in conjunction with standardSubmit, it will have no effect on an ajax form.

dac0nvu
10 Nov 2010, 12:28 PM
Evan, that seems odd since I can see the values coming in on my form in my debugger.

standardSubmit: true, sends my text.
standardSubmit: false, sent my values. But then I get the JSON parse error.

Using my example above, can you give me a working example of how hiddenName is to be used? I find it odd that no one has come across this before. Are Selects not used very often with different text and values? Would there be something more appropriate for me to use when presenting the user with a semi-long list of values to choose from?

dac0nvu
14 Dec 2010, 1:48 PM
*bump*

I'm still wondering if anyone has gotten this hiddenName parameter to work. Once again, here is my code. I've tried it with standardSubmit: true and standardSubmit: false.....It just doesn't work. I keep getting the display NAMES passed instead of the VALUES. I'm using 1.01.



// My store to populate the first drop-down box.
var sourceStore = new Ext.data.JsonStore({
id: 'sources-store',
model: Ext.ModelMgr.types['sourceApps'],
autoLoad: false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
idProperty: 'userAppValue'
},
url: '/eaiaudit/MobileServices',
actionMethods: {
read: 'POST'
},
extraParams: {
command: 'getUserApps'
}
}

});

// The first drop-down box widget
var sourcesWidget = new Ext.form.Select({
name: 'messageSource',
label: 'Message Source',
id: 'messageSources',
valueField: 'userAppValue',
displayField: 'userAppLabel',
hiddenName: 'userAppValue',
store: sourceStore
});

// My store to populate the second drop-down box.
var targetStore = new Ext.data.JsonStore({
id: 'targets-store',
model: Ext.ModelMgr.types['targetApps'],
autoLoad: false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
idProperty: 'appValue'
},
url: '/eaiaudit/MobileAppQuery',
actionMethods: {
read: 'POST'
},
extraParams: {
command: 'getApps'
}
}

});

// The second drop-down box widget
var targetsWidget = new Ext.form.Select({
name: 'messageTarget',
label: 'Message Target',
id: 'messageTargets',
valueField: 'appValue',
displayField: 'appLabel',
hiddenName: 'appValue',
store: targetStore
});

//The form panel
var auditSearchCard = new Ext.form.FormPanel( {
title: 'Audit',
iconCls: 'info',
labelAlign: 'left',
fullscreen: true,
standardSubmit: true,
url: '/eaiaudit/MobileAuditRecordsSearch',
method: 'POST',
items: [sourcesWidget, targetsWidget]
I'll ask the developers again...can you please provide a simple example of how to use the hiddenName parameter? I just want to see how to have a simple dropdown box that shows a few items, but when the form is submitted, the dropdown box's values are passed instead of the names that appear in the dropdown.

Or if you can just show me what I'm doing wrong in my code, that would be good too. But both would be appreciated.

Thanks.

apos
12 Apr 2011, 6:14 AM
*bump*

I'm still wondering if anyone has gotten this hiddenName parameter to work. Once again, here is my code. I've tried it with standardSubmit: true and standardSubmit: false.....It just doesn't work. I keep getting the display NAMES passed instead of the VALUES. I'm using 1.01.



// My store to populate the first drop-down box.
var sourceStore = new Ext.data.JsonStore({
id: 'sources-store',
model: Ext.ModelMgr.types['sourceApps'],
autoLoad: false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
idProperty: 'userAppValue'
},
url: '/eaiaudit/MobileServices',
actionMethods: {
read: 'POST'
},
extraParams: {
command: 'getUserApps'
}
}

});

// The first drop-down box widget
var sourcesWidget = new Ext.form.Select({
name: 'messageSource',
label: 'Message Source',
id: 'messageSources',
valueField: 'userAppValue',
displayField: 'userAppLabel',
hiddenName: 'userAppValue',
store: sourceStore
});

// My store to populate the second drop-down box.
var targetStore = new Ext.data.JsonStore({
id: 'targets-store',
model: Ext.ModelMgr.types['targetApps'],
autoLoad: false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
idProperty: 'appValue'
},
url: '/eaiaudit/MobileAppQuery',
actionMethods: {
read: 'POST'
},
extraParams: {
command: 'getApps'
}
}

});

// The second drop-down box widget
var targetsWidget = new Ext.form.Select({
name: 'messageTarget',
label: 'Message Target',
id: 'messageTargets',
valueField: 'appValue',
displayField: 'appLabel',
hiddenName: 'appValue',
store: targetStore
});

//The form panel
var auditSearchCard = new Ext.form.FormPanel( {
title: 'Audit',
iconCls: 'info',
labelAlign: 'left',
fullscreen: true,
standardSubmit: true,
url: '/eaiaudit/MobileAuditRecordsSearch',
method: 'POST',
items: [sourcesWidget, targetsWidget]
I'll ask the developers again...can you please provide a simple example of how to use the hiddenName parameter? I just want to see how to have a simple dropdown box that shows a few items, but when the form is submitted, the dropdown box's values are passed instead of the names that appear in the dropdown.

Or if you can just show me what I'm doing wrong in my code, that would be good too. But both would be appreciated.

Thanks.


Hey dac0nvu
Did you come up with a solution after all? I'm stuck too.
Thanx

dac0nvu
12 Apr 2011, 6:30 AM
Yeah, I eventually rewrote my code a little differently and it works. I am disappointed though that my request for an explanation of the 'hiddenName' parameter was never given though. In the end, I'm not using it in my code.

Here's my updated code:


var userAppStore = new Ext.data.Store({
model: 'LookupObject',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/eaiaudit_m/MobileAppQuery?command=getAllForUser',
reader: {
type: 'json',
root: 'records'
},
success: function(response, opts) {
var resp = Ext.util.JSON.decode(response.responseText);
console.log(resp);
if(!resp.success) {
Ext.Msg.alert('Error', resp.error);
}
}
}
});


and my select box:


var sourcesWidget = new Ext.form.Select({
name: 'messageSource',
label: 'Message Source',
id: 'messageSources',
valueField: 'id',
displayField: 'desc',
store: userAppStore
});


and my model:


Ext.regModel('LookupObject', {
fields: ['id', 'desc']
});


dac0nvu

apos
12 Apr 2011, 7:26 AM
dac0nvu,
THANK YOU -sicerely- for the lightning-fast response! :)
Very kind of you.
I think I found my way in a more simple manner, but my case was much simplier than yours.
Anyway, thank you again!!!