Sencha Touch 2 Offline Caching with JsonP Proxy - list

Assuming that I have followed the Sencha Touch 2 Getting Started tutorial, and have a list populated by JsonP proxy data- how do I go about making cached data appear if the user is offline? Currently, the list is simply not displayed if there is no internet connection.
In the video tutorial, Ed briefly mentions that this can "easily be done" but did not provide a reference to where I might find this in the Sencha documentation.
Below is an example of my store object:
Ext.define('test.store.NewsListStore', {
extend : 'Ext.data.Store',
requires: ['test.model.NewsListModel', 'Ext.data.Request'],
config : {
model : 'test.model.NewsListModel',
storeId : 'news-list-store',
autoLoad: true,
proxy: {
type: 'jsonp',
url : 'http://example.com/jsonp',
config : {
noCache: false
}
},
grouper : {
groupFn : function(record) {
var unix_timestamp = parseInt(record.get("entry_date"));
var date = new Date( unix_timestamp*1000 );
return Ext.Date.format(date, 'F');
}
},
}
});

Have a look at this tutorial about taking a Sencha Touch app offline - it's not Sencha Touch 2 but it might point you in the right direction

Here is an example you can follow with localstorage:
http://www.robertkehoe.com/2012/11/sencha-touch-2-localstorage-example/
It uses Sencha Touch 2

Related

How to use the attribute 'url' of ol.source.OSM

I've deployed a local openstreetmap tile server and tried many times to show the map using openlayers3, but failed unfortunately.
Here's my experiment scene.
I deploy the tile server on port 80, and get the image correctly via http://127.0.0.1:80/osm_tiles/{z}/{x}/{y}.png. Besides, I place a django web on port 8099, and i can access the web page via http://127.0.0.1:8099/my/page. In the template page, i wrote like this
var layer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
ol.source.OSM.ATTRIBUTION
],
url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png'
})
});
var map= new ol.Map({
target : 'map_canvas',
loadTilesWhileAnimating: true,
view: new ol.View({
center:ol.proj.transform([116.391625,39.906813], 'EPSG:4326', 'EPSG:3857'),
zoom : 12
}),
layers:[layer]
});
The map_canvas shows nothing, but i can get the images from tile server in firebug.WHY?
Help me, many thanks!
Try adding crossOrigin: null to the source, like so:
var layer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: [
ol.source.OSM.ATTRIBUTION
],
url:'//127.0.0.1:80/osm_tiles2/{z}/{x}/{y}.png',
crossOrigin: null
})
});

Loading a single record with Ember 2.0 and Ember Data 2.0

I've come unstuck when trying to fetch a single record using Ember Data 2.
The server is designed to respond to a GET request like this:
GET http://server/api/results/1
with this as a result:
{
"results" : [
{
"id": 1,
"catname": "Category 1",
}
]
}
The Ember route code looks like this:
export default Ember.Route.extend({
model: function() {
return this.store.find('game',12);
}
});
The problem is that there doesn't appear to be a network request going out (a previous findAll fetch has worked, so I don't think it's the adapter), and there is an error I have not been able to find informaiton on:
Uncaught TypeError: Cannot set property'crossDomain' of undefined
Does anyone have any idea what this could be, of hint at how I might track this down?
In 1.13 new methods was introduced. You should use findRecord instead of find.
Also, ember expects following response when fetching a single object:
{
"result" :
{
"id": 1,
"catname": "Category 1",
}
}

soap based web service in BB 10

I am just started development in BB10 .I need to call soap based web service from URL .I google it and found one weather example .But it not help me.Actually I want to to call a method Example like
getVersionReturn .
from url so that my concept clear .Then I will call my other methods
here is my url.
http://railapps.firstgroup.com/FirstGroupRailApps/services/RailAppsCAWS?wsdl
The return value is response like :1.3 .
can you help me to call one method on button click ?
Ok this isn't full solution, but it will show you the important part (this is cascades solution)
Button {
text: "click"
onClicked: {
dataSource.load();
}
}
and
attachedObjects: [
DataSource {
id: dataSource
source: "http://railapps.firstgroup.com/FirstGroupRailApps/services/RailAppsCAWS?wsdl"
type: DataSourceType.Xml
remote: true
onDataLoaded: {
console.log(JSON.stringify(data))
}
onError: {
console.log(errorMessage)
}
}
]
so all you need to do is to search through that data.

How do I add custom HTML in Rally sdk 2.0?

I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.

How to query JSON file in emberjs

I´ve never work with JSON before, but have with xml, php, mysql. I have a populated database on the server and would like to develop a web application with ember.js to interact with this data (CRUD).
Where should I start? I know ember-data has most of the things I would need when developing, but I'm unsure of how to start.
Since the database holds different tables, is it possible to keep this information in one json file? is it the appropriate way to do it? How do I automatically produce this json file from the server?
you can start with a read query :
You upload a file sample with the json syntaxe on your server (or use your json service if it's enable) to start quickly. Test that you can access to it in your browser, for example :
[ {"id": 1, "desc": "hmarchadour"}, {"id": 2, "desc": "moderator"} ]
Well now you take/create a view in your embjer js and you can use JQuery to call this file/service :
Ember.View.create({
templateName : "templateName" // you
stuff : [],
didInsertElement : function() {
$.ajax({
type : "GET",
url : <url-of-your-sample>,
dataType: "json",
success : function(result) {
var tmpStuff = json2Stuff(result);
this.set('stuff', tmpStuff);
},
error : ... }
);
}
});
Regards,