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.
Related
For some reason my form keeps on doing a GET instead of posting the data to the URL I configured.
My form looks like this:
Ext.define('App.view.LoginFormPanel', {
extend : 'Ext.form.Panel',
xtype : 'loginForm',
id : 'loginForm',
config : {
title : 'Login',
iconCls : 'user',
ui : 'light',
items : [
{
xtype : 'fieldset',
title : 'Login',
items : [
{
xtype : 'textfield',
label : 'Login',
name : 'j_username',
required : true,
readOnly : false
}, {
xtype : 'passwordfield',
label : 'Password',
name : 'j_password',
required : true,
readOnly : false
}
]
}, {
xtype : 'button',
ui : 'confirm',
text : 'Login',
action : 'login'
}
]
}
});
And my controller that submits the form looks like this:
......
login : function() {
loginForm.submit({
url : 'j_spring_security_check',
method : 'POST'
});
},
......
I tried to put the url and method on the form too put no luck either :(.
Does anybody know what I am doing wrong?
Try to set standardSubmit to true. By default Touch forms are submitted via ajax GET method, but standardSubmit will send POST. Note that parameters will be encoded in http payload, not in the url params.
Cheers, Oleg
My answer is for those who have a problem with submitting a form with POST method.
If you are new to Sencha and you have a form which is submitting nothing, you probably followed this tutorial Building your first app
It has a problem. Form items MUST HAVE NAME which is missing in the example.
Items should look something like the following:
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'textareafield',
name: 'message',
label: 'Message'
}
]
I've got these models :
Ext.define('TestApp.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'username', type: 'string'},
],
proxy: {
type: 'localstorage',
},
},
});
Ext.define('TestApp.model.Config', {
extend: 'Ext.data.Model',
config: {
hasOne : {model: 'TestApp.model.User', name: 'user'},
proxy: {
type: 'localstorage',
},
}
});
I've tried to save a config entry like this :
var david = Ext.create('TestApp.model.User', {username: 'david'})
david.save();
var config = Ext.create('TestApp.model.Config');
config.setUser(david);
config.save();
When I restart the application, I have my user entry saved and my config entry saved but, my association is not saved:
config.getUser() -> I get undefined
According to Mitchell Simoens storing associated data isn't supported.
Unsure if it helps in your case, but an approach is sketched (that approach also seems to adress my own current (unrelated) problem).
Hope it helps
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'
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.
I have the following json :
{"service":
{"description":"Export a list of amendments.","id":"504e1bf57e8d2fdd92b6c316cd000b25","name":"AT4AM_AmendmentsList","notes":"Export a list of amendments in a defined format, Word or XML.\r\n\r\n\"keywords\" : [ \"AT4AM\", \"DST\", \"Amendment\", \"Export\", \"Word\", \"XML\" ]","revision":"2-cd375cfd296ba97e934f12794d4930e9","status":"study","type":"entity",
"versions":[{"description":"v1.0 description...","id":"504e1bf57e8d2fdd92b6c316cd0017c0","version":1}]}}
I would like to display the list of versions into a grid.
here is my model :
Ext.define('XXXX.model.Version', {
extend: 'Ext.data.Model',
fields : [ {
name : 'id',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'version',
type : 'string'
}],
belongsTo: 'XXXX.model.Service',
proxy: {
type: 'rest',
id: 'id',
url : 'http://localhost:8080/xxxxx/services/service',
reader: {
type: 'json',
root: 'versions'
}
}
});
Thanks for help
Medley
use root: 'service.versions' in your reader's config.
Here is the solution I found :
1 - I added this to the model 'Service'
{type: 'hasMany', model: 'XXXX.model.Version', name: 'versions'}
2 - I used the configured RestProxy to make a GET request
Ext.ModelManager.getModel('XXXX.model.Service').load(serviceId, {
success: function(service) {
// Now, it is possible to access to all the versions of a service
service.versions().each(function(version) {
listOfVersions.push(version.data);
});
}
});
Regards
Medley