PDA

View Full Version : Help with Ajax queries in Sencha Fiddle



dicorato
23 Sep 2015, 12:26 AM
I've a couple of problems I want to explain using fiddles, but I don't know how to configure a proxy for a model in Sencha Fiddle, everything ok in the real world, using queries.

Complete Fiddle: https://fiddle.sencha.com/#fiddle/tq3



Ext.define('Links.PersonModel', {
extend: 'Ext.data.Model',

fields: [
{name: 'id'},
{name: 'fullName', type: 'string'},
{name: 'notes', type: 'string'}
],

// FIXME what kind of proxy configuration and Mock resources should I use in Fiddles?
//proxy: {
//}
});


Ext.define('Links.PersonStore', {
extend: 'Ext.data.Store',
alias: 'store.persons',
storeId: 'persons',

autoLoad: true,


proxy: {
type: 'ajax',
url: 'persons.json',
reader: {
type: 'json',
}
}
});


Everything ok with the store, but when using ViewModel links the framework is going to query the model for the record. How can I configure the proxy and the Mock resources?

Thank you!!

mitchellsimoens
23 Sep 2015, 3:51 AM
You want to load the model separately and load the different mock data based on the id of the model? So it's not one mock data that you need to target, it's multiple?

dicorato
23 Sep 2015, 4:41 AM
I'm using links this way:



onRowDblClick: function(table, rec) {
var detailTabs = this.getView();
var tabId = 'detail_' + rec.id;

var tab = detailTabs.child('#' + tabId);

if(!tab) {
tab = detailTabs.add({
xtype: 'show-detail',
itemId: tabId,
viewModel: {
links: {
person: {
type: 'Links.PersonModel',
id: rec.id
}
}
}
});
}

detailTabs.setActiveTab(tab);
}


In this case the framework asks the proxy defined on the model for the record with id rec.id. (is my understanding right?)
I don't know how to configure Mock resources and the proxy to serve the requested data.

I'm sorry, I posted this thread on the ExtJS forum, thanks for moving it out.

mitchellsimoens
23 Sep 2015, 4:42 AM
The mock data is singular, there is no handling of dynamic needs. That being said, this is fixed for the Fiddle 2 rewrite but that doesn't help you now.

dicorato
23 Sep 2015, 4:50 AM
OK, thanks, so, by now it's not possible to share the functioning of ViewModel links in Fiddle?
Or is there a workaround? For example, how would you correct this? https://fiddle.sencha.com/#fiddle/tq3

mitchellsimoens
23 Sep 2015, 5:57 AM
Fiddle hasn't been updated to work with links and such that the new Ext versions have due to the fiddle rewrite and the proxies aren't dynamic enough to do this. With a simple extension, you can apply the params from the request onto the url. Here is your example with a simple extension:

ubv

Important bits are:


Ext.define('Fiddle.data.proxy.DynamicModelAjax', {
extend : 'Ext.data.proxy.Ajax',
alias : 'proxy.fiddle-dynamicmodelajax',

getUrl : function(request) {
var url = this.callParent([request]);

if (url && !url.isTemplate) {
url = new Ext.XTemplate(url)
//apply request params onto the url
.apply(request.getParams());
}

return url;
}
});

and


Ext.define('Links.PersonModel', {
extend: 'Ext.data.Model',

fields: [
{name: 'id'},
{name: 'fullName', type: 'string'},
{name: 'notes', type: 'string'}
],

proxy: {
type : 'fiddle-dynamicmodelajax',
url : 'person{id}.json' // expect an id param
}
});

dicorato
23 Sep 2015, 6:42 AM
Thanks, mitchellsimoens! Great support!