Remote Combo Box (JSON)

[jul1an]

Hello, I have a problem creating a edit form with a combobox with remote AJAX store

This is my source code:

PlaceForm.js

Ext.define('Place.view.place.PlaceForm', {
extend: 'Ext.form.Panel',

alias: 'widget.placeform',

title: 'Add a place',

frame: true,

bodyPadding: 5,

layout: 'anchor',

defaults: {
anchor: '100%'
},

items: [
{
fieldLabel: 'Name',
name: 'name',
xtype: 'textfield',
allowBlank: false
},
{
fieldLabel: 'Country',
name: 'country',
xtype: 'combo',
store: 'CountryStore',
valueField: 'id',
displayField: 'name',
allowBlank: false,
editable: false,
triggerAction: 'all',
id:'combocountry',
mode: 'local'
},

...

CountryStore.js

Ext.define('Place.store.CountryStore', {
extend: 'Ext.data.Store',

model: 'Place.model.CountryModel'
});

CountryModel.js

Ext.define('Place.model.CountryModel', {
extend: 'Ext.data.Model',

proxy: {
type: 'ajax',
url: '/api/country/'
},

fields: [
'id',
'name'
]

});

I have a tree on the left side with items and when somebody select an item I create a new tab with edit form, and call load so form can read remote data.


form = Ext.ClassManager.instantiateByAlias(formAlias, {
url: url,
node_id: selection.data.node_id,
node_name: selection.data.name
});

this.getTab().removeAll();
this.getTab().add(form);

form.load({url: url, method:'GET', waitMsg: 'Loading...'});

I see that combo box reads remote data, but there is no selected value in combo, no mather that the form have a correct value for this field.

http://s3.amazonaws.com/www.sencha.com/forum/Screenshot-ExtJS+-+Chromium-01.png

And when I open combo box for the first time it reads once again the values from database ?!?

http://s3.amazonaws.com/www.sencha.com/forum/Screenshot-ExtJS+-+Chromium-02.png

The first problem (not selected combo box value) is happening only the first time I create a tab. On the next tab which have a new form and a new combo box created, the correct combo value is selected. Anyway the second problem remain, when combo box is opened for the first time in tab it loads data again :(

What I'm doing wrong?

This is what AJAX I return for form values:

{
"data": {
"city": "\u0421\u043e\u0444\u0438\u044f",
"name": "\u0414\u0438\u0432\u0430\u043a\u0430",
"cross_street": "\u0443\u043b. \u0425\u0430\u043d \u0410\u0441\u043f\u0430\u0440\u0443\u0445",
"country": "BG",
"twitter": null,
"phone": "02/986 6971",
"state": null,
"address": "\u0443\u043b. 6-\u0442\u0438 \u0441\u0435\u043f\u0442\u0435\u043c\u0432\u0440\u0438 41\u0410",
"id": 6
},
"success": true
}

And this is what I return for combo box values:

[
{
"id": "BF",
"name": "Burkina Faso"
},
{
"id": "BG",
"name": "Bulgaria"
},
{
"id": "BH",
"name": "Bahrain"
},
...
{
"id": "ZW",
"name": "Zimbabwe"
}
]

[jul1an]

I think I managed to correct the problem, with missing initial value in combo box

PlaceForm.js

Ext.define('Place.view.place.PlaceForm', {
extend: 'Ext.form.Panel',

alias: 'widget.placeform',

title: 'Add a place',

frame: true,

bodyPadding: 5,

layout: 'anchor',

defaults: {
anchor: '100%'
},

items: [
{
fieldLabel: 'Name',
name: 'name',
xtype: 'textfield',
allowBlank: false
},
{
fieldLabel: 'Country',
name: 'country',
xtype: 'combo',
store: 'CountryStore',
valueField: 'id',
displayField: 'name',
allowBlank: false,
editable: false,
triggerAction: 'all',
id:'combocountry',
mode: 'remote'
},

...

CountryStore.js

Ext.define('Place.store.CountryStore', {
extend: 'Ext.data.Store',

model: 'Place.model.CountryModel',

autoLoad: true
});

But why when I open combo box for the first time it read its values again?

And what is the right JSON that I have to return for combo values? (Mine is also working)

[jul1an]

But now the countries are also loaded once when I start web application :( ?

[jul1an]

I found that I have an additional form code so it now works but I can't see any logic in it. Place what is the correct way to make all of this?