According to the docs, I should be able to define functions on a Model, and then call the function on instances of that model.
At least in the case where I load the model from a proxy, its not working.
My model:
Ext.define('MyApp.model.Detail', {
extend: 'Ext.data.Model',
fields: [
'someField',
'anotherField',
],
someFunction: function() {
//do something
},
proxy: {
type: 'ajax',
url: 'http://example.com/details',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success',
}
},
});
Store:
Ext.define('MyApp.store.DetailStore', {
extend: 'Ext.data.Store',
storeId: 'detailStore',
model: 'MyApp.model.Detail',
});
Controller:
Ext.define('MyApp.controller.appController', {
extend: 'Ext.app.Controller',
init: function() {
this.getDetailStoreStore().addListener('load', this.newDetails, this);
},
stores: ['DetailStore'],
models: ['Detail'],
views : ['DetailView], //exists, not copied into question
newDetails: function(store, records) {
var details = records[0].data;
details.someFunction(); // Uncaught TypeError: Object #<Object> has no method 'someFunction'
}
});
The error happens in the newDetails function, when calling data.someFunction().
Do I have the wrong expectation?
The function exists on the model, so you would call:
records[0].someFunction();
Related
I am new for this platform, Now i am unable to set dyanimic url using category id and token.
What i want:
I have list different items, which have different ids but same token, token(tokent is same one user) getting from login phase. I want to get value accorading to category id from the server.
Here is the my model:
Ext.define('MyApp.model.CategoryDisplayModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category',
'name',
],
belongsTo: "MyApp.model.CategoryDisplayModel"
}
});
and another related model is:
Ext.define('MyApp.model.CategoryDisplayModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryDisplayModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name:'name'},
{name: 'category'},
{name: 'author'},
],
}
});
What i am set in store, but could not work:
Ext.define('MyApp.store.CategoryValueStore', {
extend: 'Ext.data.Store',
alias: 'store.CategoryValueStore',
requires: [
'MyApp.model.CategoryDisplayModel'
],
config: {
model: 'MyApp.model.CategoryDisplayModel',
storeId: 'categoriesvaluestore',
proxy: {
type: 'rest',
url: 'http://horror/myapp/api/word/searched_words/catID/'+ 1+'/'+ SDSILLYTOKEN+'/'+650773253e7f157a93c53d47a866204dedc7c363,
noCache: false,
reader: {
type: 'json',
rootProperty: ''
} } }
});
How to set above url, dynamic, cat id and token may be differnt.
But it works when i set these in store
Ext.define('MyApp.store.ArchitectureDisplayStore',{
extend: 'Ext.data.Store',
requires:[
'MyApp.view.Main'
],
config:
{
model: 'MyApp.model.CategoryDisplayModel',
autoLoad:true,
id:'Category',
proxy:
{
type: 'ajax',
url : 'http://horror/myapp/api/word/searched_words/catID/1/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363', // file containing json data
reader:
{
rootProperty:''
} } }
});
In View , I set getting value on list like this:
Ext.define("MyApp.view.ArchitectureDisplayMain", {
extend: 'Ext.Container',
alias: "widget.architecturewords",
config: {
{
xtype: 'list',
scrollable: true,
itemId: 'demolist',
itemTpl: [
'<div><tpl for="data"><ul class="catList">{name} -test- {category}</ul> <ul>{author}</ul></tpl></div>'
],
store: 'categoriesvaluestore',
}
}
});
My category display model:
Ext.define('MyApp.model.CategoryModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
'cat_id',
'category_name',
],
belongsTo: "MyApp.model.CategoryModel"
}
});
and
Ext.define('MyApp.model.CategoryModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'cat_id'},
{name: 'category_name'},
],
}
});
EDIT:
Ext.define('MyApp.view.Category', {
extend: 'Ext.List',
alias: "widget.category",
config: {
title: 'Stores',
cls: 'category-data',
scrollable: false,
store: 'CategoryStore',
itemTpl: [
'<div class="categoryListings">',
'<tpl for="data">',
'<span onClick="catOption({cat_id})">{category_name}</span> ',
'</tpl>',
'</div>',
].join('')
}
//}
});
function catOption(id){
console.log("ID--"+id);
var tokan= '650773253e7f157a93c53d47a866204dedc7c363';
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add([
{ xtype: 'wordsview' }
]);
} and others
In wordsview, I like to display respective words of clicked category.
It is ok, when click this, first item of id p1, it shows next view.
Please tell me, How to get dynamic data accorading to its category id and token. please give some solution.Thank you advance.
If i understood you correctly
Let's say if you have category id and token in localStorage.
You can do like this
proxy:
{
type: 'ajax',
url : 'http://horror/myapp/api/word/searched_words/catID/'+localStorage.catId+'/SDSILLYTOKEN/'+localStorage.token,
reader:{
rootProperty:''
}
}
OR
Do as #Alex posted. That is better way.. Like
function catOption(id){
console.log("ID--"+id);
var token= '650773253e7f157a93c53d47a866204dedc7c363';
var url = 'http://horror/myapp/api/word/searched_words/catID/'+id+'/SDSILLYTOKEN/'+token;
Ext.getStore("categoriesvaluestore").getProxy().setUrl(url);
Ext.getStore("categoriesvaluestore").load();
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add({ xtype: 'wordsview' });
}
When accessing your Store from your View or anywhere else, you can dinamically change the Url this way:
var stProxy = Ext.StoreMgr.get("myStore").getProxy();
stProxy.setUrl("http://the.new.url");
Ext.StoreMgr.set("myStore").setProxy(stProxy);
--
The particular problem in your scenario is that you may have to populate your list manually. If you want a List to include the result of calling the same Store with different URLs, I suggest to build a new local Store loading the content of all iterations. Then make the List "store" property be this global Store.
I've created a model with following structure:
Model Code:
Ext.define('MyApp.model.FavoriteScreen', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'Name'
},
{
name: 'ScreenId'
}
]
}
});
And I've created a store with following structure:
Store code:
Ext.define('MyApp.store.FavoriteStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.FavoriteScreen'
],
config: {
autoLoad: true,
model: 'MyApp.model.FavoriteScreen',
storeId: 'FavStore',
proxy: {
type: 'ajax',
api: {
read: '/api/sample/FavoriteList'
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});
Now I want to get particular record from this store but my store does not return any value. To get value from store I've written following line of code:
var myStore = Ext.getStore('FavStore');
myStore.load({
scope: this,
callback: function (records, operation, success) {
if (success) {
Ext.Msg.alert(myStore.getAt(0).getData());
}
}
});
The above code I've written on The above code I’ve written on nestedlistleafitemtap event.
Any help is appreciated!!
First of all - don't use getData() - use get('name') for example.
Second - try to add logging before your loading call and inside your callback function. This way you can see whether you started loading and was it completed.
How to add a data to a json store if my data is coming from a back end AJAX call.
my store is as follows .
Ext.define('MyApp.store.GeographyMasterStore', { extend: 'Ext.data.Store',
requires: [
'MyApp.model.GeographyMasterModel'
],
config: {
model: 'MyApp.model.GeographyMasterModel',
storeId: 'geographyMasterStore',
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
}
}
});
And my model is as follows:
Ext.define('MyApp.model.GeographyMasterModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'Code'
},
{
name: 'Description'
},
{
name: 'Level_Code',
mapping: 'Level Code'
},
{
name: 'Name'
}
]
}
});
If I add the data like this
var geographyMasterStore = Ext.getStore('geographyMasterStore');
geographyMasterStore.add(<data from backend AJAX call>);
it does not show me the mapped field i.e. Level_Code
Usually I when add a record to the store like this :
Ext.create('App.model.MyModel', JSON.parse(response.responseText);
Where response is the response from an Ext.Ajax.request
Hope this helps
You need create a model:
var record = Ext.create('model.GeographyMasterModel', Ext.JSON.decode(response.responseText));
save the model:
record.save()
reload the store:
geographyMasterStore.load()
I have a global variable which needs to be initialized when the store is loaded and needs to use that value in another store as follows
var cp = 0;
Ext.onReady(function() {
Ext.define('Init', {
singleton: true,
cp: 0
});
Ext.define('loggedUserList', {
extend: 'Ext.data.Model',
fields: [
'id',
'name'
]
});
loggedUser = Ext.create('Ext.data.Store', {
model: 'loggedUserList',
autoLoad: true,
proxy: {
type: 'ajax',
url: url+'/lochweb/loch/users/getLoggedUser',
reader: {
type: 'json',
root: 'provider'
},
listeners: {
load: function(loggedUser) {
Init.cp = loggedUser.getAt(0).data.id;
}
}
});
});
I am using the value of cp in another url as follows: url: url + '/lochweb/loch/vocabulary/getVocabularyByProvider?providerId=' + Init.cp,
Ext.define('vocbList', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
mapping: 'id'
},
{
name: 'code',
mapping: 'code'
}
]
});
var vocabulary = Ext.create('Ext.data.Store', {
model: 'vocbList',
autoLoad: true,
proxy: {
type: 'ajax',
url: url+'/lochweb/loch/vocabulary/getVocabularyByProvider?providerId='+Init.cp,
reader: {
type: 'json',
root: 'Vocabulary'
}
}
});
but its value is still 0. I tried using(cp, Init.cp). How to assign its value form store so that it can be reused?
Thanks
Store loads data asynchronously, so you can't be sure that Init.cp will be initialized with a new value before the other store is been loaded.
Try with this:
var cp=0;
Ext.onReady(function(){
Ext.define('Init', {
singleton: true,
cp: 0
});
Ext.define('vocbList', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', mapping: 'id' },
{ name: 'code', mapping: 'code' }
]
});
var vocabulary = Ext.create('Ext.data.Store', {
model: 'vocbList',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'Vocabulary'
}
}
Ext.define('loggedUserList', {
extend: 'Ext.data.Model',
fields: ['id','name']
});
loggedUser = Ext.create('Ext.data.Store', {
model: 'loggedUserList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getLoggedUser',
reader: {
type: 'json',
root: 'provider'
}
},
listeners: {
load:function(loggedUser){
Init.cp = loggedUser.getAt(0).data.id;
vocabulary.getProxy().url = url+'/lochweb/loch/vocabulary/getVocabularyByProvider?providerId='+Init.cp;
vocabulary.load();
}
}
});
});
As you can see, you have to set the url of the vocabulary proxy dynamically when the first store is just loaded and then load the store.
Cyaz
Here you declare loggedUser = Ext.create('Ext.data.Store', {
model: 'loggedUserList',
autoLoad: true,...} with Init.cp is assigned with some data in load(). But you cannot confirm that Init.cp has actually had value at the time you declare variable vocabulary (i.e. maybe loggedUser has not yet fully been loaded). So it still be 0 in the url.
To confirm, you should move codes of vocbList and vocabulary into a function:
function vocabularyLoad() {
Ext.define('vocbList', {...});
var vocabulary = ...
}
and use the function this way in loggedUser:
loggedUser = Ext.create('Ext.data.Store', {
...
listeners: {
load:function(loggedUser){
Init.cp = loggedUser.getAt(0).data.id;
vocabularyLoad();
}
}
});
But actually, this refactoring makes the assignment of Init.cp redundant because you can directly pass the value of loggedUser.getAt(0).data.id into the defined function.
I have a model Banner and a model BannerFormat. A banner has a banner format. To configure a hasOne relationship between banner and banner format, i wrote this :
Ext.define('admin.model.Banner', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'banner_format_id', type: 'int' },
'code',
'active',
'start_at',
'end_at'
],
associations: { type: 'hasOne', model: 'admin.model.BannerFormat', getterName: 'getBannerFormat' },
proxy: {
type: 'ajax',
url: '/admin/api_query.php',
extraParams: {
table: 'content_banners',
type: 'GET'
}
}
}
});
And in my bannerFormat model:
Ext.define('admin.model.BannerFormat', {
extend: 'Ext.data.Model',
config: {
fields: ['id', 'format'],
associations: { type: 'hasMany', model: 'admin.model.Banner' },
proxy: {
type: 'ajax',
url: '/admin/api_query.php',
extraParams: {
table: 'content_banner_formats',
type: 'GET'
}
}
}
});
But when i call banner.getBannerFormat(), i got :
Uncaught TypeError: Object [object Object] has no method 'getBannerFormat'
What did i go wrong?
Are you creating a banner object and then making the call on it to retrieve the defined associations?
This should work for you:
var banner = Ext.create('admin.model.Banner', {
id: 100,
banner_format_id: 20,
code: 'ABC123',
active: true,
start_at: 1,
end_at: 5
});
banner.getBannerFormat();
Also, you don't need to specify a getterName for the association if you don't want. Sencha will auto-generate a getter function for the association, which follows the format: 'getModelName'. If you removed the getterName from your association, the getter function on the banner model would be the same as what you defined it as: 'getBannerFormat';