Part of My Item Model:
Ext.define('DnD.model.Item', {
extend: 'Ext.data.Model',
idProperty:'item_number',
associations: [{
type: 'belongsTo',
model: 'Company',
primaryKey: 'id',
foreignKey: 'company_id',
autoLoad: true
}],
proxy: {
type: 'ajax',
url: 'data/items.json',
reader: {
type: 'json',
root: 'items',
idProperty:'id'
}
},
fields: [{
name: 'id',
type: 'int'
},{
name: 'box_number',
type: 'float'
}, {
name: 'item_number',
type: 'float'
}, {
name: 'name',
type: 'string'
},{
name: 'format',
type: 'int'
}, {
name: 'company_id',
type: 'int'
}, {
...
The Company Model
Ext.define('DnD.model.Company', {
extend: 'Ext.data.Model',
associations: [{
type: 'hasMany',
model: 'Item',
primaryKey: 'id',
foreignKey: 'company_id',
autoLoad: true
}],
idProperty:'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}],
proxy: {
type: 'ajax',
url: 'data/companies.json',
reader: {
successProperty: true,
type: 'json',
root: 'companies',
idProperty:'id'
}
}
})
The app.js file
Ext.Loader.setConfig({
enabled: true,
paths: {
Ext: 'extjs/src',
My: 'app'
}
});
Ext.application({
name: 'DnD',
appFolder: 'app',
autoCreateViewport: false,
controllers: [
'Collections',
'Items'
],
launch: function() {
this.viewport = Ext.create('DnD.view.Viewport', {});
this.viewport.show();
}
});
The Problem
With the code the way it is now, whenever I make a new instance of the item model and attempt to call myItem.getCompany() the console throws an error telling me that the object I created has no such method.
Now, if I change the association to say that an Item belongs to DnD.model.Company (as opposed to just Company), a getter method is created, but it's called getDnD.model.Company() (as opposed to just getCompany()).
From what I can see, it appears that the autoloader can't find the model unless I mention the full path name. However, take a look at my Collection Controller:
Ext.define('DnD.controller.Collections', {
extend: 'Ext.app.Controller',
models: [
'Collection'
],
stores: [
'Collections',
],
views:[
'collection.List'
],
refs: [{
ref: 'collectionList',
selector: 'collectionlist'
}],
init: function() {
}
});
Notice I can reference the models, stores and views without using the full namespace.
Any guidance would be very appreciated.
BelongsTo association has config options "getterName" and "setterName", you can use them to define your own getter and setter method names. Example: {type: 'belongsTo', model: 'My.model.User', foreignKey: 'userId', getterName: 'getUser'}
http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.BelongsToAssociation
Related
I have a store with associated model and I need to include values of this associated model into selectfield component in Sencha Touch.
Here my parent model:
Ext.define('x.customer.model.CustomerModel', {
extend: 'Ext.data.Model',
requires:[
'x.customer.model.CustomerTemplateModel'
],
config: {
useCache: false,
idProperty: 'id',
fields: [
{
name: 'id',
type: 'string'
},
{
name: 'address',
type: 'string'
},
{
name: 'name',
type: 'string'
},
{
name: 'type',
type: 'int'
}
],
associations: [
{
type: 'hasMany',
associatedModel: 'Survey.customer.model.CustomerTemplateModel',
ownerModel: 'Survey.customer.model.CustomerModel',
associationKey: 'templates',
autoLoad: true,
name: 'templates'
}
]
}
});
and the children model:
Ext.define('x.customer.model.CustomerTemplateModel', {
extend: 'Ext.data.Model',
requires:[],
config: {
useCache: false,
rootProperty: 'templates',
fields: [
{
name: 'text',
type: 'string'
},
{
name: 'value',
type: 'string'
}
]
}
});
store:
requires: ['Survey.customer.model.CustomerModel'],
config: {
model: 'Survey.customer.model.CustomerModel',
proxy: {
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
}
Currently the json has this structure:
{
"id": "00000001",
"address": "Antsy Road",
"name": "asfas",
"phone": "55555",
"openSurveys": 7,
"templates": [
{
"text": "123",
"value": "Template 1"
}
],
"type": 1,
"withSurveys": true
},
how to implement data included in the "templates" nested json in a selectfield?
thank you in advance
Once your store loaded and if you have one custommer:
var templatesData = []; // What will be inserted to the ComboBox
for (var i=0; i < custommers[0].get('templates').length; i++) { // Running threw the values and populating templatesData
var templateModel = custommers[0].get('templates')[i];
var templateCombo = {
text: templateModel.data.text,
value: templateModel.data.value
};
templatesData.push(templateCombo);
}
// Setting the values to the combobox
Ext.getCmp('myCombo').setStore(Ext.create("Ext.data.Store", {
model: 'x.customer.model.CustomerTemplateModel',
data :templatesData
}));
This is not a unique solution, you could create a new instance of store as well. Here is more information about how setting the "store" property for a combobox : http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.ComboBox-cfg-store
I use belongsTo in an Ext.data.Model and it works like charm, thread.getCustomer(function(record) {[…]}) loads a customer:
Ext.define('MyApp.model.Thread', {
extend: 'MyApp.model.Base',
requires: [
'MyApp.model.Customer'
],
idProperty: 'thread_id',
fields: [
{name: 'thread_id', type: 'int'},
{name: 'thread_customer_id',type: 'int'},
],
belongsTo: {
model: 'MyApp.model.Customer',
name: 'Customer',
primaryKey: 'customer_id',
foreignKey: 'thread_customer_id'
}
});
However, I get a warning from Ext:
[W] Use of "belongsTo" is obsolete in MyApp.model.Thread
I tried to translate it to a reference in the field definition:
Ext.define('MyApp.model.Thread', {
extend: 'MyApp.model.Base',
requires: [
'MyApp.model.Customer'
],
idProperty: 'thread_id',
fields: [
{name: 'thread_id', type: 'int'},
{
name: 'thread_customer_id',
type: 'int',
reference: 'MyApp.model.Customer'
}
]
});
or
reference: {
type: 'MyApp.model.Customer',
role: 'customer',
association: 'Customer',
inverse: 'thread'
}
or
reference: {
type: 'Customer',
role: 'customer',
association: 'Customer',
inverse: 'thread'
}
does not work.
Nothing helpful found in
http://docs.sencha.com/extjs/5.0/core_concepts/data_package.html
or
http://docs.sencha.com/extjs/5.0/whats_new/5.0/extjs_upgrade_guide.html
Any of you had any luck with it?
I had exactly the same problem, this link helped me:
http://www.sencha.com/forum/showthread.php?285478-Nested-stores-associated-model-doesn%C2%B4t-contain-any-store
It gave me this:
Ext.define('MyApp.model.Base', {
extend: 'Ext.data.Model',
schema: {
namespace: 'MyApp.model'
}
});
Ext.define('MyApp.model.Application', {
extend: 'MyApp.model.Base',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'auto' },
{ name: 'desc', type: 'auto' }
]
});
Ext.define('MyApp.model.ApplicationVersion', {
extend: 'MyApp.model.Base',
fields: [
{ name: 'id', type: 'int' },
{
name: 'appid',
type: 'int',
reference: {
type: 'Application',
role: 'application',
inverse: 'versions'
}
},
{ name: 'version', type: 'auto' }
]
});
And now I have a one-to-many association which works:
> a = Ext.create(MyApp.model.Application, {desc: 'My description'})
constructor {data: Object, session: null, internalId: 30, …}
> a.versions().add({version: '2.5'})
[constructor]
> a.versions().first().application.get('desc')
"My description"
There are two model and connected stores: user and orders in frontend. There are two api calls in backend: getOrder(orderId), and getOrders().
In 'order store' I specified proxy settings for getOrders(). In 'order model' I specified proxy for getOrder(orderId).
When I call user's load method to get associated orders in this case uses model's proxy. Why not use proxy from store? Why it is not using.
P.S.: relation between user and order is descripted in backend and depends on authentication params of user.
User model code
Ext.define('Dev.models.User', {
extend: 'Ext.data.Model',
requires: ['Dev.stores.Orders'],
fields: [
//data
{name: "name", type: "string"},
{name: "userId", type: "string"}
],
proxy: {
type: 'ajax',
url: '/tcc/getmember',
idParam: 'memberId',
reader: {
type: 'json',
idProperty : 'memberId'
}
},
hasMany: {
model: 'Dev.models.Order',
name: 'orders',
storeConfig: {
type: 'orders',
filters: []
}
}
});
Order model code
Ext.define('Dev.models.Order', {
extend: 'Ext.data.Model',
idProperty : 'orderId',
fields: [
{name: "orderId", type: "string"},
{name: "title", type: "string"},
{name: "createMember", type: "string"}
],
proxy: {
type: 'ajax',
api: {
create: '/tcc/setorder',
read: '/tcc/getorder',
update: '/tcc/setorder',
destroy: '/tcc/deleteorder'
},
idParam : 'orderId',
reader: {
type: 'json',
idProperty : 'orderId'
}
},
belongsTo: {
model: "Dev.models.User",
name: 'user',
getterName: 'getUser',
foreignKey: 'userId',
primaryKey: 'createMember'
}
});
Order store code
Ext.define('Dev.stores.Orders', {
extend: 'Ext.data.Store',
model : 'Dev.models.Order',
alias: 'store.orders',
proxy : {
type : 'ajax',
api: {
create: '/tcc/setorder',
read: '/tcc/getorders',
update: '/tcc/setorder',
destroy: '/tcc/deleteorder'
},
reader : {
root: 'orders',
type : 'json',
idProperty : 'orderId'
}
}
});
Sample of usage
function doMemberOne(userId) {
Dev.models.User.load(userId, {
success: function(record, operation) {
console.log("User model was loaded successfully");
doOrders(record.orders());
},
failure: function(record, operation) {
console.log("User model was loaded unsuccessfully");
}
});
}
function doOrders(orderStore) {
orderStore.load({
callback: function(records, operation, success) {
if (success) {
console.log("Orders was loaded successfully");
} else {
console.log("Orders was loaded unsuccessfully");
}
}
});
}
Ext.onReady(function() {
Dev.Authentication.login("admin", "adminpass", "adminorg");
Dev.Authentication.on('login', function(resp) {
console.log("Login is successful.");
doMemberOne(resp.accountid);
});
});
I have defined a model type that represent an object with xtype 'image'. Now i'm trying to load this objects in Ext.Panel from JSON using ComponentLoader:
Ext.define('ItemModel', {
extend: 'Ext.data.Model',
idProperty: 'itemModel',
fields: [{
name: 'id',
type: 'int'
},{
name: 'xtype',
type: 'string'
},{
name: 'src',
type: 'string'
}]
});
var previews = Ext.create('Ext.Panel',{
layout: 'column',
height: 500,
items: {
loader:{
autoLoad : true,
url: 'php/read.php',
renderer: "component"
}
}
});
But i get such error:
TypeError: me.el is null
me.container = Ext.get(me.el.dom.parentNode);
JSON which returned by read.php looks just like this:
{"items":[{"id":0,"xtype":"image","src":"img\/newalbum.png"},{"id":1,"xtype":"image","src":"img\/newalbum1.png"}]}
But if i'm create a 'store' with 'reader', and trying iterate loaded objects, it's works fine:
Ext.define('ItemModel', {
extend: 'Ext.data.Model',
idProperty: 'itemModel',
fields: [{
name: 'id',
type: 'int'
},{
name: 'xtype',
type: 'string'
},{
name: 'src',
type: 'string'
}]
});
Ext.define('ItemModelStore', {
extend: 'Ext.data.Store',
model: 'ItemModel',
proxy: {
type: 'ajax',
url: 'php/read.php',
reader: {
type: 'json',
root: 'items'
}
}
});
var itemModelStore = Ext.create('ItemModelStore');
itemModelStore.load(function() {
itemModelStore.each(function(record){
alert(record.get('src'));
});
});
I thought I had defined a model for my store, but my console and also my application seem to disagree.
My code looks something like this:
Ext.define("Deeper", {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'someoneElsesID',
type: 'int'
}, {
name: 'anotherID',
type: 'int'
}],
belongsTo: 'Higher'
});
Ext.define("Higher", {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'status',
type: 'int'
}],
hasMany: {
model: 'Deeper',
name: 'deeper'
}
});
after that, I created the following store:
var store = Ext.create('Ext.data.Store', {
model: 'Higher',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'some/correct/url.json',
reader: {
type: 'json',
root: 'name'
}
}
});
My grid shows inline data correctly, so I tried console.debug(store)
The result is:
model: undefined
and
modelDefaults: null
So where did I go wrong?