PDA

View Full Version : ExtJS 4 way to set up a proxy to Rails URL such as: <url>/a/1/b.json



abcdef
28 Aug 2011, 3:29 PM
I'd like to set up a proxy that needs to fetch its grid data from a RoR url like: <url>/a/1/b.json, where 1 is a's id.

That id will change depending on the user selection on a's grid. At that point I need to dynamically build that url and fetch the data for b's grid.

What is the best way to do it?

Please help!
Thanks!

skirtle
30 Aug 2011, 4:52 AM
I believe the way to do this is to override the buildUrl method:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Ajax-method-buildUrl

abcdef
30 Aug 2011, 10:23 AM
I believe the way to do this is to override the buildUrl method:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Ajax-method-buildUrl

I am currently doing:


grid.store.getProxy().url = <dynamically generated>

and it works fine.

Any thoughts?

skirtle
30 Aug 2011, 10:44 AM
That's fine for handling an individual case but it'll get annoying having to write it over and over again. If the URL format you described is commonplace in your application I'd still take the custom proxy approach.

abcdef
30 Aug 2011, 9:32 PM
That's fine for handling an individual case but it'll get annoying having to write it over and over again. If the URL format you described is commonplace in your application I'd still take the custom proxy approach.

Hmm..can you give me a quick example of how to actually use the buildUrl function?

skirtle
1 Sep 2011, 9:34 AM
Not the simplest example but I've knocked together a proxy that does what you describe. Example usage:


Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
proxy: {
type: 'parameterproxy',
url: 'group/{group.id}/users'
}
});

var usersStore = Ext.create('Ext.data.Store', {
model: 'User'
});

// Then either...
usersStore.load({
group: {id: 1}
});

// ... or ...

userStore.load({
group: myGroup // myGroup is a record with an id field
});

The proxy itself is:


Ext.define('ParameterProxy', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.parameterproxy',

buildUrl: function(request) {
return this.substituteParameters(this.callParent(arguments), request);
},

substituteParameters: function(url, request) {
return url.replace(/{(.*?)}/g, function(full, capture) {
var index = capture.indexOf('.');
var dataValue;

if (index === -1) {
dataValue = request.operation[capture];
}
else {
var obj = request.operation[capture.slice(0, index)];

if (obj.isModel) {
dataValue = obj.get(capture.slice(index + 1));
}
else {
dataValue = obj[capture.slice(index + 1)];
}
}

return encodeURIComponent(dataValue);
});
}
});

abcdef
12 Sep 2011, 10:58 PM
Not the simplest example but I've knocked together a proxy that does what you describe. Example usage:


Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
proxy: {
type: 'parameterproxy',
url: 'group/{group.id}/users'
}
});

var usersStore = Ext.create('Ext.data.Store', {
model: 'User'
});

// Then either...
usersStore.load({
group: {id: 1}
});

// ... or ...

userStore.load({
group: myGroup // myGroup is a record with an id field
});

The proxy itself is:


Ext.define('ParameterProxy', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.parameterproxy',

buildUrl: function(request) {
return this.substituteParameters(this.callParent(arguments), request);
},

substituteParameters: function(url, request) {
return url.replace(/{(.*?)}/g, function(full, capture) {
var index = capture.indexOf('.');
var dataValue;

if (index === -1) {
dataValue = request.operation[capture];
}
else {
var obj = request.operation[capture.slice(0, index)];

if (obj.isModel) {
dataValue = obj.get(capture.slice(index + 1));
}
else {
dataValue = obj[capture.slice(index + 1)];
}
}

return encodeURIComponent(dataValue);
});
}
});

Ok. I see how to use it. Thanks!

mberrie
13 Sep 2011, 11:58 PM
Nice idea, skirtle!

isqad88
2 Jul 2013, 12:03 AM
It's doesn't works after refresh grid by click refersh button in bbar.