I have a basic users.json file, a user model and a users store. The size of the store is 0 when I call getCount().
My initial idea was to add a listener for the load event. However, even just calling getStore() returns empty data.
Can you see were I have gone wrong?
{
"users":[
{
"name": "Mike Henderson",
},
{
"name": "Sally Michael",
},
{
"name": "Rory Muldoon",
}
]
}
Ext.define('TP.model.User', {
extend: 'Ext.data.Model',
config: {
fields: ['name']
}
});
Ext.define('TP.store.Users', {
extend: 'Ext.data.Store',
config:{
autoload: true,
model: 'TP.model.User',
storeId: 'Users',
proxy : {
type: 'ajax',
url: 'data/users.json',
reader: {
rootProperty: 'users',
type: 'json'
}
}
}
});
Ext.application({
name: 'TP',
views: ['Main'],
models:['User'],
stores:['Users'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TP.view.Main'));
Ext.getStore('Users').on('load', this.onStoreLoad, this);
console.log(Ext.getStore('Users').getCount());
},
onStoreLoad: function(self, records, success, operation) {
console.log("loaded store");
}
});
I found the solution in the end, it was simple typo.
In the store config - autoload needs to be autoLoad (Capital L)
Related
I should load date from server dynamically,
however, I have no idea how to change get parameters.
Here is my code.
I want to load store when the view is loaded, but the store get data from server
when the app is loaded. I need to change param according to user's input data.
[Store]
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel',
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
// extraParams: {
// man: '',
// },
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
},
});
[VIEW]
Ext.define('APP.view.MyListView', {
extend: 'Ext.navigation.View',
xtype: 'applistview',
requires: [
'Ext.Panel',
'APP.view.TopMenu',
'APP.view.TestListView',
'APP.config.Runtime',
],
fullscreen: true,
config: {
navigationBar: false,
fullscreen: true,
items: [
{ // Top Menu
xtype: 'topmenu',
},
{ // Main Menu
xtype: 'tlist',
itemId: 'myList',
store: 'MyTestStore',
},
{ // Bottom Banner
xtype: 'bottombanner',
},
]
},
initialize: function(){
var test = Ext.getStore('MyTestStore').load({extraParams:{man:'test'}});
console.log(test);
}
});
You can do this in two ways,
App default extra param set to 123
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel'
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
extraParams: {
man: '123'
},
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
}
});
When loading the store you can change extra param like the following way
initialize: function(){
var test = Ext.getStore('MyTestStore').getProxy().getExtraParams().man= '567'
Ext.getStore('MyTestStore').load();
console.log(test);
}
In Another way you can change proxy url without setting extra param
initialize: function(){
var url = 'http://test.com/api/test/'; // your store proxy url
var modified = url+'parameter you get from user'
Ext.getStore('MyTestStore').getProxy().setUrl(modified);
Ext.getStore('MyTestStore').load();
console.log(test);
}
Please help me to solve this issue.. am spending too much time to sort it out..
I have a json file i want to display it in dataview.. i can display the parent values but cannot getting the child nodes
this is my json format
{
"items": [
{
"name": "Science Gallery",
"menu": [
{
"commenttext": "SC Sandwich"
},
{
"commenttext": "SC Toasted Sandwich"
},
{
"commenttext": "SC Panini"
},
{
"commenttext": "SC Ciabatta"
},
{
"commenttext": "SC Burrito"
}
]
}
]
}
This is my View
/**
* TouchCalendar.view.EventListPanel
*/
Ext.define('WinReo.view.PropertyDetailsView', {
extend: 'Ext.Panel',
requires: [
'Ext.dataview.List',
'Ext.layout.Fit'
],
alias: 'widget.propertydetailsview',
id:'propertydetailsview',
config: {
// title : 'Events List',
layout : 'fit',
store:'WinReo.store.PropertyDetails',
id:'propertydetailsview',
cls:'propertydetailscss',
},
initialize: function(){
var listadd = Ext.create('Ext.DataView', {
fullscreen: true,
id: 'ListePieces',
//itemTpl: listTemplate,
//data:[],
itemTpl: [
'{name}',
'<div>',
'<h2><b>Menu</b></h2>',
'<tpl for="menu">',
'<div>{item}</div>',
'</tpl>',
'</div>'
].join(''),
loadingText: 'Loading...',
store: storedetails
/*listeners:{
itemtap: function(record, index){
alert('hi');
}
}*/
});
this.add(listadd);
}
});
Here is my model
Ext.define('WinReo.model.PropertyDetailsModel', {
extend: 'Ext.data.Model',
// requires: ['WinReo.model.PropertyDetailsModelComments'],
config: {
fields: [
{name: 'name'},
{name: 'commenttext'},
{name: 'item'}
]
}
});
Here is my Store
Ext.define('WinReo.store.PropertyDetails', {
extend: 'Ext.data.Store',
requires: [
'WinReo.model.PropertyDetailsModel',
'Ext.data.Store',
'Ext.dataview.DataView',
'Ext.data.NodeStore',
'Ext.data.TreeStore'
],
config: {
storeId: 'propertydetails',
defaultRootProperty: 'items',
model: 'WinReo.model.PropertyDetailsModel',
autoLoad: true,
proxy: {
type: 'ajax',
method:'post',
url: 'resources/data/fullproperty.json',
//url: apiurl+'PropertyList.ashx?switch=GetPIP&reoid=',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
});
Can i display this nested json with noram Model, is there any model association is needed?
please help...ur help is much appreciated..thanks in advance
Change your proxy setting in your store as follows. I removed 'rootProperty' and add 'record'
proxy: {
type: 'ajax',
method:'post',
url: 'resources/data/fullproperty.json',
//url: apiurl+'PropertyList.ashx?switch=GetPIP&reoid=',
reader: {
type: 'json',
record: 'items'
}
}
I'm new to sencha. I'm create MVC structure by use sencha architect, touch 2.2.x version.
I want to show nested data to a list control but I'm not sure how to define the tmp.
Here is sample of data return from server
{
"data":
[
{"AcctId": 1, "AcctNum": "A", "Alias": "aa"},
{"AcctId": 2, "AcctNum": "B", "Alias": "bb"},
{"AcctId": 3, "AcctNum": "C", "Alias": "cc"}
]
}
this is model, I define nested model
Ext.define('MyApp.model.Data', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.LoginAlias'
],
config: {
hasMany: {
model: 'MyApp.model.LoginAlias',
name: 'LoginAlias'
}
}
});
Ext.define('MyApp.model.LoginAlias', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'AcctId'
},
{
name: 'AcctNum'
},
{
name: 'Alias'
}
]
}
});
This is Stores to get data, It will be cross server data so I use JsonP
Ext.define('MyApp.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Data'
],
config: {
autoLoad: true,
model: 'MyApp.model.Data',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://localhost:8000/test/get_alias/',
reader: {
type: 'json'
}
}
}
});
Finally the List
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
store: 'MyJsonPStore',
itemTpl: [
'<div>List Item {AcctId}</div>'
]
}
});
I can see that the Store can get data from server in Sencha Architect by click on the "eye" icon next to the Store.
I try the List tpl with data.AcctId or change List store to MyJsonPStore.data but all not work.
Please help, thanks very much.
p/s: I try with non-nested model, and the List work ok. And this is the main js file, In case it needed
Ext.Loader.setConfig({
});
Ext.application({
models: [
'Data',
'LoginAlias'
],
stores: [
'MyJsonPStore',
'MyStore'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.MyList', {fullscreen: true});
}
});
1. Data structure
Not sure it's useful to define MyApp.model.Data as it's only the root of your list of data. So you could give away the hasMany logic.
2. Data representation
Ext.dataview.List is designed to show simple lists only. For nested lists, consider extending Ext.dataview.NestedList. (but if 1. is true, you won't need it).
3. Data access
To get direct access to the data you need to display, simply add rootProperty: 'data' to your proxy's reader config object:
proxy: {
type: "jsonp",
url: 'http://server.ext/path/to/MyApp/app/data/sample.ashx',
reader: {
type: "json",
rootProperty: 'data'
}
}
So I have a parent and child store, illustrated here:
Parent Model
Ext.define('APP.model.Client', {
extend: 'Ext.data.Model',
requires: [
'APP.model.Website', 'Ext.data.association.HasMany', 'Ext.data.association.BelongsTo'],
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'slug',
type: 'string'
}, {
name: 'active',
type: 'boolean'
}, {
name: 'current',
type: 'boolean'
}],
hasMany: {
model: 'APP.model.Website',
name: 'websites'
}
});
Child Model
Ext.define('APP.model.Website', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'client_id',
type: 'string'
}, {
name: 'sub_domain',
type: 'string'
}, {
name: 'active',
type: 'boolean'
}],
belongsTo: 'APP.model.Client'
});
Using an AJAX call via the server, I am loading the Clients store, and that is loading fine. But the Websites store isn't populated, and when I breakpoint on the Clients store on.load function, to see what it's populated with, the Client store is only populated with the client data, but in the raw property for that store, I can see all the websites data. So it's being returned correctly, but my extjs isn't correct. Here are the stores:
Client Store
Ext.define('APP.store.Clients', {
extend: 'Ext.data.Store',
autoLoad: false,
model: 'APP.model.Client',
proxy: {
type: 'ajax',
url: '/client/list',
reader: {
type: 'json',
root: 'items'
}
},
sorters: [{
property: 'name',
direction: 'ASC'
}]
});
Websites Store
Ext.define('APP.store.Websites', {
extend: 'Ext.data.Store',
requires: ['Ext.ux.Msg'],
autoLoad: false,
model: 'APP.model.Website',
proxy: {
type: 'ajax',
url: '/client/list',
reader: {
type: 'json',
root: 'items'
},
writer: {
type: 'json'
}
},
sorters: [{
property: 'sub_domain',
direction: 'ASC'
}]
});
My final result is...I would like to populate both stores so I can click on an element, and when it loads something from the parent store, I can access the child store(s) (there will be more when I figure out this problem) to populate a couple grid(s) in tabs.
What am I missing as far as my setup? I just downloaded extjs4 a couple days ago, so I am on 4.1.
Put your proxies in your models, unless you have a good reason not to [1]
Make sure you require the related model(s), either in the same file, or earlier in the application
Use foreignKey if you want to load the related data at will (i.e. with a later network request).
Use associationKey if the related data is loaded in the same (nested) response
Or just use both
Always name your relationships (otherwise the name will be weird if using namespaces).
Always use the fully qualified model name for the model property in your relationships
Working code:
model/Contact.js:
Ext.define('Assoc.model.Contact', {
extend:'Ext.data.Model',
requires:[
'Assoc.model.PhoneNumber'
],
fields:[
'name' /* automatically has an 'id' field */
],
hasMany:[
{
model:'Assoc.model.PhoneNumber', /*use the fully-qualified name here*/
name:'phoneNumbers',
foreignKey:'contact_id',
associationKey:'phoneNumbers'
}
],
proxy:{
type:'ajax',
url:'assoc/data/contacts.json',
reader:{
type:'json',
root:'data'
}
}
});
model/PhoneNumber.js:
Ext.define('Assoc.model.PhoneNumber', {
extend:'Ext.data.Model',
fields:[
'number',
'contact_id'
],
proxy:{
type:'ajax',
url:'assoc/data/phone-numbers.json',
reader:{
type:'json',
root:'data'
}
}
});
data/contacts.json:
{
"data":[
{
"id":1,
"name":"neil",
"phoneNumbers":[
{
"id":999,
"contact_id":1,
"number":"9005551234"
}
]
}
]
}
data/phone-numbers.json
{
"data":[
{
"id":7,
"contact_id":1,
"number":"6045551212"
},
{
"id":88,
"contact_id":1,
"number":"8009996541"
},
]
}
app.js:
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
requires:[
'Assoc.model.Contact'
],
name:'Assoc',
appFolder:'Assoc',
launch:function(){
/* load child models that are in the response (uses associationKey): */
Assoc.model.Contact.load(1, {
success: function(record){
console.log(record.phoneNumbers());
}
});
/* load child models at will (uses foreignKey). this overwrites child model that are in the first load response */
Assoc.model.Contact.load(1, {
success: function(record){
record.phoneNumbers().load({
callback:function(){
console.log(arguments);
}
});
}
});
}
});
[1] A store will use its model's proxy. You can always override the store's proxy if need be. You won't be able to use Model.load() if the model has no proxy.
Your assumption is wrong. You expect that the WebSite store loads itself but that is not how it works. What you can do is the following (this is untested but is how I do it in all my projects):
In your clients grid add a listener for the itemclick event to call the following method (showWebSites). It will receive the selected client record containing the selected APP.model.Client instance. Then, and given that each client has a set of WebSites, the method will load the APP.store.Websites store and the client´s websites will be displayed in your view.
showWebSites: function (sender, selectedClient) {
Ext.StoreManager.lookup('APP.store.Websites')
.loadData(selectedClient.data.WebSites);
}
This is the way. I hope you find it useful.
I have two stores: localstorage and a json on the server, I'm trying to download data from json to the local. Please see what's wrong:
/store/Notes.js
Ext.define("NotesApp.store.Notes", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
storeId: 'Notes',
model: "NotesApp.model.Note",
proxy: {
type: 'localstorage',
id: 'notes-app-store'
},
sorters: [{
property: 'dateCreated',
direction: 'DESC'
}],
grouper: {
sortProperty: "dateCreated",
direction: "DESC",
groupFn: function (record) {
if (record && record.data.dateCreated) {
return record.data.dateCreated.toDateString();
} else {
return '';
}
}
}
}
});
/store/Online.js
Ext.define("NotesApp.store.Online", {
extend: "Ext.data.Store",
config: {
storeId: 'Online',
proxy: {
type: 'jsonp',
url: 'http://server.com/made/qa.php',
reader: {
type: 'json'
//rootProperty: 'results'
}
},
autoLoad: false,
listeners: {
load: function() {
console.log("updating");
// Clear proxy from offline store
Ext.getStore('Notes').proxy.clear();
console.log("updating1");
// Loop through records and fill the offline store
this.each(function(record) {
console.log("updating2");
Ext.getStore('Notes').add(record.data);
});
// Sync the offline store
Ext.getStore('Notes').sync();
console.log("updating3");
// Remove data from online store
this.removeAll();
console.log("updated");
}
},
fields: [
{
name: 'id'
},
{
name: 'date_created'
},
{
name: 'question'
},
{
name: 'answer'
},
{
name: 'type'
},
{
name: 'author'
}
]
} });
When I need to update I called Ext.getStore('Online').load();
But the console is not showing anything else after 'updating'.
I wonder what went wrong?
Use Ext.getStore('Notes').getProxy().clear() instead works