I have problems to make an 1 to many model with Sencha Touch 2.
I want to save "persons" and add "todo's" to persons.
These values should be saved at the local storage.
So 1 person can have many todo's.
For this I have 2 models and 2 stores.
Personmodel:
Ext.define("app.model.PersonModel", {
extend: "Ext.data.Model",
config: {
idProperty: 'email',
fields: [
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' },
],
validations: [
{ type: 'presence', field: 'email' , message: 'Blabla'},
{ type: 'presence', field: 'name' , message: 'Blabla'},
{ type: 'email', field: 'email' , message: 'Blabla'},
]
}
});
TodoModel:
Ext.define("app.model.TodoModel", {
extend: 'Ext.data.Model',
config: {
idProperty: 'todoId',
fields: [
{ name: 'todoId', type: 'int' },
{ name: 'email', type: 'string' },
{ name: 'note', type: 'string' }
],
validations: [
{ type: 'presence', field: 'todoId', message: 'Blabla' },
{ type: 'presence', field: 'email', message: 'Blabla' },
{ type: 'presence', field: 'note', message: 'Blabla' }
]
}
});
PersonStore:
Ext.define("app.store.PersonStore", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
model: "app.model.PersonModel",
proxy: {
type: 'localstorage',
id: 'todo-app-personstore'
},
sorters: [{ property: 'name', direction: 'ASC'}],
grouper: {
sortProperty: "name",
direction: "ASC",
groupFn: function (record) {
}
}
}
});
TodoStore:
Ext.define("app.store.TodoStore", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
model: "app.model.TodoModel",
proxy: {
type: 'localstorage',
id: 'todo-app-todostore'
},
sorters: [{ property: 'email', direction: 'ASC'}],
grouper: {
sortProperty: "email",
direction: "ASC",
groupFn: function (record) {
}
}
}
});
I deleted the associations I made in the models because they didn't work at all.
Maybe relevant information: First I want to save a person. Later on I want to save todo's and connect them to a person.
Try Referring below links may helpful to you
http://miamicoder.com/2012/sencha-touch-2-models-hasmany-associations-php-example/
http://appointsolutions.com/2012/07/using-model-associations-in-sencha-touch-2-and-ext-js-4/
Related
I'm facing some diffculties loading specific data records frome local store into app's views.
The store looks like this:
Ext.define('xyz.store.UserDataStore', { extend: 'Ext.data.Store',
requires: [ 'xyz.model.user' ],
config: {
autoLoad: true,
autoSync: true,
model: 'xyz.model.user',
storeId: 'myStore',
proxy: { type: 'localstorage', id: 'id' } } });
The model looks like this:
Ext.define('xyz.model.user', { extend: 'Ext.data.Model',
config: { fields: [ { name: 'token', type: 'string' }, { name: 'title' }, { name: 'login' }, { name: 'facebookId' }, { name: 'firstName', type: 'string' }, { name: 'lastName', type: 'string' }, { name: 'nationality', type: 'string' }, { name: 'birthDay', type: 'string' }, { name: 'phone' }, { name: 'mobile' }, { name: 'street' }, { name: 'city', type: 'string' }, { name: 'zipCode', type: 'int' }, { name: 'willingToTravel' }, { name: 'pictureUrl' }, { name: 'eMail' }, { name: 'publicList' } ] } });
Thank you in advance,
Sabine
i want to ask you if extjs comboboxes use filtered stores. I have a table with different kind of business(so it has a "type" field). I have a view with multiple comboboxes, and i want that those works with stores that use the same model, but with different filters. So when i put them to work, it doesn't work.
This is one of the filtered stores:
Ext.define('myapp.store.ListaAerolineas', {
extend: 'Ext.data.Store',
requires: [
'myapp.model.Empresa'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'myapp.model.Empresa',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://myapp.localhost/empresa/listar/',
reader: {
type: 'json',
root: 'listaempresa'
}
},
filters: {
property: 'IdTipo',
value: 5
}
}, cfg)]);
}
});
This is the model:
Ext.define('myapp.model.Empresa', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{
name: 'Id',
type: 'int'
},
{
name: 'Nombre',
type: 'string'
},
{
name: 'Direccion',
type: 'string'
},
{
name: 'Telefono',
type: 'string'
},
{
name: 'Contacto',
type: 'string'
},
{
name: 'Celular',
type: 'string'
},
{
name: 'TipoEmpresa',
type: 'string'
},
{
name: 'Estado',
type: 'string'
},
{
name: 'FechaCreacion',
type: 'date'
},
{
name: 'IdTipo',
type: 'int'
},
{
name: 'IdEstado',
type: 'int'
}
]
});
And finally this is my grid column definition for my combobox:
{
xtype: 'gridcolumn',
dataIndex: 'Aerolinea',
text: 'Aerolinea',
editor: {
xtype: 'combobox',
id: 'cmbGridListaEmbarquesAerolinea',
store: 'ListaAerolineas'
}
So, i must do anything? Thank you in advance...
What version of ExtJs are you using? but in general combobox will display only records that are filtered in the store. So, to answer your question - yes, it should work.
My user has many exams.
User:
Ext.define('Tm.model.User', {
extend: 'Ext.data.Model',
config: {
hasMany: { model: 'Tm.model.Exam', name: 'exams' },
fields: [
{ name: 'id', type: 'int' },
{ name: 'username', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'nameFirst', type: 'string' },
{ name: 'nameLast', type: 'string' }
],
...
}
});
Exam:
Ext.define('Tm.model.Exam', {
extend: 'Ext.data.Model',
config: {
belongsTo: 'Tm.model.User',
fields: [
{ name: 'id', type: 'int', defaultValue: null },
{ name: 'title', type: 'string', defaultValue: 'Exam' }
],
...
}
});
Calling var exams = user.exams(); gives me: Uncaught TypeError: Object [object Object] has no method 'exams'
You must require your associated model for the getter to be generated.
So add this to the definition of Tm.model.User:
requires: ['Tm.model.Exam']
My User has the following config:
identifier: 'uuid',
proxy: {
type: 'localstorage',
id: 'tm-user'
}
But in my localstorage the following is shown:
Why is the id added to the tm-user key everytime I save the user profile?
I only overwrite the user everytime if that helps?
// create user
var user = Tm.model.User.create({
id: response[0].id,
...
});
user.save();
EDIT: full model requested:
Ext.define('Tm.model.User', {
extend: 'Ext.data.Model',
config: {
hasMany: { model: 'Tm.model.Exam', name: 'exams', autoLoad: true },
fields: [
{ name: 'id', type: 'int' },
{ name: 'username', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'nameFirst', type: 'string' },
{ name: 'nameLast', type: 'string' },
{ name: 'syncedAt', type: 'date', defaultValue: null }
],
validations: [
{ field: 'id', type: 'presence' },
{ field: 'username', type: 'presence' },
{ field: 'syncedAt', type: 'presence' },
{ field: 'email', type: 'presence' },
{ field: 'email', type: 'email' },
{ field: 'username', type: 'length', min: 3 }
],
identifier: 'uuid',
proxy: {
type: 'localstorage',
id: 'tm-user'
}
}
});
Change the following (if you're using UUID type should be string, not int.
{ name: 'id', type: 'string' }
And change identifier definition like:
identifier: {
type: 'uuid',
isUnique: true
}
Update
Since you're receiving Ids from the server and they are not UUIDs you might try the following. Change identifier configuration to this:
identifier: {
type: 'sequential',
isUnique: true
}
and of course type of id should be int in this case. If that doesn't work however I would recommend still use first approach (using uuid) but store id you're receiving from the server in some different field (item_number for example) and let ST handle unique UUID field.
I have my model as this:
Ext.define("NotesApp.model.Note", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'dateCreated', type: 'date', dateFormat: 'c' },
{ name: 'question', type: 'string' },
{ name: 'answer', type: 'string' },
{ name: 'type', type: 'int'},
{ name: 'author', type: 'int'}
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'dateCreated' },
{ type: 'presence', field: 'question', message: 'Please enter a question for this card.' }
]
}
});
and my server page (qa.php) outputs this:
{"results":[{"id":"1","dateCreated":"2012-05-01","question":"asdf?","answer":"fdsa","type":"0","author":"0"},{"id":"2","dateCreated":"2012-05-01","question":"qwer?","answer":"rewq","type":"0","author":"0"}]}
and this is my code in the store:
Ext.define("NotesApp.store.Online", {
extend: "Ext.data.Store",
config: {
model: 'NotesApp.model.Note',
storeId: 'Online',
proxy: {
type: 'jsonp',
url: 'http://xxxxxxxx.com/qa.php',
reader: {
type: 'json',
rootProperty: 'results'
}
},
autoLoad: false,
listeners: {
load: function() {
console.log("updating");
Ext.getStore('Notes').getProxy().clear();
console.log("updating1");
// Loop through records and fill the offline store
this.each(function(record) {
console.log("updating2");
Ext.getStore('Notes').add(record.data);
});
// Sync the offline store
Ext.getStore('Notes').sync();
console.log("updating3");
// Remove data from online store
this.removeAll();
console.log("updated");
}
},
fields: [
{
name: 'id'
},
{
name: 'dateCreated'
},
{
name: 'question'
},
{
name: 'answer'
},
{
name: 'type'
},
{
name: 'author'
}
]
}
});
But when I called Ext.getStore('Online').load(), the console showed "updating", "updating1", and "updating3" but not any "updating2", ie. no records were found. I wonder where the mistake is? Is there a way to output the jsonstring that's read in?
This is a different scope
listeners: {
load: function() {
console.log("updating");
Ext.getStore('Notes').getProxy().clear();
console.log("updating1");
// Loop through records and fill the offline store
this.each(function(record) {
console.log("updating2");
Ext.getStore('Notes').add(record.data);
});
// Sync the offline store
Ext.getStore('Notes').sync();
console.log("updating3");
// Remove data from online store
this.removeAll();
console.log("updated");
},
this//adds scope
or
listeners: {
load: function(store,record,options) {
console.log("updating");
Ext.getStore('Notes').getProxy().clear();
console.log("updating1");
// Loop through records and fill the offline store
store.each(function(record) {
console.log("record"); //wahei records!
Ext.getStore('Notes').add(record.data);
});
// Sync the offline store
Ext.getStore('Notes').sync();
console.log("updating3");
// Remove data from online store
this.removeAll();
console.log("updated");
}