PDA

View Full Version : Set Combobox valueField and displayField after form load



wboard
18 Aug 2013, 7:49 AM
I have searched for solutions but couldn't find a satisfying one.
The problem is as follows:

Im am loading a form with the following JSON data:


{
"success": true,
"data": {
"reminder_id": 13213,
"reminder_name": "test name",
"reminder_type_id": 1,
"reminder_end_date": "2013-06-21",
"reminder_end_time": "08:00",
"remind_in_time": 0,
"remind_in_time_type": 1440,
"reminder_uid": 94,
"reminder_category": "None",
"reminder_description": "test description"
}
}



After form load, every field is set with the right value, except the combobox. The combobox stays empty.
When i change the forceSelection property to FALSE, it is setting the displayValue with the given id. What I want is my combobox selecting its value from the remotely loaded store (by the given ID).

The Combobox inside that form has a remote JSON store, which is autoloaded.


var ReminderUserCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: __('Who to remind'),
id: 'reminder_uid',
name: 'reminder_uid',
store: Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
autoLoad: true,
proxy: {
type: 'ajax',
url: '/base/base_action.php?action=listusers',
reader: {type: 'json', root: 'results'}
}
}),
queryMode: 'local',
typeAhead: true,
minChars: 2,
forceSelection: false,
emptyText: __('select a user'),
displayField: 'name',
valueField: 'id',
allowBlank: false
});


Question 1: How can i get my combobox selecting the right value after form load (when forceSelection: false AND store autoLoad: true)

Question 2: How can i get my combobox selecting the right value after form load (when forceSelection: false AND store autoLoad: false), autoLoad: false, because i don't want to unnecessary load the store.

wboard
19 Aug 2013, 12:21 PM
Anyone any idea? it looks to me i'm missing a simple dot...

slemmon
19 Aug 2013, 9:03 PM
You should be able to use either loadRecord or getForm().setValues() to pass the data object to the form and set the values in it (provided the field name and the key in the data set match per field).

See example:


var form = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,


// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',


// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},


// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'combobox',
name: 'state',
fieldLabel: 'Choose State',
store: {
fields: ['name', 'abbr']
},
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
}],


tbar: [{
text: 'Load as Record',
handler: function () {
Ext.define('MyRecord', {
extend: 'Ext.data.Model',
fields: ['state', 'first']
});

var rec = Ext.create('MyRecord', {
first: 'FIRST',
state: 'New York'
});

form.loadRecord(rec);
}
}, {
text: 'Load Values',
handler: function () {
form.getForm().setValues({
first: 'FIRST',
state: 'New York'
});
}
}],
renderTo: Ext.getBody()
});

wboard
21 Aug 2013, 8:20 AM
That still doesn't work at all, i still see the valueField as displayField

I'm loading the form as follows:



FormPanel.load({
url: '/user/reminder/reminder_action.php?action=load_reminder&id=' + r.data.reminder_id,
success: function(response, options) {
FormPanel.getForm().setValues(Ext.JSON.decode(response.data));
alert(response.data.reminder_uid);
}
});


What's going wrong?

slemmon
21 Aug 2013, 12:26 PM
I broadened my working example below to include loading from a remote source. In your app / test case is 13213 a value corresponding to a name/value in your combo's store? If so, is your combo's store loaded by the time the form is loaded? If not you might load it first prior to loading the form.

Client Code


var form = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 400,




// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',




// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},




// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'combobox',
name: 'state',
fieldLabel: 'Choose State',
store: {
fields: ['name', 'abbr'],
data: [{
name: 'New York',
abbr: 'NY'
}]
},
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
}],




tbar: [{
text: 'Load as Record',
handler: function () {
Ext.define('MyRecord', {
extend: 'Ext.data.Model',
fields: ['state', 'first']
});

var rec = Ext.create('MyRecord', {
first: 'FIRST',
state: 'NY'
});

form.loadRecord(rec);
}
}, {
text: 'Load Values',
handler: function () {
form.getForm().setValues({
first: 'FIRST',
state: 'NY'
});
}
}, {
text: 'Load Values Remotely',
handler: function () {
form.load({
url: 'data/json.json'
});
}
}, {
text: 'Get State Value',
handler: function () {
console.log(form.getForm().findField('state').getValue());
}
}],
renderTo: Ext.getBody()
});


Server Response:


{
"success": true,
"data": {
"first": "FIRST",
"state": "NY"
}
}

wboard
24 Aug 2013, 12:37 AM
Thanks! But it still won't work...

The store of my combo (first post) is loaded prior loading the form (i see it in Firebug).
The value "reminder_uid" is the valuefield of my combo. The problem after loading the form is that i also see the value in my displayfield. I obviously want it to select the corresponding record in my combobox store.

wboard
25 Aug 2013, 1:52 AM
To be sure i checked whether the ID 94 (reminder_uid) is in the response from the server:

[{"id":94,"name":"wboard"}]

To be extra sure that the combo's remote store is loaded prior loading the form, i added this in my code:


FormPanel.on({
beforeaction: function (form, action, eOpts) {
if (action.type == 'load') {
UserCombo.store.load();
}
}
});


Anyone has any idea? Because its driving me crazy... :)

slemmon
26 Aug 2013, 12:55 PM
You may have to post more of your client code / server response. A complete test case, really. The test case I posted is working for me with 4.2.1.

wboard
28 Aug 2013, 8:58 AM
I fixed this problem by changing my JSON response from the server to:
Valid JSON

[{"id":"94", "name":"wboard"}]

Earlier my response was:
Valid JSON

[{"id":94, "name":"wboard"}]

Do you know why this makes a difference? (Changing id into a string)