Loading data into List using store sencha touch 2 - extjs

I have created navigaton view using Sencha touch 2. Navigation view has list component which i want to load it using store and model. I created model and store as required. On running my app the list does not render any data.
It also gives warning in conolse [Ext.dataview.List#applyStore] The specified Store cannot be found . I am not sure what this error means.
Here is my mvc code,
model:
Ext.define('GS.model.BlogModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'title', type: 'auto'},
{name: 'author', type: 'auto'},
{name: 'content', type:'auto'}
]
}
});
store:
Ext.define('GS.store.blogs',{
extend:'Ext.data.Store',
config:{
model:'GS.model.BlogModel',
autoLoad :true,
proxy:{
type:'jsonp',
url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader:{
type:'json',
rootProperty:'responseData.feed.entries'
}
}
}
});
view:
Ext.define('GS.view.Blog',{
extend:'Ext.navigation.View',
xtype:'blog',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store',
'GS.store.blogs'
],
config: {
title:'Blog',
iconCls:'star',
items:{
xtype:'list',
itemTpl:'{title}',
title:'Recent Posts',
store:'GS.store.blogs'
}
}
});
Can someone point me out what is missing/
Any help appreciated.

The store property in items for your list needs to be an instance, not the name of the class. GS.store.blogs is the class name. You need to create an instance of this class using Ext.create and pass that instance in items. Oh yeah, and your syntax for items is wrong too. Needs to be an array [] not an object {}. So something like:
var blogsStore = Ext.create("GS.store.blogs"); //put this in the items list
Ext.define('GS.view.Blog',{
extend:'Ext.navigation.View',
xtype:'blog',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store',
'GS.store.blogs'
],
config: {
title:'Blog',
iconCls:'star',
items:[{
xtype:'list',
itemTpl:'{title}',
title:'Recent Posts',
store: blogsStore //Store instance here. And items are in array, not Object
}]
}
});

Related

Adding a proxy section to a model in Sencha Touch 2 not MVC

My goal here is to understand how models and stores are working and more specifically with 'localstorage'.
Here's the function I'm working on:
createModelAndStore: function() {
console.log('Kitchensink.view.LocalStorage createModelAndStore starts');
// Set up a model to use in our Store
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
//proxy: {
// type: 'localstorage'
//},
fields: [
{name: 'firstName', type: 'string'},
]
}
});
var myStore = Ext.create('Ext.data.Store', {
id: 'UserStore',
model: 'User',
data: [
{
'firstName': 'Tommy'
}
]
});
},
It's working perfectly like that. As soon as I remove the comments on the proxy section it fails miserably with 'Model with name "User" does not exist.'.
Can someone please explain to me what's happening?
I am not interested in moving the proxy definition in the store as I would like to use the '.save()' method on a model instance along with autosync.

Extjs two instances of stores not using different models

edit http://jsfiddle.net/zns6B/4/ Added js fiddle link and running into a cannot get 'Fields' of undefined now
edit2 So i found that the second grids store model is correct with Sc.Model.B. But the records in the store have ids that are Sc.Model.A . So my store model is set to Sc.Model.B but the store is using Sc.Model.A . It still gets stores the data in the store but only as if the model was set to Sc.Model.A in the first place.
edit3 I have take all the creation of instance out of my ListGrid. I have instead added them when creating the list grid. I have added the following. This does not work either. I am at a lose for what to do.
var obj1 = Ext.create('Sc.ListGrid',{
title: "first Component",
foo: true,
id: 'firstGrid',
myStore: Ext.create('My.Store.MyStore',{model:Ext.create('My.Model.Model'});
renderTo: 'renderToMe1'
});
I am trying to generate these two grids. When foo == true i want it to generate a store with model A. When it equals false i want it to use model B. I have tried to just specifically add the My.Model.MyModel but that does not work. The second grid will somehow inherit the first models model. I have changed it just to try and use fields instead of using the model at all but the second grid still uses the first grids.
I have also tried declaring the Stores inside the initComponent as well but i get the same result either way.
var obj1 = Ext.create('Sc.ListGrid',{
title: "first Component",
foo: true,
id: 'firstGrid',
renderTo: 'renderToMe1'
});
var obj2 = Ext.create('Sc.ListGrid',{
title: "second Component",
foo: false,
renderTo: 'renderToMe2'
});
Sc.ListGrid
Ext.define('Sc.ListGrid', {
extend: 'Ext.grid.Panel',
title: 'Grid',
store: Ext.data.StoreManager.lookup('bleh'),
requires: ['stuff'],
columns: [
{ text: 'id', dataIndex: 'id' },
],
config:{
foo: null,
},
initComponent: function(){
if(this.foo == true){
Ext.apply(this,{
store: this.buildStore1()
});
}
if(this.foo == false){
Ext.apply(this,{
store: this.buildStore2()
});
}
this.callParent();
},
buildStore1:function(){
return Ext.create('Sc.Store.League.LeagueStore',{url:'somewhere',fields:["S"]});
},
buildStore2:function(){
return Ext.create('Sc.Store.League.LeagueStore',{url:'somewhere',fields:["A"]});
}
});
Also an example of a model i am trying to use as well.
Ext.define('Sc.Model.A', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'type', type: 'string'},
{name: 'gamename', type: 'string'}
]
});
Ext.define('Sc.Model.B', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'type', type: 'string'},
{name: 'gamename', type: 'string'},
{name: 'something1', type: 'string'},
{name: 'something2', type: 'string'},
]
});
It will create both grids and load the data from my webservice. When i check the grid with Sc.Model.B's data it will have id and type. But will not have any data for something1, and something2. My webserivce is returning json and all values are entered. There are no nulls. If i Ext.getCmp('firstGrid').getStore().getData(0); If i use Ext.getCmp('firstGrid').getStore() and check the model name. It shows Model B but reflects A
Do you need it to be done in the initComponent()??
This is a fiddle I saved from a while ago when I was trying to do something similar. If you need help tweaking it let me know and ill update it.
The main thing to note is the grid.reconfigure(store,columns);
That will change the grid's store and columns appropriately.
http://jsfiddle.net/zqG55/1/
The issue was that the proxy wasn't being set or created properly because the proxy model was referencing the previous model instance. This is my solution
var themodel = 'A.Model.SomeModel';
var myProxy = new Ext.data.proxy.Ajax({
model: themodel,
url: url,
reader: {
type: 'json',
}
});
Ext.apply(this,{
columns: modelColumns.columns,
store: Ext.create('M.Store.MyStore',{
model: themodel ,
autoLoad: true,
proxy: myProxy
})
});

Sencha Touch 2.3.0 NestedList doesn't display child items when tapping but only root items

Update:
Demo of the problem
I'm pretty new to Sencha Touch and am trying to get a NestedList working.
I've set up two model files, a store with an ajax proxy that loads a local json file and the view containing the NestedList.
The NestedList displays the root elements from my json file, so that's all working so far.
But when I click on one of those items, it animates the view but the resulting list is only showing the parent items again, but this time with a back button in the titlebar:
I really don't get what I am doing wrong here.
JSON (compact)
{
"countries":[
{"name":"Germany","countryCode":"de","cities":[
{"name":"Berlin"},{"name":"Muenchen"}]},
{"name":"France","countryCode":"fr","cities":[
{"name":"Paris"},{"name":"Lyon"}]},
{"name":"United Kingdom","countryCode":"uk","cities":[
{"name":"London"},{"name":"Leicester"}]}]
}
Models
City:
Ext.define('MyApp.model.City', {
extend: 'Ext.data.Model',
config: {
fields: [{ name: 'name', type: 'string' }]
}
});
Country:
Ext.define('MyApp.model.Country', {
extend: 'Ext.data.Model',
require: [
"MyApp.model.City"
],
config: {
fields: [
{ name: 'name', type: 'string' },
{ name: 'countryCode', type: 'string' }
],
hasMany: [{ model: "MyApp.model.City", name: "cities" }]
},
});
TreeStore
Ext.define('MyApp.store.CountryTreeStore', {
extend: 'Ext.data.TreeStore',
config: {
autoLoad: true,
model: "MyApp.model.Country",
defaultRootProperty: "countries",
proxy: {
type: "ajax",
url: "/data/data.json",
reader: {
type: "json"
}
}
}
});
part from the view
items: [
{
xtype: 'nestedlist',
store: "CountryTreeStore",
displayField: "name"
}
]
Update:
Setting a breakpoint in the load event listener of the TreeStore (proxy) and inspecting the "loaded" store object shows, that it has a cities property with the correct data.
hm I've tried to refactor your problem. When I set the key "cities" in the json to "countries", or the same key from the previous level, it seems to work. So it's your "hasMany"-relation which is not working. I've never tried to do it this way. So when you remove the "hasMany"-relation, and change the json to this, it will work:
[{
"countries":[
{"name":"Germany","countryCode":"de","countries":[
{"name":"Berlin", leaf: true},{"name":"Muenchen", leaf: true}]},
{"name":"France","countryCode":"fr","countries":[
{"name":"Paris", leaf: true},{"name":"Lyon", leaf: true}]},
{"name":"United Kingdom","countryCode":"uk","countries":[
{"name":"London", leaf: true},{"name":"Leicester", leaf: true}]}]
}]
and with "leaf: true" you can listen to the "leafitemtap" event, to do something when you reach the end of the tree.
Where have you found the example with the "hasMany"-relation? Maybe there's just a little thing missing ;)
have you tried to set leaf: true on the last item level? {"name":"Muenchen", "leaf": true}

Ext JS store data not loading

For some reason unknown to me, I cannot get my Ext JS store to display in my combobox
Here's my model:
Type.js
Ext.define('AM.model.Type', { //app name config is "AM"
extend: 'Ext.data.Model',
fields: [
{ name: 'field', type: "string" }
]
});
And my store:
Type.js
Ext.define('AM.store.Type', {
extend: 'Ext.data.Store',
model: 'AM.model.Type',
storeId: 'typestore',
data: [
{ field: 'Bobby' },
{ field: 'Jimbo' },
{ field: 'Craig' }
]
});
And where I call it:
app.js
{ xtype: 'combobox', padding: 5, store: Ext.getStore('typestore'), displayField: 'field'}...
Any ideas?
I don't see anything wrong here. The problem is probably elsewhere.
I have created a sample fiddle with your code slightly simplified, and it works fine.
http://jsfiddle.net/dbrin/28sX7/
I solved the problem by instantiating my store class with into a variable using Ext.Create
and setting my comboboxes queryMode to local (remote would display the data but keep on loading and loading).

Writing a Custom Reader in ExtJS

I am new to ExtJS and am playing around with it, I am receiving following JSON from the server as shown below
{"tid":1,"action":"HelloWorld","method":"getData",
"result": {"InstId":"1",
"value": [
{"country.stateId":"101", "country.stateName":"TA"},
{"country.stateId":"102", "country.stateName":"ABC"},
{"country.stateId":"103", "country.stateName":"DEF"}]}",
"type":"rpc"}
and I need to extract values form the above JSON and populate the combobox. To do this job I need to write a custom Reader to read and populate the in the combobox. Can anyone of you please help me in writing a custom reader?
Following are the various snippet
Ext.define('AM.store.TestStore', {
extend: 'Ext.data.Store',
alias : 'widget.testStore',
model: 'AM.model.TestModel',
autoload:true,
proxy: {
type: 'direct',
directFn: HelloWorld.getData,
extraParams:[ {'InstId': '1', 'boxid':'id'},
{'InstId': '1', 'name':'states'}
],
reader:{
type:'json',
root:'result'
}
});
Following is the view object
Ext.define('AM.view.combobox.TestView' ,{
extend: 'Ext.form.ComboBox',
alias : 'widget.TestView',
fieldLabel: 'States',
store:'TestStore',
renderTo: Ext.getBody(),
displayField: 'country.stateName',
valueField: 'country.stateId',
autoselect:false
});
Following is my Model Object
Ext.define('AM.model.TestModel', {
extend: 'Ext.data.Model',
alias : 'widget.TestModel',
fields: [ {name: 'country.stateId'}, {name: 'country.stateName'}]
);
Following is my controller
Ext.define('AM.controller.Funds', {
extend: 'Ext.app.Controller',
alias : 'widget.FundsController',
views: ['combobox.TestView'],
stores: ['TestStore'],
models:['TestModel']
);
Can anyone please help me to write a custom JSON Reader?
Thanks
Phani Kumar
You don't need to write custom reader for that. I think making couple small changes in your code would be enough:
First, in the proxy definition:
root: 'value'
useSimpleAccessors: true
then in the model for your data:
fields: [{
name: 'id', mapping: 'country.stateId' }, {
name: 'name', mapping: 'country.stateName'
}]
That should do it.

Resources