I've got my sencha-touch app wired up as I believe it should be, and when I load it into Chrome, the Javascript console doesn't throw any errors. The WebService is finally returning the appropriate data, yet for some reason I can't for the life of me figure out why the panel is blank.
Here's the APP URL
http://rpcm.infinitas.ws/
Here's the WebService URL
http://rpc.infinitas.ws/Vimeo/Read?_dc=1308083451839&limit=25&callback=stcCallback1001
And here is some relevant code.
CONTROLLER
rpc.controllers.VimeoController = new Ext.Panel(
rpc.views.Vimeo.index
);
VIEW
rpc.views.Vimeo.index = {
id: 'VideoView',
title: 'Videos',
tpl: rpc.templates.VimeoTemplate,
iconCls: 'tv',
dockedItems: [{ xtype: 'toolbar', title: 'Videos'}],
store: 'rpc.stores.VimeoStore'
};
STORE
rpc.stores.VimeoStore = new Ext.data.Store({
id: 'VimeoStore',
model: 'rpc.models.VimeoModel',
proxy: {
type: 'scripttag',
url: WebService('Vimeo', 'Read'),
method: 'GET',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});
MODEL
rpc.models.VimeoModel = Ext.regModel('rpc.models.VimeoModel', {
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'}
]
});
TEMPLATE
rpc.templates.VimeoTemplate = new Ext.XTemplate([
'<tpl for=".">',
'<div>',
'{title}',
'</div>',
'</tpl>'
]);
JSON RESPONSE
stcCallback1001({"results":[{"id":25036464,"title":"Power of A Surrendered Life: The Farewell Sermon"},{"id":25036610,"title":"Child Dedication June 2011"},{"id":24734142,"title":"Power of A Surrendered Life: Connection"},{"id":24884833,"title":"Finance Update June 2011"},{"id":24587711,"title":"Papua, Indonesia Sharing May 2011"},{"id":24232427,"title":"ICHTHUS: Coming King"},{"id":23868560,"title":"ICHTHUS: Healer"},{"id":23486615,"title":"ICHTHUS: Sanctifier"},{"id":23211649,"title":"ICHTHUS: Saviour"},{"id":23867961,"title":"Elder Announcement re: Brent Trask"},{"id":22998163,"title":"Triumph of Grace: Risen Lord"},{"id":23687914,"title":"Triumph of Grace: Reigning King"},{"id":23692076,"title":"KINGDOM now: For Thine Is The Kingdom"},{"id":23694183,"title":"KINGDOM now: Deliver Us From Evil"}],"success":true});
Any help or direction will be greatly appreciated.
The example response you provided looks like JSONP instead of plain JSON. You probably want an Ext.data.proxy.JsonP.
To use this, you could change your store to look like this:
rpc.stores.VimeoStore = new Ext.data.Store({
id: 'VimeoStore',
model: 'rpc.models.VimeoModel',
proxy: {
type: 'jsonp',
url: WebService('Vimeo', 'Read'),
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});
Best of luck to you!
remove the '' from the view.
writelike this:
store: rpc.stores.VimeoStore
Related
Why i can't use JSONP Store with this url http://www.sozler.im/rest/categories
When i am trying on Sencha Architect, right click on Store/Load Data it gives an error, but it works on browser
Here is the source
Ext.define('SozlerimMobile.store.CategoryStore', {
extend: 'Ext.data.Store',
requires: [
'SozlerimMobile.model.Categories',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config: {
autoLoad: true,
autoSync: true,
model: 'SozlerimMobile.model.Categories',
storeId: 'CategoryStore',
proxy: {
type: 'jsonp',
extraParams: {
Status: 'Active'
},
url: 'http://www.sozler.im/rest/categories/',
reader: {
type: 'json',
clientIdProperty: 'id',
idProperty: 'id',
rootProperty: ''
}
}
}
});
The webservice has to return JSONP (JSON with function callback - see http://json-p.org/)
The more info can be found in: https://stackoverflow.com/a/2067584/282834
I have two lists in 2 separate tabs, both hooked up to a server side database. I'm attempting to set up list paging and on one of the lists its functioning exactly as it should be. For the other list, the model and store have all the same settings as the list that pages properly but no 'Load More..." text shows up at the bottom for this list.
With regards to the list paging plugin, both lists are basically exactly the same as each other (ie the Store, Model, 'List' view) but on one the paging just does not work. Does anyone have any idea what could possibly be causing this?
Editing with some more information:
I'm using Chrome to develop. Looking at the Network I seem to be getting JSON that looks right, for the one thats not working it's returning 8 records, and the total property returned is 13 (this makes sense because I've got my page size set to 8).
The Store from list that does NOT work
Ext.define("IdeaBank.store.SharedProblems", {
extend: "Ext.data.Store",
required: "IdeaBank.model.SharedProblem",
config: {
model: "IdeaBank.model.SharedProblem",
clearOnPageLoad: false,
pageSize: 8,
proxy: {
type: 'ajax',
api: {
create: "http://mywebsite.com/submitProblem.php?action=create",
read: "http://mywebsite.com/submitProblem.php?action=read",
update: "http://mywebsite.com/submitProblem.php?action=update",
destroy: "http://mywebsite.com/submitProblem.php?action=delete",
},
reader: {
type: 'json',
rootProperty: "problems",
totalProperty: "total",
}
},
autoLoad: true
}
});
The Store from list that does work
Ext.define("IdeaBank.store.SharedSolutions", {
extend: "Ext.data.Store",
required: "IdeaBank.model.SharedSolution",
config: {
model: "IdeaBank.model.SharedSolution",
clearOnPageLoad: false,
proxy: {
type: 'ajax',
api: {
create: "http://mywebsite.com/submitSolution.php?action=create",
read: "http://mywebsite.com/submitSolution.php?action=read",
update: "http://mywebsite.com/submitSolution.php?action=update",
destroy: "http://mywebsite.com/submitSolution.php?action=delete",
},
reader: {
type: 'json',
rootProperty: "solutions",
totalProperty: "total",
}
},
pageSize: 8,
autoLoad: true
}
});
List view from the one that does NOT work
Ext.define("IdeaBank.view.SharedProblemsList", {
extend: 'Ext.dataview.List',
alias: 'widget.sharedproblemslist',
requires: ['Ext.plugin.ListPaging'],
config: {
autoLoad: true,
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
}
],
loadingText: "Loading...",
emptyText: [
"</pre><div class='notes-list-empty-text' style = 'padding: 2em;'>",
"<p>There are no problems listed for the category you have selected.</p>",
"</div><pre>"
].join(""),
onItemDisclosure: true,
itemTpl: [
"</pre>",
"<div class = 'list-item-title'><span style = 'margin-right: 5px; color: #25E014; font-size: 0.7em;'>{rating}</span> {problem}</div>",
"<pre>"
].join(""),
}
});
List view from the one that does work
Ext.define("IdeaBank.view.SharedSolutionsList", {
extend: 'Ext.dataview.List',
alias: 'widget.sharedsolutionslist',
requires: ['Ext.plugin.ListPaging'],
config: {
autoLoad: true,
plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
}
],
loadingText: "Loading...",
emptyText: [
"</pre><div class='notes-list-empty-text' style = 'padding: 2em;'>",
"<p>There are no published solutions for the category you have selected.<p>",
"</div><pre>"
].join(""),
onItemDisclosure: true,
itemTpl: [
"</pre>",
"<div class = 'list-item-title'><span style = 'margin-right: 5px; color: #25E014; font-size: 0.7em;'>{rating}</span> {title}</div>",
"<pre>"
].join(""),
}
});
Make sure that you implement the paging logic in your server side codes. You have to supply the functionality of sending page by page. Maybe "submitSolution.php" does not send the data partially.
I'm developing an app in Sencha Touch 2.0 that is supposed to parse JSON through a web service that resides on a different domain.
I'm stuck parsing JSON. If I use nodes with names like title, author description link etc then it works perfectly.
But if I use other names for nodes then it does not display anything.
Here is the JSON response I'm trying to parse:
http://stassuet.byethost15.com/services/test/index.php
This is what I'm doing to parse the response in Sencha app:
Ext.define('GS.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'GS.model.MainEvent',
'Ext.data.proxy.JsonP',
'Ext.data.proxy.Rest'
//'GS.util.JsonpX'
],
config: {
autoLoad: true,
model: 'GS.model.MainEvent',
storeId: '55',
headers: {
"Accept": "text/xml"
//"access-control-allow-origin": "*",
//"Origin": "goodnews.pk",
//"Referer": "goodnews.pk"
},
method: 'GET',
callbackKey: 'myFunction',
proxy: {
type: 'jsonp',
url: 'http://stassuet.byethost15.com/services/test/index.php',
reader: {
type: 'json',
rootProperty: 'albums.images'
}
}
}
});
Where am I going wrong?
You seem to have a lot of configurations set even though you don't need them. For example:
headers
method
callbackKey
Is there a reason for this?
Anyway, using this class, everything loads as it should:
Ext.define('Example.store.SO', {
extend: 'Ext.data.Store',
config: {
autoLoad: true,
fields: [
'name',
'author',
'last_modified'
],
proxy: {
type: 'jsonp',
url: 'http://stassuet.byethost15.com/services/test/index.php',
reader: {
rootProperty: 'albums.images'
}
}
}
});
I am using Extjs 4 ComboBox with remote mode. but when i typed any character data is not filtered. and even focus is changed only for first 12 value.
I am new to Extjs 4. Please help me how to do this.
my code is:
Ext.define('MyGroup.combo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.mycombo',
emptyText:'select keyword',
store: keywordStore,
valueField:'name',
displayField:'name',
mode: 'remote',
autoSelect: false,
selectOnFocus:true,
//shadow:true,
//forceSelection: false,
//triggerAction: 'all',
hideTrigger:true,
//multiSelect:true,
typeAhead:true,
minChars:1
});
Ext.define('keywordModel', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url : '/keywordServlet',
method:'POST',
reader: {
type: 'json',
root: 'rows'
//,totalProperty: 'totalCount'
}
},
fields: [
{name: 'name', mapping: 'name'}
]
});
var keywordStore = Ext.create('Ext.data.Store', {
// pageSize: 10,
model: 'keywordModel'
});
As per my knowledge i think this will be helpful for you:
Ext.define('MyGroup.combo', {
extend: 'Ext.form.ComboBox',
alias: 'widget.mycombo',
initComponent: function() {
this.callParent([arguments]);
}
});
var keywordStore = Ext.create('Ext.data.SimpleStore',{
fields: ['id', 'name'],
data: [[1, 'mr'],[2, 'mr(yes)'],[3, 'mr(no)'], [4, 'example'], [5, 'example(yes)'],[6,'example(no)'],[7,'sample'],[8,'sample(yes)'],[9,'sample(no)'],[10,'mrs'],[11,'mrs(yes)'],[12,'mrs(no)']]
});
Ext.widget('mycombo',{
xtype : 'combo',
emptyText:'select keyword',
store: keywordStore,
valueField:'name',
displayField:'name',
mode: 'remote',
autoSelect: false,
selectOnFocus:true,
//shadow:true,
//forceSelection: false,
//triggerAction: 'all',
hideTrigger:true,
//multiSelect:true,
typeAhead:true,
minChars:1,
renderTo :document.body
});
And one more thing is no one is trying to answer each and every question,but every one is trying to help some body like us:-)
I am using a grid panel in which I need to make a column as a link(It should look like link-with no action). I am using listener in the gridpanel and on click of a cell its working fine. Only thing is 1st column should look like a link. But how to put href="#" I am not sure. This is my code:
var addressDetailsStore = Ext.create('Ext.data.Store', {
id:'addressDetailsStore',
autoLoad: true,
fields:
[
'addressType',
'street1',
'street2',
'province',
'city',
'country'
],
proxy: {
type: 'ajax',
url: 'resources/json/addressDetails.json', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
}
}
});
Ext.define('iOMS.view.common.addressView', {
extend: 'Ext.grid.Panel',
alias: 'widget.AddressViewPanel',
layout: 'fit',
collapsible: true,
title:'Address',
store: addressDetailsStore,
listeners:{
cellclick:function (iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
// Getting the event and I am doing logic here..
}
I just want 'addressType' columns appear like a link and I dont know where to put href...
Thanks for your responses.
-Praveen
You could also use a template column:
columns: [
{ text: 'External Link', xtype: 'templatecolumn', tpl: '{title}'}
]
You can specify the columns you want, and for the column with just a link, add a renderer. This example might help you.
var template = new Ext.XTemplate(
' ').compile();
columns:[
{
header: "",
renderer: function () {
return template.applyTemplate();
}
},
You can use renderer function like as follow
columns: [
{
header: 'number',
dataIndex: 'number',
flex: 1,
renderer: function(number) {
return Ext.String.format('{0}', number);
}
},