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;
Related
I'm new in ExtJs and i'm stuck with some problems.
This is my model:
Ext.define('MyTestApp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'price', type: 'float'},
{name: 'count', type: 'int'}
],});
This is store:
Ext.define('MyTestApp.store.Products', {
extend: 'Ext.data.Store',
alias: 'store.products',
storeId: 'products',
model: 'MyTestApp.model.Product',
data: [
{id: 1, name: 'Notebook Lenovo', description: 'Ноутбук Lenovo IdeaPad 330-15IKB', price: 100, count: 2},
{id: 2, name: 'Logitech Keyboard', description: 'Клавиатура Logitech Comfort K280E', price: 50, count: 9},
{id: 3, name: 'Logitech Mouse', description: 'Мышь Logitech M90', price: 25, count: 0},
{id: 4, name: 'Gaming mouse pad', description: 'Коврик для мыши A4Tech X7-200MP', price: 150, count: 5},
{id: 5, name: 'Samsung smartphone', description: 'Смартфон Samsung Galaxy A51 64GB', price: 122, count: 3},
{id: 6, name: 'Protective glass', description: 'Защитное стекло Samsung InterStep FSC', price: 10, count: 33},
],});
I want to add/update some records in the store, but methods such as store.load() or newModelInstance.save() doesn't work. Error in console:
POST http://localhost:1841/MyTestApp.model.Product?_dc=1596285700466 404 (Not Found)
To add new record into store you can use store.add({id:123, name: “some name”...}) method. To update records, something like strore.findRecord() and then update the found record in the store i.e. record.set(fieldName, fieldValue).
To update the store/records data on the server (commit), you must configure proxy for store/record.
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 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.
I have an object array where every object can have an array of properties, like this
[
{
name: 'Big house',
properties: [{name: 'Area',value: '400'}, {name: 'Year',value: '1950'}]
},
{
name: 'Small house',
properties: [{name: 'Area',value: '400'}, {name: 'Year',value: '1950'}]
},
{
name: 'Green house',
properties: [{name: 'Area',value: '40'}, {name: 'Year',value: '2008'}]
},
{
name: 'Red house',
properties: [{name: 'Area',value: '250'}, {name: 'Year',value: '1999'}]
},
];
Now I'd like to order this list by one of the properties, say Area, using a filter in ng-repeat. Is that possible?
I've been play around with this in plunker (http://plnkr.co/edit/GEgLxv5zJyW0ZBTtJR5S?p=preview) but cannot figure out how to do.
Thanks in advance
This will work if the area is always the first property:
<tr ng-repeat="house in houses | orderBy:'properties[0].value'">
Also make sure that the area is defined as an integer, right now they are strings. So 250 will be sorted before 40.
So remove the quotes from the numbers:
{
name: 'Area',
value: 400
}
, {
name: 'Year',
value: '1950'
}
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,
...
});