PDA

View Full Version : Binding Association to ComboBox



MSymonsPRog
1 Apr 2015, 12:30 PM
The idea seems pretty simple, but it looks like EXTJS (I use version 4.2.4) gets hung up on on the existence of a proxy, which should not exist since it is an association.
Example:

Person Model


Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'auto'
},{
name: 'name',
type: 'string'
}],
associations: [{
type: 'hasMany',
model: 'Car',
name: 'cars'
}]
}


Car Model


Ext.define('Car', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'auto'
},{
name: 'name',
type: 'string'
},{
name: 'make',
type: 'string'
}]
}


Assume you have some ajax call that returns a valid json which fills a store referencing this model.
I want to bind the returned association from the model to a combo box. This causes the proxy error. Something like this in a controller:



loadRecord: function(record){
var combo = Ext.ComponentQuery.query('#carCombo')[0];
combo.bindStore(record.cars()); //This is where the error happens
}


Any ideas, or is this not feasible?

skirtle
1 Apr 2015, 7:56 PM
When you say 4.2.4 do you mean a nightly build?

Without a Fiddle or a stacktrace it's a little difficult to guess but I see no reason why it should need a proxy so long as queryMode: 'local' is set.

That said, I tend to avoid bindStore. Personally I'd just add the records to the combobox's existing store instead. If you go down that route you do need to be a little bit careful that your combobox has a suitable store configured when you first create it, you don't want to modify the default shared empty store.

MSymonsPRog
2 Apr 2015, 4:41 AM
Yeah it's a nightly build.The reason I am not moving the records manually is because there could potentially be hundreds of records. And past experience in doing so has caused a very slow load (and that was with only 400 records) I set the same store to a grid via reconfigure, and that works fine. It also works much, much faster.I would set up a fiddle, but I don't exactly have a server on hand to send down a json to fiddle. Or at least my work place wouldn't like that queryMode is set to local, it was my first thought as to why the error happens.

Though, I can say that the way the other team members get the record is by loading the parent model's proxy. Do children stores for associations inherit proxies from their parent models?

skirtle
2 Apr 2015, 5:00 AM
You don't need a server, Sencha Fiddle can do that for you. You just need to provide it with some static JSON to serve up.

Moving records shouldn't be slow if you move them all in one go, though moving them one at a time would be a disaster. If you are moving them in one go then you might need to suspend some events or updates somewhere. I suggest running a profiler to figure out exactly what the problem is before giving up on this approach.

I would expect your cars store to inherit its proxy from the Car model, that's how stores usually work. If you're just looking for a bodge you don't need to put it on the model though, you can put the proxy directly on the store using the storeConfig.

MSymonsPRog
2 Apr 2015, 6:07 AM
I tried switching it to a store and commented out all proxy info from the model. I'll post some code I think I can share.


var store = Ext.create('Ext.data.Store', {
model: 'Organizations.model.org.Organization',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'organizations/load.do?id=' + orgId,
reader: {
type: 'json'
}
}
});
var me = this;
store.load({
callback: function(records){
if(records.length == 1)
me.loadOrganization(records[0]);
}
})


just some simple code to populate the store. It returns a json, it's valid, every other field populates.
Here is the code for loadOrganization



loadOrganization: function(record) {
// Set the flat data fields
this.getEditWindow().down('#shortName').setValue(record.get('shortName'));
this.getEditWindow().down('#longName').setValue(record.get('longName'));


// Set the enum populated dropdown
this.getEditWindow().down('#orgTypeCombo').setValue(record.get('type'));


// Set the member and role assignment grids.
var memberAsm = this.getEditWindow().down('#membersGrid');
var roleAsm = this.getEditWindow().down('#rolesGrid');
record.assignments().group('formalName');
memberAsm.reconfigure(record.assignments());
roleAsm.reconfigure(record.roles());
Ext.apply(this.getAddMemberToOrgWindow().down('#memberRoleCombo'), {
store: record.roles()
});
},


If I use bindStore or use the apply, I get the same error:

[E] Ext.data.proxy.Server.buildUrl(): You are using a ServerProxy but have not supplied it with a url.
LOG: {
msg : "You are using a ServerProxy but have not supplied it with a url.",
sourceMethod : "buildUrl",
sourceClass : "Ext.data.proxy.Server"
}

the reconfigure on the store works fine, but for some reason, it doesn't like setting it to the combo box.
any more ideas?

skirtle
2 Apr 2015, 8:29 AM
Ext.apply doesn't perform any configuration magic, it just copies properties across. That approach has no chance. It does raise a question though. There's no way calling Ext.apply can cause the store to load, so when exactly does it happen?

The log message suggests that something is trying to load the store. If you can't create a Fiddle then you'll have to figure out what's doing the load call yourself. Put in a breakpoint and inspect the stack, it should be pretty obvious what's going on.

12 Jun 2016, 10:14 PM
I'm struggling with the same issue in 4.2.5. It was not there in 4.2.3. querymode is set to local and I have tried setting a memory proxy and disabling remotefilter etc. for the association at runtime, but it doesn't work on all store binds.Did you ever find a solution to this?

jdkhamba
14 Jun 2016, 5:50 PM
Something like this: ?

https://fiddle.sencha.com/#fiddle/1c07