Develop Reference

Slow loading of combobox items with viewmodel

My app has a form with three combobox.
The comboboxs stores are in a ViewModel.
Ext.define('app.ComboboxsModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.comboboxsmodel',
stores: {
storeA:{
model:'AModel',
autoLoad:true,
actionMethods:{
read:'POST'
},
proxy: {
type: 'ajax',
url: 'php/url',
reader:{
type:'json',
rootProperty: 'data',
successProperty: 'success'
}
}
},
storeB:{
model:'BModel',
autoLoad:true,
actionMethods:{
read:'POST'
},
proxy: {
type: 'ajax',
url: 'php/url',
reader:{
type:'json',
rootProperty: 'data',
successProperty: 'success'
}
}
},
storeC:{
...
}
});
It works. The data is loaded into comboboxs.
The problem is that the loading is very slow.
Data from the last combobox take about 5 seconds to load.
If instead of declaring the stores in viewmodel I placed the stores in the app store folder and reference them in Apllication.js file works as expected and faster.
However, I intended to use ViewModel.
Is there any way to load faster - or before load form - the stores (comboboxs items) with viewmodel?
EDIT:
Comboboxs Fiddle: https://fiddle.sencha.com/#fiddle/vqe
COMMENT:
Explain better the issue:
The problem is not at this stage, but when I edit a record in a grid and I want to load the record data in the form comboboxs (config 'name').
If the config valudeField 'name_id' is replaced by 'name' load faster, but still slow.
However, on the server side (PHP), for the comboboxs, I work preferably with ids (primary key).
name: 'name',
displayField: 'name',
valueField: 'name_id',

Setting LocalStorage store for nested list

I've created a localstorage store, and stored demo values in it following this tutorial:
http://sureshdotariya.blogspot.com/2013/03/understanding-local-storage-proxy-in.html
And it all works fine, I've viewed the store data in the resources in chrome and it is there, and when I load the page it loads fine, no errors, but it shows no data, here's my view code:
Ext.define('MyTest.view.SearchPanel', {
extend: 'Ext.Panel',
xtype: 'searchpanel',
config: {
layout: 'fit',
items: [
{
xtype: 'nestedlist',
title: 'Search Results',
displayField: 'Name',
store: {
storeId: 'UserStore',
fields: ['Name']
},
}]
}
});
What am I missing here? Can I use local storage store as the store for the nested list? And if yes then why it shows "No items found", I've added the store in app.js, I tried requiring it in this view but that did not work.
Your help is appreciated, thanks.

Ext.dataview.NestedList requires Ext.data.TreeStore instead of Ext.data.Store ( in the sample URL you gave ).
There are root, defaultRootProperty config required in Ext.data.TreeStore, and leaf property in items.
Of course you can set Ext.data.proxy.LocalStorage as proxy in Ext.data.TreeStore , try with these codes :
Ext.define('ListApp.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
Ext.define('App.store.User', {
config: {
model: 'ListApp.model.User',
defaultRootProperty: 'items',
root: data
proxy: {
type: 'localstorage',
id: 'UserInfo'
}
}
});

extjs ServerProxy error on save

I'm trying to update a field value from a grid row icon. But I get this error:
Uncaught Ext.data.proxy.Server.buildUrl(): You are using a ServerProxy but have not supplied it with a url.
I'm using a RestProxy, this is the store definition:
Ext.define('SF.store.Contents', {
requires: [
'SF.Config',
'SF.store.RestProxy'
],
extend: 'Ext.data.Store',
model: 'SF.model.Content',
autoLoad: false,
proxy: Ext.create('SF.store.RestProxy', {
url: (new SF.Config()).getApiBaseUrl() + "admin/contents"
}),
});
column code on GridPanel definition
....
store: 'Contents',
.....
{ xtype: 'actioncolumn', header: 'Action'
, width: 40
, items: [{ // Delete button
icon: '......./cancel.png'
, handler: function(grid, rowIndex, colindex) {
var record = grid.getStore().getAt(rowIndex);
record.set('status',6);
record.save(); //THIS CALL THROWS THE ERROR
grid.store.remove(record);
}
},......
In addition, the proxy is working fine for GET request. Does anyone knows what should I define on the proxy?
I've read the official doc but it is not clear for me.

You have to provide a proxy for you model. In the button´s handler you are calling the model's save method (SF.model.Content) then, your SF.model.Content model has to provide a proxy.

issue with pagingtoolbar on a livesearchgridpanel

i'm trying to set a pagingtoolbar on my livesearchgridpanel.i'm getting the data over a Httpproxy ,so here is my store :
tempStore = new Ext.data.Store
({
groupField : default_groupby_s,
model : 'reportWorkspace',
allowFunctions : true,
autoSync : false,
pageSize : 20,
autoLoad : true,
remoteSort : false,
proxy : new Ext.data.HttpProxy
({
url : url_s,
actionMethods :
{
read : 'POST'
},
reader :
{
type : 'json',
root : 'workspace_report',
successProperty : 'success'
}
})
});
return tempStore ;
}
and here is my pagingtoolbar ,it will be included in my LivesearchgridPanel:
{
xtype: 'pagingtoolbar',
store: tempStore ,
dock: 'bottom',
pageSize:20,
displayInfo: true
}
the problem,it's that the pagingtoolbar is displaying pages correctly,but in the case of my grid,it displays ALL the data at the same time (in every page) . is it possible to do it without setting any starting point or limit in the autoload param ??
i just want to download all my data and then display it Correctly with pages
Any suggestion Please ?

I see several incosistencies:
LiveGrid was not built for paging at all but as an alternative to it.
ExtJS 4.1x no longer uses HTTP Proxy class but instead uses type: 'ajax' proxy config.
If you are going to page your data, you need to remote sort it, otherwise it won't make sense.
You have to make sure your grid panel and your pagingtoolbar refer to the same store instance. A common config for that in a grid panel is:
.
this.dockedItems = [
{
xtype:'pagingtoolbar',
store:this.store, // same store GridPanel is using
dock:'bottom',
displayInfo:true
}
];

Sencha Touch - Error - JSON Recovery

I contact you because I'm in a deadlock.
I try to get data from a extern web service with "ScriptTag" but it does not work because the web service returns simple json format (No JSONP).
Do you know if there is a another way to retrieve json using sencha ?
var helloWorld = new Ext.Application({
Parking: Ext.regModel('Parking', {
fields:[
{name:'parkingName'},
{name:'latitude'},
{name:'longitude'},
{name:'mapUrl'}
],
}),
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'JSON Recovery'}],
tabBar: {
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{cls:'Page1', title:'Page1', html:'Page1'},
{
cls: 'list',
title: 'Page2',
xtype: 'list',
loadingText: 'Chargement',
itemTpl:'<div>{parkingName}</div>',
store: new Ext.data.Store({
autoLoad:true,
model: 'Parking',
proxy: {
type: 'scripttag',
url : 'http://walker.hotcity.lu/hotcity-central-server/webresources/parking/json?format-version=1_0&client-type=iPhone',
reader: {
type: 'json',
root: 'remoteObject'
},
}
}),
},
],
});
}
});
warning : Resource interpreted as Script but transferred with MIME type application/json.
error : Uncaught SyntaxError: Unexpected token :
Thank You.
Kevin.

What you are looking for is the Ajax Proxy. There are some examples in the docs about how to use it, and how to configure it. The default reader is JSON so as long as your model matches up with the information retrieved via JSON then you will be alright.
The other thing you should be aware of is that, JSONP can get around cross site scripting, but if you are not deploying to the walker.hotcity.lu domain, then the browser will not allow the request due to the same origin policy. The server will have to respond with the proper CORS headers to allow your app to access the data.