I am trying to load a Nested list onto my Sencha app. The problem is I am not familiar with it and i am not sure if the json file i am using is correct.
[
{
"text":[
{
"text":"1.1.1",
"leaf":true
}],
"text":[
{
"text":"1.1.1",
"leaf":true
}
]
}
]
This is my store code
//Defining the store for the Nested List
Ext.define('InfoImage.store.nestedListStore', {
extend: 'Ext.data.TreeStore',
requires: 'InfoImage.model.nestedListModel',
id:'nestedListStore',
config:{
//Calling the required model for the Work Item List
model : 'InfoImage.model.nestedListModel',
//Defining the proxy for the Work Item List to pull the data for the List
proxy : {
type : 'ajax',
url : 'app/model/data/list.json',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: true
}
});
and my main code is
Ext.define("InfoImage.view.nestedList", {
extend:'Ext.NestedList',
xtype:'nestedList',
id:'nestedList',
config:{
fullscreen:'true',
title:'Nested List',
xtype:'nestedList',
//displayField : 'text',
html:'Nested List on its way!!!',
store:'nestedListStore'
//itemTpl:'{text}'
}
});
The output thats displayed is [object object]. I dont know what is missing. ANy help is appreciated.
Firstly, your Json is a VALID json. Always check for valid json by pasting the json on jsonlint.com
Secondly, I see that you have commented out the
displayField:'text'
property. If you don't provide the displayField to the nestedlist, it won't come to know, which items from the data store to show in the list.
Probably, that's why you are getting the [object Object] as your o/p in the list.
Uncomment the above line and check.
It seems that your JSON cannot work with Ext.NestedList because text is a field of your Model and it should not be declared as rootProperty in your JSON file.
Firstly, assume that you have this model definition:
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
According to your data, your JSON file should look like this:
items: [
{
text: '1.1',
items: [
{ text: '1.1.1', leaf: true },
{ text: '1.1.2', leaf: true }
]
}
]
You have to add this config to your Store as well defaultRootProperty: 'items'
Related
I'm trying to call 2 values from my store, and set it inside the styles in a div which I put it in a html: item. The store loads the data from a web API, which is working fine(I've tested using fiddler and the return response is correct) but I cant get the data in the store to work inside the html item.
Below is my view:
Ext.define('myapp.view.Main', {
extend: 'Ext.tab.Panel',
requires:['myapp.store.Style'],
items: [
{
id: 'firstpage',
title: 'Welcome',
store: 'styleStore',
styleHtmlContent: true,
scrollable: true,
items: [
{
html: ['<div id="testStr1" style="font-style:{FontStyle}; color:{Color};">',
'This is a test string.',
' Go to the settings to change the style',
'</div>'
].join("")
}
]
},
}
]
}
My Store:
Ext.define('myapp.store.Styles', {
extend: 'Ext.data.Store',
requires:[
'myapp.model.Style'
],
config: {
autoLoad: true,
model: 'myapp.model.Style',
storeId: 'styleStore',
clearOnPageLoad:false,
proxy:
{
type: 'ajax',
listeners: {
exception:{
fn: function(pxy, response, operation, options){console.log("We've got a problem...");}
}
},
url: 'http://localhost/styleapi/api/styles',
reader: {
type: 'json',
rootProperty: 'data',
}
}
}
});
My model:
Ext.define('myapp.model.Style', {
extend: 'Ext.data.Model',
fields:[
{
name: 'Id',
type: 'int'
},
{
name: 'FontStyle'
},
{
name: 'Color'
},
],
proxy: {
type: 'rest',
url: 'http://localhost/styleapi/api/styles'
}
});
A few issues here...
First, your main class, myapp.view.Main, is nesting items inside it, and those items are not configured correctly. Your items: ... should be inside of config, and there should be an xtype for each item, if you want the item to not be the default type of container. In your current code, you have an items: .. config on your first item, where you are putting html. This results in a nested component, which is not what you are intending here.
In addition, you are using html, when you really want to use a template. When you have a fixed set (or object) of data, you can use a component with tpl and data; when using a store for the data, you would use a dataview with an itemTpl config, which will repeat that template for each item in the store. Currently, your top-level item is defaulting to a container, where you are using a store config, which won't do anything at the moment.
So, steps to fix:
Move the top-level item into config property
Change the top-level item to be a dataview
Move the html out of the nested item and into an itemTpl property as an XTemplate (i.e. itemTpl: new Ext.XTemplate('<div ...'))
Im trying to populate a custom component using a store (actually a store with local data) in a Sencha Touch 2 project.
My idea is to create one custom component for each element in the store, but actually nothing happens.
I have tried several things but anything works, could you help me? I have done an example to show the problem:
model:
Ext.define('project.model.city', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'country', type: 'string'},
{name: 'city', type: 'string'}
]
}
});
store:
Ext.define('project.store.cities', {
extend: 'Ext.data.Store',
requires: ['project.model.city'],
model: 'project.model.city',
autoLoad: true,
data: [
{ country: 'Germany', city: 'Berlin' },
{ country: 'Italy', city: 'Rome' }
]
});
View with store:
Ext.define('project.view.cityAll', {
extend: 'Ext.Panel',
xtype: 'cityAllView',
config: {
items:[{
xtype: 'cityItemView',
store: 'project.store.cities',
}]
}
});
Custom component View:
Ext.define('project.view.cityItem', {
extend: 'Ext.Panel',
xtype: 'cityItemView',
config: {
items: [{
itemTpl: '{city}'
}]
}
});
You need to assign store to cityItemView instead of cityAllView. cityItemView is having template specified and needs to be loaded with data.
Ext.define('project.view.cityItem', {
extend: 'Ext.Panel',
xtype: 'cityItemView',
config: {
items: [{
xtype:'list',
itemTpl: '{city}'
store:'project.store.cities'
}]
}
});
If you want to set data into panel, then you'd need to call setData(). A panel can not load data from store directly. You can use list view instead so show city, country pair. cityView no longer needed store property that way.
Give this a try.
You can add load listener in store which would loop through records and create as many panels:
listeners : {
load: function( me, records, successful, operation, eOpts ){
var plist = [];
var cv = Ext.Create('project.view.cityAll');
if(successful){
var data = records[i].getData();
for(var i=0; i<records.length; i++){
plist.push({
xtype : 'cityItemView',
data : data
});
}
cv.add(plist);
}
// Now add cv to viewport or wherever you want
}
}
You have to change cityItemView to use data whichever way you want. If you are using initialize method you can access it like this.config.data
My goal with this project is to load Json that's outputted by a script on a web server so that I can display data in a List in Sencha Touch 2.
I've looked at countless examples including answers from other people's questions on this website and I still can't seem to figure out what the problem is with my code. I'm sure it's something very small or perhaps some rule that I'm unaware of, but I hope someone can point me in the right direction.
Here's my Model:
Ext.define('Sencha.model.Location', {
extend: 'Ext.data.Model',
config: {
fields: ['name','location','open','details']
}
});
Here's my Store:
Ext.define('Sencha.store.Locations',{
extend: 'Ext.data.Store',
requires:[
'Sencha.model.Location',
],
config: {
model: 'Sencha.model.Location',
storeId: 'Locations',
proxy: {
type: 'ajax',
url : 'http://url/to/locations.php?filetype=.json',
reader: {
type: 'json',
},
autoLoad: 'true'
}
}
});
Here's the view where I want it to show up:
Ext.define('Sencha.view.LocationList',{
extend: 'Ext.List',
alias: 'widget.LocationList',
xtype: 'locationlist',
config: {
title: 'What\'s Open #CU',
disableSelection: true,
itemTpl: '<img src="http://localhost/{open}.png" style="width:16px;height:16px;margin-right:8px;" />{name}<span style="font-size:9pt;margin-left:8px;color:#888;">{location}</span>',
store: 'Locations',
onItemDisclosure: true
}
});
Here's the JSON that's outputted(maybe it's a formatting problem that causes it to fail silently?)
{
"businesses":
{
"name" : "Baker's"
"location" : "4th Floor Uni Centre"
"open" : "open"
"details" : "This is some information."
}
}
You JSON is not valid. You forgot the commas :
{
"businesses":
{
"name" : "Baker's",
"location" : "4th Foor Uni Centre",
"open" : "open",
"details" : "This is some information."
}
}
Also, if you intend to send more than one business, you might want to change the JSON format to something like this :
{
"businesses":[
{
"name" : "Baker's",
"location" : "4th Foor Uni Centre",
"open" : "open",
"details" : "This is some information."
},
{
"name" : "Baker's",
"location" : "4th Foor Uni Centre",
"open" : "open",
"details" : "This is some information."
}
...
]
}
and then add the rootProperty: 'businesses' to you're proxy's reader like nuthan said.
Hope this helps
Add rootProperty:'businesses' in the reader: {
type: 'json',
rootProperty:'businesses'
} of your Store.
Is
http://url/to/locations.php
the same Location as your sencha touch app?
If not, than JsonP Proxy is needed. JsonP wraps Json data into function like context to make useable.
How to add a data to a json store if my data is coming from a back end AJAX call.
my store is as follows .
Ext.define('MyApp.store.GeographyMasterStore', { extend: 'Ext.data.Store',
requires: [
'MyApp.model.GeographyMasterModel'
],
config: {
model: 'MyApp.model.GeographyMasterModel',
storeId: 'geographyMasterStore',
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
}
}
});
And my model is as follows:
Ext.define('MyApp.model.GeographyMasterModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'Code'
},
{
name: 'Description'
},
{
name: 'Level_Code',
mapping: 'Level Code'
},
{
name: 'Name'
}
]
}
});
If I add the data like this
var geographyMasterStore = Ext.getStore('geographyMasterStore');
geographyMasterStore.add(<data from backend AJAX call>);
it does not show me the mapped field i.e. Level_Code
Usually I when add a record to the store like this :
Ext.create('App.model.MyModel', JSON.parse(response.responseText);
Where response is the response from an Ext.Ajax.request
Hope this helps
You need create a model:
var record = Ext.create('model.GeographyMasterModel', Ext.JSON.decode(response.responseText));
save the model:
record.save()
reload the store:
geographyMasterStore.load()
I'm trying to figure out how to read a tree structure like this into proper model instances:
{
"name":"root"
"kids":[
{
"name":"kid1",
"kids": [...] //More kids
},
{
"name":"kid2",
"kids": [...] //More kids
},
{
"name":"kid3",
"kids": []
},
...
]
}
Here are two of the models I've tried:
Ext.define('TreeNode', {
extend: 'Ext.data.Model',
config: {
fields: ['name'],
hasMany:{model: 'TreeNode', name: 'kids'}
}
});
//This one seems to work, but it simply loads
//generic objects into the "kids" property
//and not real model instances.
Ext.define('TreeNode', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'kids']
}
});
And the store:
Ext.define('TreeStructureStore', {
extend: 'Ext.data.Store',
config: {
autoLoad: false,
model: 'TreeNode',
proxy: {
type: 'ajax',
url: 'simple.json',
reader: {
type: 'json'
}
}
}
});
I cannot seem to get the model and store to work correctly. At best it will only read the topmost element. How can I get it to read recursively down and make the correct model instance tree?
http://www.sencha.com/forum/showthread.php?178848-Nested-JSON-and-hasMany-associations
Looks similar to a problem I had and was able to solve eventually (and posted the answer to in the Sencha Forum). The key point here is using the associationKey config property for the hasMany association, but check out the whole post.