I am having problems loading an array of data from an external file into my store.
This is the file containing the data:
/data/contacts
[
["Lisa", "lisa#hotmail.com", "555-222-3333"],
["Bart", "bart#hotmail.com", "555-222-3333"],
["Homer", "homer#hotmail.com", "555-222-3333"],
["Marge", "marge#hotmail.com", "555-222-3333"]
]
This is my store:
Ext.define('MyApp.store.Contacts', {
extend: 'Ext.data.Store',
autoLoad: true,
alias: 'store.contacts',
model: 'MyApp.model.Contact',
proxy: {
type: 'ajax',
reader: {
type: 'array'
},
url: '../data/contacts'
}
});
This is my model:
Ext.define('MyApp.model.Contact', {
extend: 'Ext.data.Model',
alias: 'model.contact',
fields: [
{name: 'name', mapping: 0},
{name: 'email', mapping: 1},
{name: 'phone', mapping: 2},
]
});
And I am getting this error:
[E] Ext.JSON.decode(): You're trying to decode an invalid JSON String: [
["Lisa", "lisa#hotmail.com", "555-222-3333"],
["Bart", "bart#hotmail.com", "555-222-3333"],
["Homer", "homer#hotmail.com", "555-222-3333"],
["Marge", "marge#hotmail.com", "555-222-3333"]
]
Does anyone have any suggestions on what I am doing wrong, or what I should do? Preferably I do not want to change the format of the array in the data file.
Okay, I realized what I did wrong. It was a very stupid user error made by me.
In my data file: /data/contacts, what I really had was this:
[
["Lisa", "lisa#hotmail.com", "555-222-3333"],
["Bart", "bart#hotmail.com", "555-222-3333"],
["Homer", "homer#hotmail.com", "555-222-3333"],
["Marge", "marge#hotmail.com", "555-222-3333"]
]
// [
// {name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-222-1212'},
// {name: 'Bart', email: 'bart#simpsons.com', phone: '555-333-2212'},
// {name: 'Homer', email: 'homer#simpsons.com', phone: '555-122-1212'},
// {name: 'Marge', email: 'marge#simpsons.com', phone: '555-123-1212'}
// ]
I was previously testing other options for my JSON format, and I was silly enough to think that I could place comment //'s in a normal file.
Removing the comments from the file will fix the error. The array defined in this file can now be loaded into the store.
The error message says that the received JSON is invalid. You can check the validity online at http://jsonlint.com. If it is invalid it is the first thing to fix.
Then, I see the combination of ajax proxy and array reader for the first time in many years with Ext and I'm not sure it is supported.
Related
Possible Duplicate: How to set url and root dynamically in extjs
Hi there, I have a simple memoryStore. If I tried not to declare its proxy during the Ext.Define, I am unable to retrieve the proper data root later on, even if I do set the proxy. Am I doing something wrong?
Here's a test case:
var store = Ext.create('Ext.data.Store', {
storeId: 'JailNames',
autoLoad: true,
fields: [
{
name: 'name',
type: 'string'
},
],
data: {
data_regionI: [
{name: "Jail 1"},
{name: "Jail 2"},
{name: "Jail 3"},
],
data_regionII: [
{name: "Jail 4"},
{name: "Jail 5"},
{name: "Jail 6"},
],
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data_regionI'
}
}
})
store.setProxy({
type: 'memory',
reader: {
type: 'json',
root: 'data_regionII'
}
} )
store.load();
store.getAt(0).raw //still returns Jail 1
Looking through store.getProxy().reader.root I get the data_regionII as a root. Why?
Thanks in advance
If I copy your code into a sencha fiddle of Version 4.1.1, it throws an Uncaught TypeError: Cannot read property 'raw' of undefined, which is what I expected, because the store shouldn't contain any records at all after the call to load().
There are many problems in your understanding what a store does and what a proxy does:
A normal store's load function will tell the proxy to fetch the data, tell the reader to make records from it, and load it into the data property of your store, overwriting(!) the data you have defined at initialization.
But a memory store's load function isn't intended to do anything at all, and isn't intended to be used at all.
A memory store isn't intended to hold more than one store content at the same time. (you can, however, store the unused contents in an unused(!) property of the store's JavaScript object).
A store, no matter which proxy, does not require autoLoad:true to load the content of data into the store - the content of data is automatically used as the default data of the store after initialization.
That said, it's still possible to achieve what you want with just a few lines of code. You don't even have to create all the functions I only made for readability:
var store = Ext.create('Ext.data.Store', {
storeId: 'JailNames',
fields: [
{
name: 'name',
type: 'string'
},
],
myData: { // custom property!
data_regionI: [
{name: "Jail 1"},
{name: "Jail 2"},
{name: "Jail 3"},
],
data_regionII: [
{name: "Jail 4"},
{name: "Jail 5"},
{name: "Jail 6"},
],
},
loadRegion1:function() {
this.loadRegion("data_regionI");
},
loadRegion2:function() {
this.loadRegion("data_regionII");
},
loadRegion:function(rootProperty) { // custom function for better readability
this.loadRawData(this.myData[rootProperty]); // load data without proxy, but with reader!
},
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
store.loadRegion1();
console.log(store.getAt(0).get("name")); //returns Jail 1
store.loadRegion2();
console.log(store.getAt(0).get("name")); //returns Jail 4
I'm developing an Extjs 6 application using MVVM architecture. I have a model in MyApp/model folder as follow:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});
And my store in MyApp/store folder is as follow:
Ext.define('MyApp.store.User', {
extend: 'Ext.data.Store',
model: 'MyApp.model.User',
data : [
{firstName: 'Seth', age: 34},
{firstName: 'Scott', age: 72},
{firstName: 'Gary', age: 19},
{firstName: 'Capybara', age: 208}
]
});
And the in Application.js in /MyApp folder add the store as follow:
stores: [
'User'
]
now I get store in my application as follow:
app = MyApp.getApplication();
users = app.getStore('User');
How can I get store's data? users.getData()? When I user users.getData() it returns [undefined x 4]. Where is the problem? Is it work correctly?
you are using it correctly. You have to use users.getData().items as follow:
app = MyApp.getApplication();
users = app.getStore('User');
users.getData().items;
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,
...
});
I'm attempting to populate a grid with a data store that uses a proxy and a defined model and reader. Similar stores aren't having the same issue, but one is.
Model
Ext.define('DrillDescriptionGridModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'sentTime', type: 'string'},
{name: 'sDescription', type: 'string'},
{name: 'receivedTime', type: 'string'},
{name: 'seconds', type: 'number'},
{name: 'formatted', type: 'string'},
{name: 'alertPhone', type: 'string'},
{name: 'alertEmail', type: 'string'}
]
});
Reader
var DrillDescriptionReader = Ext.create('Ext.data.JsonReader', {
type: 'json',
model: 'DrillDescriptionGridModel',
root: 'data'
});
Store
DrillDescriptionStore = Ext.create('Ext.data.Store', {
model: 'DrillDescriptionGridModel',
autoLoad: false,
proxy: {
type: 'ajax',
url: '/inc/ajax/Monitors.php',
actionMethods: 'POST',
reader: DrillDescriptionReader
},
listeners: {
load: function() {
console.log(this.getAt(0));
DrillDescriptionPanel.show();
}
}
});
The proxy returns a json string
{"data":[{"sDescription":"Status Normal","sentTime":"12:00:00 am","receivedTime":"12:00:01 am","seconds":"2","formatted":"2 seconds","alertPhone":"","alertEmail":""}, [...]
The console.log in the load listener displays
Ext.Class.c.m
data: Object
alertEmail: ""
alertPhone: ""
formatted: "2 seconds"
receivedTime: "12:00:01 am"
seconds: 2
sentTime: "12:00:00 am"
__proto__: Object
[...]
raw: Object
alertEmail: ""
alertPhone: ""
formatted: "2 seconds"
receivedTime: "12:00:01 am"
sDescription: "Status Normal"
seconds: 2
sentTime: "12:00:00 am"
__proto__: Object
[...]
Anyone know why the sDescription field would be mapped in the raw object, but not the data object, or spot an error in the code? Any help would be greatly appreciated. Thanks.
if you are using extjs 4 as you tagged it .. then the json reader is not defined properly
The class should be Ext.data.reader.Json
So I've figured this one out, and unfortunately it had NOTHING to do with the code that I posted. Thanks for all the help Rocky.
I had another store a little further down in the code that was trying to utilize the same reader... which seems like it shouldn't have been a problem at all, but apparently was. Modified the reader in the store below and code worked right away.
Thanks again for the help Rocky, and thanks for taking a look nscrob.
I asked this question before the weekend and am still stuck despite following the advice. This time I will post all of the relevant code in the hope someone can help me get to the bottom of this.
Important note: the data store and model work perfectly when I statically enter the data into the data store using the data: [{ json data }] parameter of the store. But doing it using ajax proxy fails (even though I can see in chrome that test.php gets called and echoes out the json data (see test.php below).
This is my store:
new Ext.data.Store({
model: "SearchResult",
proxy: {
type: "ajax",
url : "test.php",
extraParams : 'test',
reader: {
type: "json",
}
},
});
I load it when a button is clicked on via a handler.
Here is what is echoed out in test.php:
<?php
echo "[{stock: 'Tommy', storePhone: '353535', year: '1984', make: 'Ferrari', trim: 'trim', miles: '12345', storename: 'branch name' }]";
?>
Been stuck on this for a while so any help much appreciated!
It;s not enough to echo a string that looks like your json ... you should use php methods to encode it ... for your example it will be
<?php
$data = array(array('stock'=> 'Tommy', 'storePhone'=> 353535, 'year'=> '1984', 'make'=> 'Ferrari', 'trim'=> 'trim', 'miles'=> '12345', 'storename'=> 'branch name' ));
echo json_encode($data);
?>
You need to provide a "success: true" property and put your data into a root property in your JSON response.
You should then add the root property to your reader's config.
{
"success": true,
"rows": [
{
"stock": "Tommy",
"storePhone": "353535",
"year": "1984",
"make": "Ferrari",
"trim": "trim",
"miles": "12345",
"storename": "branchname"
}
]
}
Your store:
new Ext.data.Store({
model: "SearchResult",
proxy: {
type: "ajax",
url : "test.php",
extraParams : 'test',
reader: {
type: "json",
root: 'rows'
}
},
});
This solves the issue
store.proxy.url = 'loader.php?user=' + var_here;
store.load();