Develop Reference

ExtJs: How to show viewmodel after store load

I need that my viewmodel MainModel appears after store 'OrgStore' load.
Now I have next App.js:
Ext.application({
name: 'BillWebApp',
extend: 'BillWebApp.Application',
stores: ['OrgStore'],
requires: [
'BillWebApp.view.main.Main'
],
launch: function () {
var store = Ext.getStore('OrgStore');
store.on('load', function() {
BillWebApp.getApplication().setMainView('main.Main');
});
},
...
OrgStore:
Ext.define('BillWebApp.store.OrgStore', {
extend: 'Ext.data.Store',
alias : 'store.orgstore',
storeId: 'OrgStore',
model: 'BillWebApp.model.Org',
config:{
autoLoad: true,
autoSync: true
},
proxy: {
autoSave: false,
type: 'ajax',
api: {
create : '',
read : '/base/getOrgAll',
update : '',
destroy : ''
},
reader: {
type: 'json'
}
}, listeners: {
load: function() {
console.log("OrgStore loaded!");
}
}
});
MainModel:
Ext.define('BillWebApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'BillWebApp',
},
stores: {
orgstore: {
type: 'orgstore'
}
}
});
Why I in log window see message "OrgStore loaded!" twice?
One after 'OrgStore' loaded, and next one after MainModel started?
I think I invoke two instances of 'OrgStore'....
How can I change my code to show MainModel after store fully load?

ExtJs 4 Proxy Writer and PHP $_POST

I have this store:
Ext.define('strMtoOrganismos', {
extend: 'Ext.data.Store',
model: 'mdlMtoOrganismos',
autoLoad: false,
pageSize: 20,
proxy: {
type: 'ajax',
api: {
read: 'some php url',
update: 'some php url'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
},
writer: {
type: 'json',
root: 'data',
encode: true,
writeAllFields: false,
}
}
});
In my controller I have a button that sync the store:
onPulsarGuardar:function(){
Ext.getStore('strMtoOrganismos').sync();
}
And in my php file,printing $_POST[data] I receive for example:
{"codigo_erp_cliente":"243","id":2}
How can I convert this string to an array like:
[codigo_erp_cliente]=>243
[id]=>2
Or an alternative configuration to the store writer?

Extjs not loading data from store

I'm learning extJS and trying to create simple application following this and that guides.
My app.js file:
sstore = new Ext.data.Store({
autoLoad: true,
fields: ['firstName', 'lastName', 'educationId', 'townId'],
proxy: {
type: "ajax",
url: "data",
reader: {
type:"json",
root: "users"
}
}
});
Ext.application({
name: 'Application',
autoCreateViewport: true,
controllers: ['MainController']
});
Viewport.js:
Ext.define('Application.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: { type: "vbox", align: 'stretch' },
items : [{
xtype: 'mainList',
autoScroll: true
}]
});
List.js:
Ext.define('Application.view.List', {
extend: 'Ext.grid.Panel',
alias : 'widget.mainList',
title : 'Users',
store: sstore, // ***** LOOK HERE PLEASE *****
//store: 'Users',
columns: [
{ header: 'Имя', dataIndex: 'firstName' },
{ header: 'Фамилия', dataIndex: 'lastName' },
{ header: 'Образование', dataIndex: 'educationId'},
{ header: 'Город', dataIndex: 'townId'}
]
});
Store (Users.js) :
Ext.define('Application.store.Users', {
extend: 'Ext.data.Store',
storeId: 'usersStore',
//model: 'Application.model.User',
fields: ['firstName', 'lastName', 'educationId', 'townId'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data',
reader: {
type: 'json',
root: 'users'
}
},
onProxyLoad: function (aOperation) {
console.log('From store');
console.log(aOperation);
}
});
When I'm changing store: sstore on store: 'Users' in my List.js file, it's not loading any data, but with store created in app.js file, which lives in sstore variable, it works ok.
What I tried and it didn't help:
using memory proxy,
used store: Ext.data.StoreManager.lookup('usersStore'),
it's not problem with backend data (because sstore works fine)
I can see that the store from Users.js is loading (because the console output from onProxyLoad function).
This is what I see in a browser:
Full js app lives here
My view file is here
And I'm using extJS 4.2

This was really stupid. Problem was in onProxyLoad function. When I deleted it from store app worked as I expected.

ExtJS Record with auto id Property

i have following problem with my ExtJS 5.1.0 Store.
When i want to create a new empty model with var m = new (store.model)(); and set Values with record.set(values); ( Which come from a Ext.form.Panel) the record has next to the normal Id, a second id. The Second one looks like that: "AM.namespace.model.ServiceContract-2".
Is it able to prevent a auto generated id?
To Create I use:
onAddServiceContract: function (item) {
this.__form = item.up('form');
var values = this.__form.getValues();
var store = this.getStore('ServiceContract');
var record = new (store.model)();
record.set('Id', 0000);
record.set(values);
record.phantom = true;
var rec = store.add(record);
}
The Store is defined as:
Ext.define('AM.####.store.ServiceContract',{
extend: 'AM.####.data.Store',
requires: ['Ext.data.proxy.Direct'],
model: 'AM.####.model.ServiceContract',
remoteGroup: true,
autoLoad: true,
//buffered: true,
pageSize: 1000,
leadingBufferZone: 500,
trailingBufferZone: 500,
autoSync: true,
constructor: function (config) {
config = Ext.apply({}, config);
if (!config.proxy) {
var proxy = {
type: 'direct',
reader: {
idProperty: 'Id',
rootProperty: 'data',
type: 'json'
},
writer: {
allowSingle: true,
writeAllFields: false // Note: Changed in ExtJS 5 to be default false
},
api: {
read: AM.####.ServiceContract.List,
create: AM.####.ServiceContract.Create,
update: AM.####.ServiceContract.BulkUpdate,
destroy: AM.####.ServiceContract.BulkDelete
}
};
config.proxy = proxy;
}
this.callParent([config]);
this.proxy.on('exception', this.onProxyException, this);
}
});
Thanks for your help!

You can mod the idProperty of the model to some other name.
For instance:
Ext.define('App.model.rssSoaFeed_m', {
extend: 'Ext.data.Model',
idProperty:'extIdProperty',//renaming the extjs id property
fields: [
{ name: 'title', type: 'auto' },
{ name: 'id', type: 'auto' }, //my custom id property
],
proxy:
{
type: 'ajax',
url: '/someurl.service',
extraParams: {
},
reader: {
type: 'json',
root: 'query.results.item'
}
}
});
And here is more info in sencha docs
Also, please note from the docs
the idProperty may be configured as null which will mean that no identifying field will be generated.

Sencha Touch: load store for List using Rest Proxy

I'm new to sencha so I'm sure I'm just missing something simple here. I have a rest service and I need to be able to load my store for my list view.
Here's my model with the proxy:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'UserId', type: 'int' },
{ name: 'FullName', type: 'string' }
],
proxy: {
type: 'rest',
url: '/rest/user',
reader: {
type: 'json',
root: 'user'
}
}
}
});
And this code works fine for a GET request. So I know that I'm able to talk with my rest service.
var User = Ext.ModelMgr.getModel('UserModel');
User.load(10058, {
success: function (user) {
console.log("Loaded user: " + user.get('UserId') + ", FullName: " + user.get('FullName'));
}
});
My problem is that I'm unable to load data into my list view when adding the proxy code to the store. How do I pass in a parameter to the rest service and load the store?
Ext.define('UserStore', {
extend: 'Ext.data.Store',
config: {
model: 'UserModel',
proxy: {
type: 'rest',
url: '/rest/user',
reader: {
type: 'json',
root: 'user'
},
autoLoad: true
},
sorters: 'FullName',
grouper: function(record) {
return record.get('FullName')[0];
}
}
});
And here's my list view:
Ext.define('UserView', {
extend: 'Ext.List',
xtype: 'userView',
config: {
scrollable: 'vertical',
loadingText: "Loading your social connections . . .",
indexBar: true,
singleSelect: true,
grouped: true,
cls: 'customGroupListHeader',
itemTpl: '{FullName}',
store: 'UserStore',
onItemDisclosure: true
}
});

Haha! I knew it was something simple. The "autoLoad: true" in the store's proxy needs to be outside of the proxy's brackets.
Ext.define('UserStore', {
extend: 'Ext.data.Store',
config: {
model: 'UserModel',
autoLoad: true,