Data not loading into List via JSONP Sencha Touch 2 - sencha-touch

I have followed a Sencha guide step-by-step but I don't seem to be getting a response from my server. I'm not getting any errors in the console so I'm a bit stumped. Any help would be amazing.
Here is the store config in my view
store: {
fields: ['title', 'description', 'time', 'date', 'image', 'longdesc'],
proxy: {
type: 'jsonp',
url: 'http://mydomain.co.uk/scheduledata.json',
reader: {
type: 'json',
rootProperty: 'scheduleData'
}
}
},
itemTpl: '<div class="white-circle">{time}</div> <div class="list-title">{title}</div> <div class="list-desc">{description}</div><div class="arrow-right"></div>'
and the JSON file hosted on my server.
{
"scheduleData" : [
{
"title" : "Event One",
"description" : "Meet and Greet",
"time" : "10:45",
"date" : "Friday",
"image" : "./resources/imageone.jpg",
"longdesc" : "This is a longer description"
},
{
"title" : "Event Two",
"description" : "Q and A",
"time" : "11:00",
"date" : "Friday",
"image" : "./resources/imagetwo.jpg",
"longdesc" : "This is a longer description still"
}
]
}
UPDATE: Here is the full JS file with config:
Ext.define('scheduleApp.view.Home', {
//extend: 'Ext.Panel',
//xtype: 'homepanel',
extend: 'Ext.navigation.View',
xtype: 'schedulepanel',
id: 'sched',
config: {
navigationBar: {
hidden: true
},
title: '<span class="logo"></span>',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
flex: 2,
items: [
{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
html: '<img src="./resources/map.jpg" width="100%" height="100%"/>'
}
]
}
]
},
{
xtype: 'container',
flex: 5,
layout: {
type: 'fit'
},
items: [
{
xtype: 'list',
store: {
type: 'tree',
sorters: 'date',
fields: ['title', 'description', 'time', 'date', 'image', 'longdesc'],
proxy: {
type: 'jsonp',
url: 'http://www.mydomain.co.uk/scheduledata.json',
reader: {
type: 'json',
rootProperty: 'scheduleData'
}
}
},
itemTpl: '<div class="white-circle">{time}</div> <div class="list-title">{title}</div> <div class="list-desc">{description}</div><div class="arrow-right"></div>'
}
]
}
]
}
]
}
});

did you try to set the store to autoload: true?

Related

view access a function defined in controller (best way)

I want my view access a function was defined in my controller.
If i define a function out of define in controller the code works if not i get the error 'Uncaught ReferenceError: refreshSelection is not defined'
Whats is wrong?
View
initComponent: function() {
this.dockedItems = [
{
xtype: 'toolbar',
items: [
{
text: 'Importar',
action: 'selimp',
tooltip: 'Importar TXT'
},{
text: 'Excluir',
action: 'delete',
tooltip: 'Deletar Registros'
},{
text: 'Excluir Todos',
action: 'deleteAll',
tooltip: 'Deletar todos os Registros'
},{
text: 'Transferir Dados',
action: 'transfDados',
tooltip: 'Transferencia de registros'
}
]
},{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: 'GridStore',
displayInfo: true,
emptyMsg: "Nenhum registro encontrado."
}
];
this.callParent(arguments);
this.getView().on('refresh', refreshSelection , this);
this.selModel.on('select', selectRow , this);
this.selModel.on('deselect', deselectRow , this);
}
Controller
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
stores: ['GridStore'],
models: ['Espelho'],
views: ['GridView'],
refs: [ {ref: 'GridV',selector: 'grid'} ],
init: function() {
//declaracao dos controles dos botoes
this.control({
'gridV': {
deselect: this.deselectRow
},
'gridV': {
select: this.selectRow
},
'gridV': {
refresh: this.refreshSelection
}
});
},
selectRow: function(){
console.log('selectRow-1');
},
deselectRow: function(){
console.log('deselectRow-1');
},
refreshSelection: function(){
console.log('refreshSelection-1');
},
........
Man you're doing it wrong!
You can't use the Controller Reference to place a controller action.
Instead use the same CSS-like selector of your grid.
All functionality must be in your controller. The controler action (this.Control) will bind the function with the event.
Your controller must look like this:
Ext.define('ImpPdf.controller.GridControl', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'GridV',
selector: 'grid'
}
],
selectRow: function(rowmodel, record, index, eOpts) {
console.log('Foo');
},
init: function(application) {
this.control({
"grid": {
select: this.selectRow
}
});
}
});
In your view just eliminate the business code.
Ext.define('ImpPdf.view.MyViewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.grid.Panel',
'Ext.grid.column.Number',
'Ext.grid.column.Date',
'Ext.grid.column.Boolean',
'Ext.grid.View',
'Ext.toolbar.Paging'
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
title: 'My Grid Panel',
store: 'GridStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'GridStore'
}
]
}
]
});
me.callParent(arguments);
}
});

Why navigation bar have different sizes ? - Sencha Touch

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.

How to make carousel Infinite with dynamic data(using url) in sencha

Since 2 days, I am trying to create Infinite carousel with desired data but could not get it. I also tried Kitchen Sink (Touch Style). My theme is also same as touch style. I have categories and If I click one category then display associated respective Words , which is more different carousel items.
I don't know how many words are there. but I want to display 7 Words in one swiping view(If i have 35 then i need 5 view), which is carousel items, Just like kitchen sink(Touch style).
Source: http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
and Click Dress and you have to show dressess.
I want to display like this only.
I just displayed categories but could not display category respective words.
What I have done until now:
View/CategoryPage.js
Ext.define('MyApp.view.CategoryPage', {
extend: 'Ext.Container',
alias: "widget.categorypage",
config: {
layout: 'vbox',
items: [
{
xtype:'globalmenu',
},
{
xtype: 'toolbar',
//docked: 'top',
cls:'roundedToolbar',
title: 'Categories',
},
{
xtype:'panel',
flex: 1,
layout: 'fit',
cls: 'category-data',
items:[
{
scrollable: {
direction: 'vertical',
directionLock: true,
},
xtype: 'list',
layout: 'fit',
itemHeight: 20,
store: 'CategoryStore',
itemTpl: [
'<div class="categoryListings">',
'<tpl for="data">',
'<span onClick="catOption({cat_id})">{category_name}</span> ',
//'<span >{category_name}</span> ',
'</tpl>',
'</div>',
].join(''),
listeners: {
itemtap : function(list, index, target, record, event,cat_id) {
//var id = index;
var id = index + 1;
console.log( "iOS" + id);
catOption(id);
}
}
}
]
},
]
}
});
function catOption(id){
console.log("ID--"+id);
var token= '650773253e7f157a93c53d47a866204dedc7c363';
var url = 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words_with_definition/catID/'+id+'/SDSILLYTOKEN/'+token;
var stProxy = Ext.StoreMgr.get("CategoryWordDisplayStore").getProxy();
stProxy.setUrl(url);
Ext.getStore("CategoryWordDisplayStore").load();
Ext.Viewport.remove(Ext.Viewport.animateActiveItem({ xtype: 'categorywordsdisplay' },{type:'slide'}), true);
}
If one of the Category Click then Display respective words,
Ext.define("MyApp.view.CategoryWordDisplayMain", {
extend: 'Ext.Container',
alias: "widget.categorywordsdisplay",
requires:"Ext.dataview.List",
config: {
layout: 'vbox',
items: [
{
xtype: 'globalmenu',
flex: 1,
},//end of top menu
{
xtype:'panel',
scrollable: false,
flex: 3,
layout: 'fit',
items:[
{
flex: 1,
xtype: 'toolbar',
/* title: "Help", */
cls:'roundedToolbar',
title: 'value',
docked: 'top',
itemId:'titleid',
id:'titleid',
},
{
xtype: 'list',
scrollable: true,
itemId: 'demolist',
// html:'Test',
loadingText:"Loading ....",
emptyText: "<div class=\"words-list-empty-text\">No Words found.</div>",
//onItemDisclosure: true,
// grouped: true,
itemTpl: [
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2 class="noStar" onclick = "addtofavourite({word_id})"><b>{name}</b> </h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div class="paragraph-def" onclick = "ratingStar({def_id})">','{defintion}',
'<span class="authorBox"><i>Author: {author}</i></span>',
'</li>' ,
'</div>',
'</ul></li>',
'</tpl>',
'<div class="yesStar" ></div>',
'</ul>',
'</tpl>',
'</div>'
].join(''),
store: 'CategoryWordDisplayStore',
}
]
},//end of menuitems
]
},
initialize : function(){
this.callParent();
var store = Ext.getStore('CategoryWordDisplayStore');
console.log("category ----"+store.getAt(0).getData().name);
this.down('toolbar').setHtml(store.getAt(0).getData().category);
},
});
function home(){
console.log("Home CategoryPage CLick");
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add([
{ xtype: 'mainmenuview' }
]);
}
Category Display Model
model/CagegoryModel.js
Ext.define('MyApp.model.CategoryModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'cat_id'},
{name: 'category_name'},
],
},
});
and
Ext.define('MyApp.model.CategoryModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category_name',
],
belongsTo: "MyApp.model.CategoryModel"
}
});
Word Display Model After Click Category:
Ext.define('MyApp.model.CategoryDisplayModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryDisplayModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name:'name'},
{name: 'category'},
{name: 'author'},
],
}
});
and
Ext.define('MyApp.model.CategoryDisplayModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category',
'name',
],
belongsTo: "MyApp.model.CategoryDisplayModel"
}
Stores:
Category Display Store:
Ext.define('MyApp.store.CategoryStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryModel',
autoLoad:true,
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363',
reader:
{
rootProperty:''
}
}
}
});
});
Word Display Stores:
Ext.define('MyApp.store.CategoryWordDisplayStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryDisplayModel',
autoLoad:true,
id:'Category',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words/',
reader:
{
rootProperty:''
}
},
}
});
I have not created any controller yet.
JSON: Category Json and
First Category(catID=1) Word Json If i swip right then cat id change 2 and again swip right then 3 and so on. if I swip left from the 3 cat id, then goto cat id 2.
please hep me out.Thank in Advance.

Empty nested list display

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);

Defining View in ExtJS. "Uncaught TypeError: Cannot call method 'substring' of undefined"

I am trying to define a view but I am getting an error
Uncaught TypeError: Cannot call method 'substring' of undefined
/app/view/Sidebar.js
Ext.define('SimpleTodo.view.Sidebar', {
extend: 'Ext.panel.Panel',
alias: 'widget.sidebar',
config: {
title: 'Projects & Todo Lists',
tbar: [
{
xtype: 'button',
text: 'Add Project'
},
{
xtype: 'button',
text: 'Add Todo List'
}
],
//store: Ext.data.StoreManager.lookup('projects'),
html: 'Hello world',
width: 200
}
});
Then tried to use it in my app.js
Ext.application({
name: 'SimpleTodo',
views: [
'Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
}
});
What am I missing? Have I defined my views and used it correctly?
Actually it must be like that:
Ext.application({
name: 'SimpleTodo',
requires:[
'SimpleTodo.view.Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
});
}
});