Related
I'm new at sencha touch, and i'm having trouble using dataview with an ajax store.
Here follow my code:
On my app.js on the launch part:
Ext.define('SocializeApp.model.Friends', {
extend: 'Ext.data.Model',
config: {
fields: [
{name:'name' ,type:'string'},
{name:'id' ,type:'string'},
{name:'img' ,type:'string'}
]
}
});
Ext.define('SocializeApp.store.FriendStore', {
extend: 'Ext.data.Store',
config: {
model: 'SocializeApp.model.Friends',
storeId: 'FriendStore',
proxy: {
type: 'ajax',
url: 'http://socialize.localhost.com/friends.php',
reader: {
type: 'json',
rootProperty: 'friends'
},
autoLoad: 'true'
},
}
});
Ext.Viewport.add(Ext.create('SocializeApp.view.Main'));
In the Main.js
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
xtype: 'dataview',
store: 'FriendStore',
scrollable: {
direction: 'vertical'
},
tpl: ['{img} {id} {name}']
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
}
});
I'm kind of lost, i used the store as a variable to test and in the console it gave me the correct data, but no optout for this dataview.
FYI the JSON
{"friends":[{"name":"sakai","id":"123","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"124","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"125","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"126","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"127","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"128","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"129","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"110","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"111","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"}]}
I really appreciate any help.
Thx,
Try these (code has the ideas combined).
1 - Give your dataview an itemId, and load the store in your view initialize method. Might also want to try and set autoLoad to false.
2 - Sometimes I also explicitly give the full store reference rather than just the id, for ex Ext.getStore('FriendStore')
3 - Are you using MVC? did you declare your stores /models in your app.js?
Ext.application({
name: 'yourapp',
stores: ['FriendStore'],
models: ['Friends'],
launch: function() {
...
}
});
4 - Or, just thought of this.. change your tpl to 'itemTpl'
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar', 'SocializeApp.store.FriendStore'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
itemId: 'FriendsDataview',
xtype: 'dataview',
store: Ext.getStore('FriendStore'),
scrollable: {
direction: 'vertical'
},
itemTpl: ''.concat(
'<div>{img} {id} {name}</div>'
)
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
},
initialize: function(){
var store = Ext.getStore('FriendStore');
var dv = Ext.ComponentQuery.query('dataview[itemId=FriendsDataview]')[0];
dv.setStore(store);
store.load(function(){
console.log(this);
});
}
});
I have 3 view are "Home,Category,Info".
This Home panel :
This Category panel :
And This List panel :
In list panel.The navigation bar has different sizes of Home panel and Category panel.
How do I fix ?
Thank you.
----Update----
Code Home view:
Ext.define('Catalog.view.Home', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
config: {
// activeItem: 1,
id: 'mynavigationview',
navigationBar: {
items: [
{
xtype: 'button',
text: 'Categories',
id: 'category',
translate: true,
translationKey: 'navigationbar.category',
align: 'left',
action : 'Categories',
// handler: function(me) {
// var bar = me.up('navigationview').getNavigationBar();
// // bar[bar._hidden ? 'show' : 'hide']();
// }
}
]
},
title: 'All',
iconCls: 'list',
cls: 'home',
styleHtmlContent: true,
tabBarPosition: 'bottom',
items:[
{
title: "All Apps",
xtype: 'list',
id:'Applist',
itemTpl: new Ext.XTemplate(
'<img src="http://61.47.41.108:9999/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
'<span style="font-size:16px;">{name}</span><br>',
'<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
'</div>'
),
store: {
autoLoad: true,
fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
sorters: [{
property:'created_at',
direction:'DESC'
}],
proxy: {
type: 'jsonp',
url: 'http://61.47.41.108:9999/appinfos.json',
reader:{
type: 'json',
rootProperty:'appinfos'
}
}
}
}
]
}
});
Code List view:
Ext.define('Catalog.view.Navigation', {
extend: 'Ext.navigation.View',
xtype: 'navigation',
requires: ['Ext.data.Store'],
config: {
// navigationBar: false,
title: 'Categories',
items: [
{
xtype: 'list',
id: 'Catlist',
itemTpl: '<span style="font-size:16px;" id="cattname">{name}</span>',
store: {
storeId: 'myStore',
autoLoad: true,
fields: ['id','name'],
sorters: [{
property:'name',
}],
proxy: {
type: 'jsonp',
url: 'http://61.47.41.108:9999/categories.json',
reader:{
type: 'json',
rootProperty:'Catalog'
}
}
}
}
]
}
});
It is due to the styles added by styleHtmlContent: true. Try setting it on both the views, or remove it from both.
Based on newly created Sencha Touch 2 app as it is learned here.
Then I'd like to add my nested list - hierarchical menu tree and found that doesn't matter - my store inline or my store read from json - nothing displayed inside tab 'Menu'.
What's wrong?
Important files / code fragments:
MVC section in app.js:
// MVC
views: [
'Main'
],
models: [
'MenuItem'
],
stores: [
'MenuTree'
],
view.Main.js:
Ext.define('MobilePost.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.data.TreeStore',
'Ext.dataview.NestedList',
'Ext.data.proxy.JsonP',
'MobilePost.store.MenuTree'
],
config: {
tabBarPosition: 'bottom',
items: [
{
// From tutorial, working
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>'
].join("")
},
{
// From tutorial, working
xtype: 'nestedlist',
title: 'Blog',
iconCls: 'star',
displayField: 'title',
store: {
type: 'tree',
fields: [
'title', 'link', 'author', 'contentSnippet', 'content',
{ name: 'leaf', defaultValue: true }
],
root: {
leaf: false
},
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'
}
}
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function( nestedList, list, index, element, post ) {
this.getDetailCard().setHtml(post.get('content'));
}
}
},
{
// Mine, not working
xtype: 'nestedlist',
title: 'Menu',
iconCls: 'settings',
store: 'MenuTree'
}
]
}
});
Model - model.MenuItem.js:
Ext.define('MobilePost.model.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: [
'id', // Menu item id for events
'text', // Menu item text
{ name: 'leaf', defaultValue: false }
]
}
});
Store - store.MenuTree.js:
Ext.define('MobilePost.store.MenuTree', {
extend: 'Ext.data.TreeStore',
requires: [ 'MobilePost.model.MenuItem' ],
type: 'tree',
defaultRootProperty: 'items',
config: {
model: 'MobilePost.model.MenuItem',
/*
// TODO: inline store - uncomment to use
root: {
items: [
{
id: 'settings',
text: 'Settings',
items: [
{
id: 'shift',
text: 'Working shift',
leaf: true
},
{
id: 'users',
text: 'Users',
leaf: true
},
{
id: 'cash',
text: 'Cash',
leaf: true
}
]
}
]
}*/
// TODO: JSON store - comment for inline store
proxy: {
type: 'ajax',
url: 'menu.json'
}
},
// TODO: JSON store - comment for inline store
root: {}
});
JSON - menu.json (valid, passed check by jsonlint.com):
{
"items": [
{
"id": "settings",
"text": "Settings",
"items": [
{
"id": "shift",
"text": "Working shift",
"leaf": true
},
{
"id": "users",
"text": "Operators",
"leaf": true
},
{
"id": "cash",
"text": "Cash",
"leaf": true
}
]
}
]
}
At what point your store is loaded? Shouldn't you use autoLoad:true in your store?
also if you don't want to create and load your store with application load you should manually create store whenever required and set it to list
var treeStore = Ext.create('MobilePost.store.MenuTree');
treeStore.load();
and use this as store attribute in your view
{
// Mine, not working
xtype: 'nestedlist',
title: 'Menu',
id: 'myListId',
iconCls: 'settings',
store: treeStore
}
OR set the store if view is already created
Ext.getCmp('myListId').setStore(treeStore);
I'm following the video on the Sencha website, for creating my first application.
This is the video I'm following: Video
This is the code I'm using for the Blog tab:
Ext.define('GS.view.Blog',{
extend: 'Ext.navigation.View',
xtype: 'blogpanel',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP'
],
config: {
title: 'Blog',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: {
autoLoad: true,
fields: ['title', 'author', 'content'],
root: {
leaf: false
},
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'
}
}
}
}
}
});
In the Safari Console, it is giving me the following error on StoreManager.js:97:
TypeError: 'undefined' is not a valid argument for 'instanceof' (evaluating 'store instanceof Ext.data.Store')
What am I doing wrong?
add this code at line store:
store: new Ext.create('Ext.data.Store',{
autoLoad: true,
fields: ['title', 'author', 'content'],
root: {
leaf: false
},
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'
}
}
})
Im just trying to simply load some json data into my combobox using a basic data store. Here is my json data:
{"services": [{"id": 1, "name": "dropbox"}, {"id": 2, "name": "facebook"}, {"id": 3, "name": "twitter"}]}
Here is my extjs 4 code:
Ext.onReady(function(){
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'json',
url: '/account/service/list',
reader: {
root: 'services',
totalProperty: 'totalCount'
}
}
});
store.load();
Ext.create('Ext.panel.Panel', {
layout: 'auto',
title: 'VAC',
width: '100%',
renderTo: 'vac-app-window',
items: [{
xtype: 'tabpanel',
autoTabs:true,
activeTab: 0,
border:false,
defaults: {autoHeight:true, bodyStyle:'padding:10px'},
items: [{
title: 'Data Services',
items: [{
xtype:'combo',
store:store
}]
}]
}]
});
});
Everything is being done on localhost so no cross domain stuff. I've been going through documentation but just can't figure out what im doing wrong.
As always any tips is much appreciated!
Update:
I edited some changes to the datastore and am getting a bit farther:
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
proxy: {
type: 'ajax',
url: '/account/service/list',
reader: {
root: 'services',
type: 'json'
}
}
});
store.load();
Now when the page loads or I attempt to click the combobox the url it is addressing is:
GET /account/service/list?_dc=1318340688155&page=1&start=0&limit=25
From my reading this looks like jsonp but I dont know where the page,start, and limit params come from?
Update2:
Thanks to the help from Molecule Man I was able to sort this out:
Ext.onReady(function(){
Ext.define('ServiceList', {
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'ServiceList',
autoLoad: true,
proxy: {
limitParam: undefined,
startParam: undefined,
paramName: undefined,
pageParam: undefined,
noCache:false,
type: 'ajax',
url: '/account/service/list',
reader: {
root: 'services'
}
}
});
Ext.create('Ext.panel.Panel', {
layout: 'auto',
title: 'VAC',
width: '100%',
renderTo: 'vac-app-window',
items: [{
xtype: 'tabpanel',
autoTabs:true,
activeTab: 0,
border:false,
defaults: {autoHeight:true, bodyStyle:'padding:10px'},
items: [{
title: 'Data Services',
items: [{
xtype:'combo',
queryMode:'local',
emptyText: 'Select Service',
store:store,
displayField: 'name',
valueField: 'id'
}]
}]
}]
});
});
Hope this helps anyone else :)
Your combobox' config doesn't contain displayField (defaults to 'text') and valueField(defaults to displayField's value) which are required:
items: [{
xtype:'combo',
displayField: 'name',
valueField: 'id',
store:store
}]