I'm getting an error like I added below while using static data with memory proxy.
Can someone show me my mistake or missing part?
Thanks in advance.
me.model is undefined
me.setProxy(me.proxy || me.model.getProxy());
My model definition:
Ext.define(appName + '.model.Country', { extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'},
{type: 'string', name: 'slogan'}
]
});
And here's my store definition:
// The data for all states
var data = {
states : [
{'abbr':'AL','name':'Alabama','slogan':'The Heart of Dixie'},
{'abbr':'AK','name':'Alaska','slogan':'The Land of the Midnight Sun'}
]
};
Ext.define(appName + '.store.Countries', {
extend : 'Ext.data.Store',
model : appName + '.model.Country',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'states'
}
}
});
You might want to check if the model file is actually loaded and available for usage. When dealing with a large number of files, ExtJS (I have encountered this while working with 4.2.1) has problems with ordering them.
A quick fix is using requires: in the application definition:
Ext.application({
name: 'APP',
appFolder: 'application',
controllers: [
...
],
requires: ['APP.model.examples', 'APP.model.other' ...],
...
});
If this helps, I have written more on a PHP solution here:
Solution for ExtJS 4 me.model is undefined error
Did you try to create the store explicitly and specify it in the config of the container?
For example:
var store = Ext.create(appName + '.store.Countries');
Ext.create('Your Component', {
...
store: store,
...
});
Related
demoAlerts({
itemstatus: [
{
item: "1",
name: "apple",
type: "fruit"
},
{
item: "2",
name: "pine",
type: "fruit"
}
],
deliverystatus: [
{
name: "james",
status: "yes"
},
{
name: "thomas",
status: "no"
},
]
});
I have two array (itemstatus and deliverystatus), I need to create the model for this store. what I tried is
ParentModel:
Ext.define('test.model.ParentModel', {
extend: 'Ext.data.Model',
requires:['test.model.ItemModel','test.model.DeliveryModel'],
autoLoad: true,
config : {
fields : [ 'itemstatus', {
name : 'demostatuslist',
model : 'demoAlerts.model.ItemModel',
mapping : 'itemstatus'
},
'portalstatus', {
name : 'deliverystatus',
model : 'test.model.DeliveryModel',
mapping : ' deliverystatus'
}]
}
});
ItemModel
Ext.define('demoAlerts.model.ItemModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'item', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' }
]
}
});
DeliveryModel
Ext.define('demoAlerts.model.DeliveryModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'name', type: 'string' },
{ name: 'status', type: 'string' },
]
}
});
Whether i properly configured the model. I am receiving the store as empty
Use Associations :) http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.association.Association
In this case I would have a Model with 2 hasMany associations like this:
Ext.define('demoAlerts.model.ContainerModel', {
extend : 'Ext.data.Model',
requires : [
'demoAlerts.model.DeliveryModel',
'demoAlerts.model.ItemModel'
],
config : {
associations: [
{
type : 'hasMany',
model : 'demoAlerts.model.DeliveryModel',
associationKey : 'deliveryStatus',
name : 'deliveryStatus',
autoLoad : true // this is very important
},
{
type : 'hasMany',
model : 'demoAlerts.model.ItemModel',
associationKey : 'itemStatus',
name : 'itemStatus',
autoLoad : true // this is very important
}
]
}
});
Then use a store SomeStore binded to ContainerModel.
IMPORTANT Each record in SomeStore will have deliveryStatusStore and itemStatusStore AUTOGENERATED.
Read about associations.
Neither http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.Field
nor http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.field.Field
knows a valid config option "model" for a field.
As far as I know, there is no such thing as a "Parent Model" available in ExtJS or Sencha Touch.
As far as I know, there is no possibility to have two stores in one.
You can load two (or more) stores using only one call to the server like in my following example:
firststore.on('load',function() {
secondstore.loadRawData(firststore.getProxy().getReader().rawData);
});
firststore.load()
Where you would give firststore the server url and the root of the data that goes into the first store, and secondstore will have the root of the data that goes into the second store.
Please be aware that the second store won't be filled if zero records go into the first store, and choose your stores appropriately.
If any of your stores can be the only empty store, perhaps you will have to get the rawdata via Ext.data.Request and load it into all stores afterwards.
How can I add two different sets of data from the same store to be reflected in any two UI elements at the same time?
This is my store:
Ext.define('CPC.store.Website.StatisticChartByDate', {
extend: 'Ext.data.Store',
fields: [
'click',
'click2',
'ctr',
'true_ctr',
'ctr2',
'true_ctr2',
'click_fraud',
'click_fraud2',
...
],
proxy: {
type: 'ajax',
url: '/***/***/get-statistic-chart',
extraParams: {typeCP: Ext.util.Cookies.get('typeCP')},
reader: {
type: 'json',
root: 'data.chart',
statistic: 'data.statistic'
}
},
listeners:{
load:function (store, records) {
}
}
});
This is my json data:
{
"data":{
'statistic': {...}
'chart' : {...}
}
}
Image:https://www.dropbox.com/s/3zyxkzu5ky77710/statistic.png
please, help me..!
Many thanks..!
In my application, I have one store and I needed to swap out the proxy calls. I found this solution on StackOverflow, thanks to Saki:
flGridStore.getProxy().url = '../include/db_searchfilesbydate.php'; //<--Saki magic :)
Below, you will see that I'm getting a JavaScript exception with an MVC view I created in an Sencha ExtJS MVC application. I have another MVC view that extends 'Ext.tree.Panel' that reads a simple JSON object instead of pulling the data via an Ext.Direct proxy and .NET server-side stack, but the only thing that's different is the proxy implementation and of course our MVC controller logic. In the static (JSON) implementation, our proxy is defined in the model. In the dynamic (Ext.Direct) implementation, our proxy is defined in the store. The TreeStructures.js (store) JavaScript file keeps being requested an infinite amount of times until the browser crashes. See below for that exception.
I highly doubt this is an Ext.Direct issue because I have other stores working great with this architecture. I see the [Ext.Loader] exception, but I'm not sure why that one keeps repeating with every new TreeStructures.js request. Or where to implement that requires. My understanding is that the app.js defines the controllers. The controller then defines the models an stores. And the Viewport defines and instantiates other MVC views. My "other views" being the tree views. And the view implements the store.
Also, the Sencha Cmd "sencha app build" command is not working. Normally my application compiles without any issues, so something is definitely missing in the store or MVC configuration that's necessary for this dynamic tree.
Exception in JavaScript Console:
[Ext.Loader] Synchronously loading 'MyApp.store.TreeStructures'; consider adding Ext.require('MyApp.store.TreeStructures') above Ext.onReady
Browser crashes with this JavaScript Exception:
Note: The TreeStructures.js (store) JavaScript file keeps being requested an infinite amount of times until the browser crashes with this:
Uncaught RangeError: Maximum call stack size exceeded
Sencha Cmd errors (after calling the "sencha app build" command):
[ERR] failed to find meta class definition for name MyApp.store.TreeStructures
[ERR] def was null
[ERR] C2008: Requirement had no matching files <MyApp.store.TreeStructures> -- unknown-file:-1
Static tree implementation (reads JSON object to get data):
Ext.define('MyApp.store.Categories', {
extend : 'Ext.data.TreeStore',
model : 'MyApp.model.Category',
autoLoad : true,
root : {
text : 'All',
alias : '',
expanded : true
}
});
Ext.define('MyApp.model.Category', {
extend: 'Ext.data.Model',
fields: [
{ name: 'alias', type: 'auto' },
{ name: 'text', type: 'auto' }
],
proxy: {
type: 'ajax',
url: 'data/categories.json'
}
});
Ext.define('MyApp.controller.ConceptTreeReadonly', {
extend : 'Ext.app.Controller',
stores: ['Categories'],
models: ['Category'],
refs : [{
ref: 'categories',
selector: 'view-west'
}],
});
Dynamic tree implementation (uses server-side stack to get data):
Ext.create('MyApp.store.TreeStructures', {
extend: 'Ext.data.TreeStore',
model : 'MyApp.model.TreeStructure',
proxy: {
type: 'direct',
directFn: Concept_Tree_Structure.read,
reader: {
root: 'data'
}
},
root: {
text: 'Concept Tree',
id: 'root',
expanded: false
//children: []
},
autoLoad: false
});
Ext.define('MyApp.model.TreeStructure', {
extend: 'Ext.data.Model',
xtype: 'model-tree-structure',
fields: [
{ name: 'text' }, // string
{ name: 'id' }, // Int32 type: 'int'
{ name: 'expanded' }, // boolean
{ name: 'leaf' }, // boolean
{ name: 'children' } // List<TreeStructure>
]
});
Ext.define('MyApp.controller.ConceptTreeController', {
extend : 'Ext.app.Controller',
stores: ['TreeStructures', 'Concepts'],
models: ['TreeStructure', 'Concept'],
refs : [{
ref: 'concept-tree',
selector: 'view-concept-tree'
}],
init : function() {
this.getConceptsStore().load({
params: {
start: 0,
limit: 10,
foo: 'bar'
}
});
this.getTreeStructuresStore().load({
params: {
start: 0,
limit: 10,
foo: 'bar'
}
});
}
});
Change Ext.create('MyApp.store.TreeStructures'...
To Ext.define('MyApp.store.TreeStructures'...
Im now studying Sencha Touch 2 and doing some Research on Ext.data.LocalStorage that can be use in Offline Mode.
I tried to follow this turorial
Sencha Touch 2 Local Storage
and just updated the code from Github - RobK/SenchaTouch2-LocalStorageExample or riyaadmiller/LocalStorage and modified Store url using my own WCF Rest
but i cant get LocalStorage working on offline mode.I have no issue on running the app Online. I also tried to debug it on Chrome developer tool but LocalStorage always get 0 data. I used Chrome/Safari Browser and also build the apps as Android using Phonegap build and still not working.
Did I miss something?
Does anyone can provide the details to deal with this Issue.
Below is my code:
Store:
Ext.define('Local.store.News', {
extend:'Ext.data.Store',
config:{
model: 'Local.model.Online',
proxy:
{
type: 'ajax',
extraParams: { //set your parameters here
LookupType: "Phone",
LookupName: ""
},
url: 'MY WCF REST URL',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader:
{
type: 'json'
, totalProperty: "total"
},
writer: { //Use to pass your parameters to WCF
encodeRequest: true,
type: 'json'
}
},
autoLoad: true
}
});
Offline Model:
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});
Online Model:
Ext.define('Local.model.Online', {
extend: 'Ext.data.Model',
config: {
idProperty: "ID", //erm, primary key
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "Name", type: "string" },
{ name: "Description", type: "string" }
]
}
});
Controller:
Ext.define('Local.controller.Core', {
extend : 'Ext.app.Controller',
config : {
refs : {
newsList : '#newsList'
}
},
/**
* Sencha Touch always calls this function as part of the bootstrap process
*/
init : function () {
var onlineStore = Ext.getStore('News'),
localStore = Ext.create('Ext.data.Store', { storeid: "LocalNews",
model: "Local.model.Offline"
}),
me = this;
localStore.load();
/*
* When app is online, store all the records to HTML5 local storage.
* This will be used as a fallback if app is offline more
*/
onlineStore.on('refresh', function (store, records) {
// Get rid of old records, so store can be repopulated with latest details
localStore.getProxy().clear();
store.each(function(record) {
var rec = {
name : record.data.name + ' (from localStorage)' // in a real app you would not update a real field like this!
};
localStore.add(rec);
localStore.sync();
});
});
/*
* If app is offline a Proxy exception will be thrown. If that happens then use
* the fallback / local stoage store instead
*/
onlineStore.getProxy().on('exception', function () {
me.getNewsList().setStore(localStore); //rebind the view to the local store
localStore.load(); // This causes the "loading" mask to disappear
Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn); //alert the user that they are in offline mode
});
}
});
View:
Ext.define('Local.view.Main', {
extend : 'Ext.List',
config : {
id : 'newsList',
store : 'News',
disableSelection : false,
itemTpl : Ext.create('Ext.XTemplate',
'{Name}-{Description}'
),
items : {
docked : 'top',
xtype : 'titlebar',
title : 'Local Storage List'
}
}
});
Thanks and Regards
1) First of all when you creating record and adding into store, the record fields should match the model fields of that store.
Here you creating record with field name, but Local.model.Offline didn't name field
var rec = {
name : record.data.name + ' (from localStorage)'
};
This is what you need to do within refresh
localStore.getProxy().clear();
// Also remove all existing records from store before adding
localStore.removeAll();
store.each(function(record) {
console.log(record);
var rec = {
ID : record.data.ID,
LookupName : record.data.Name + ' (from localStorage)',
LookupDescription : record.data.Description
};
localStore.add(rec);
});
// Don't sync every time you add record, sync when you finished adding records
localStore.sync();
2) If specify idProperty in model which is using localStorage, then record will not be added into localStorage.
Model
Ext.define('Local.model.Offline', {
extend: 'Ext.data.Model',
config: {
// idProperty removed
fields: [
{ name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
{ name: "LookupName", type: "string" },
{ name: "LookupDescription", type: "string" }
],
identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
proxy: {
type: 'localstorage',
id : 'news'
}
}
});
I want to convert the timestamp to customized date format right after the server returns the data.
I tried to use the "convert" in Ext.data.field : http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-convert
But I cannot make it right. This is my model.
Ext.define('AM.model.Comment',{
extend: 'Ext.data.Model',
fields: [
{ name: 'createdTime', type: 'date', convert:function(v,record){record.parseDate(v,record);}}, // datetime
],
proxy: {
type: 'rest',
url:'../comments',
writer:{
type:'json'
},
reader: {
type: 'json'
}
},
parseDate:function(v,record){
console.log(v); //show 1347465600000
console.log(Ext.Date.format(new Date(v), 'Y-m-d')); //show 2012-09-13
return Ext.Date.format(new Date(v), 'Y-m-d');
}
});
After loading, I checked firebug and found the field "createdTime" is "undefined".
Can someone point out my mistake? Thanks!
I can achieve that without using "convert", just use Ext.Date.format(new Date(v), 'Y-m-d') in other component. But I think it will be better to do that in model. Then every component can always read the right date format as querying it.
I found a solution. Instead of using "convert", I override the getData() method of reader.
Ext.define('AM.model.Comment',{
extend: 'Ext.data.Model',
fields: [
{ name: 'createdTime', type: 'datetime'},
],
proxy: {
type: 'rest',
url:'../comments',
writer:{
type:'json'
},
reader: {
type: 'json',
getData:function(data){
for(i = 0; i < data.length; i++){
data[i].createdTime = Ext.Date.format(new Date(data[i].createdTime), "Y-m-d");
}
return data;
}
}
}
});
If anyone has better solution, please tell me. And I still wonder why "convert" didn't work.If anyone know the reason, please tell me, too. Thanks!
None of there store answers considers the writer? displaying it as formatted date can be easily done by implementing the row's renderer() ... while read/write might require to implement the model's functions. Considering that the conversion factor from PHP to JavaScript time is 1000, while one can omit that part, while representing the time in milliseconds (the rawValue in the example can be either of type integer or of type date):
Ext.define('AM.model.Comment', {
extend: 'Ext.data.Model',
fields: [{
name: 'createdTime',
type: 'DATETIME',
/* .convert() is triggered twice - on read and on write */
convert: function(rawValue, model) {
/* only convert, when rawValue appears to be an integer */
if(parseInt(rawValue) > 0){
return Ext.util.Format.date(new Date(parseInt(rawValue)*1000), 'Y-m-d');
}
/* it's a date already */
else if(typeof(rawValue) == 'object'){
return rawValue;
}
}
}]
});
Not sure if you still care but your Convert solution would work but you're just missing a return. This is what you had.
fields: [
{ name: 'createdTime', type: 'date', convert: function(v, record) {
record.parseDate(v,record);
}}, // datetime
If you look at it you are missing a return in your convert so it should be this
{ name: 'createdTime', type: 'date', convert: function(v,record) {
return record.parseDate(v,record);
}}, // datetime
You can do the mapping in the model. I think the main problem , that you missed 'return' word in 'convert' function.
If it's will not work, try to convert to javascript date before the format
Ext.define('AM.model.Comment',{
extend: 'Ext.data.Model',
fields: [
{
name: 'createdTime', type: '**datetime**', convert:function(v,record){
return Ext.Date.format(new Date(v), 'Y-m-d');
}
},
],
proxy: {
type: 'rest',
url:'../comments',
writer:{
type:'json'
},
reader: {
type: 'json'
}
}
});