how to connect MySql db with sencha touch application - sencha-touch

I'm new to Sencha and have been reading tons of documentation but what I haven't been able to find is the proper way to make a connection to my MySQL DB, Could someone point me in the right direction.

You don't really "connect" to a database with a Sencha Touch application. You have to create some kind of API for it to interact with. So wherever you database is hosted you might have a file like "users.php", inside that file you would have code that pulls whatever you need from the database (or inserts data into the database) and then outputs it to the browser in a JSON format.
Then in your Sencha Touch application you would make an Ajax request to that page like this:
Ext.Ajax.request({
url: 'https://www.example.com/users.php',
method: 'post',
params: {
data: data
},
success: function(response){
}
});
or you could define a proxy in your models or stores like this:
proxy: {
type: 'ajax',
api: {
create: 'http://example.com/users.php?action=create',
read: 'http://example.com/users.php?action=read',
update: 'http://example.com/users.php?action=update',
destroy: 'http://example.com/users.php?action=destroy'
},
reader: {
rootProperty: 'users'
}
}
I've written a pretty in depth tutorial if you want some more details: http://www.joshmorony.com/part-1-sencha-touch-email-facebook-log-in-system-with-php-mysql-backend/

Related

It is possible to have an combobox with two stores in Ext js 4.2?

I have to make a live search , and after hours spent on google I decided to ask here if anyone have an ideea how can I make an live search( using or not combobox) in Ext JS but (the triky part). I have 2 data sets . One data set from one URL and and second from another URL.
I dont know how to start or how can I make the request when I type something in my search box to return small data set first and when is completly loaded second data set ( is much bigger).
Something like when I type "computer" in search field in first block to show me some things related to computers (first request that have few data) after that in second block to show me more thing related to computer when request is over( second request lot of data).
I need this thing because in one of my request i have over 10 k product and i dont want to let user w8 until the request is done, and to show the other request that have fewer data. until the first is done.
I forgot to mention that i want to make both request in the same time and asynchronous.
My solution for exactly this kind of problem was:
Creating a store dedicated only for the combobox content.
When one of the two "source" stores loads data, they push the records into the combo-store.
You also have the reference between the records automatically, so if a record in source-store 1 or 2 is removed, it also disappears in your combostore- and so in your combobox, like magic! Here is the key, for pushing data on load in another store:
http://serversideguy.com/2012/01/31/ext-js-4-merging-store-data/
best regards, hope that helps, write if you need further sugggestion / info on this solution.
If the data is really vital, you can try loading up on memory when the application starts.
Create the stores you need on launch() of the app, load the data and the use it everywhere you want. You can do this on your controller launch() too, to your controller references and granulate this as you wish.
Ext.application({
name: 'Blog',
models: ['Post', 'Comment'],
controllers: ['Posts', 'Comments'],
launch: function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
Ext.create('Ext.data.Store', {
model: 'User',
storeId: 'userStore',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
}); }
});

Store contains only data inside "raw" property

I'm having strange problem with my store inside ExtJS. My ASP.NET MVC3 controller returns JSON:
My store:
Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',
config: {
// I know the model works
model: 'MyApp.model.User',
storeId: 'Users',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'users/read',
reader: {
type: 'json',
root: 'users'
// also tried this
rootProperty: 'users'
}
}
}
});
Now, when I connect this store to the grid inside ExtJS 4.2.1, the grid shows TWO rows but without data. When I console.log(store) I see the data only inside raw property, not inside data property.
Does anyone know what's the problem? Why isn't there any mapping? The grid's dataIndex is also the same as Models fields (I've done this a thousand times with PHP, I don't know where is the problem here.)
One more thing I've tried. I've tried renderer: function(value) { console.log(value); } inside grid's columns and I was just getting undefined.
Edit: this is how the JSON actually looks like:
Try using root: 'users' not rootProperty. If not specified root defaults to ''.
Sencha Docs
SENCHA what the hell?! Sencha Touch 2 always says put everything in config?
Now when I do that in ExtJS, everything breaks?
I removed everything from config: {} and now it works great.

ExtJS4 / Sencha Touch 2: Reuse data (loaded into store) in different views with different sorting

I have data in an external database which can be accessed via JSON. Now I want to provide different views on these data sets (eg. different sorting, ..). Is it possible to use one single store for this or do I need two stores accessing the same URL except with a different sorter?
My example code looks like this:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],
config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
url: 'http://localhost/index.php?data=MyData&format=json',
reader: {
type: 'json'
}
},
sorters: [
{
direction: 'DESC',
property: 'MyRating'
},
{
direction: 'ASC',
property: 'MyLabel'
}
] } });
And one view should now render a list sorted by the rating and a second one should display a list sorted by the label.
Is there a way to prevent querying the DB twice?
Thanks - I just started out with Sencha Touch and ExtJS --- therefore please excuse my simple question ;)
Somehow I couldn't find any smart solution by asking Google for this basic task..
You don't have to worry about anything unless your two views are presented at the same time. Just re-sort the same store locally.
If they are presented at the same time you will have to create a copy of a store. Otherwise they will show exact same information.

How to update Rails partials at set intervals with $.ajax()?

I'm building a sort-of clone of CoverItLive in Rails 3.1 and want to have the stream of comments automatically update. I'm using a partial in the view to display comments. There's a lot of info out there on doing UJS and AJAX wit forms or buttons or links in Rails, but I can't find any specific examples for what I need to do.
I'm assuming that .ajax() is the best approach, but I've never used it before and not sure if I need to provide .js.erb files when using this particular function? Could I just have the controller send JSON back to the client and go from there, or is there a better approach in rails?
This is what I'm thinking so far, based on what I read at another question:
setInterval(function() {
$.ajax({
type: 'GET',
url: ''<%= comments_path(:json) %>'',
data: {
data: "comments_data"
},
cache: false,
success: function(result) {
if (result == "true"){
alert("true");
}else{
alert("false");
}
}
});
}, 3000);
As an alternative you should look into Private Pub, a gem that Ryan Bates has put togeather. See a screencast about it on railscasts.
The trouble with your solution is now often you server will be hit unnecessarily, i guess it depends on the number of concurrent users you thing will be viewing this page.
if you do go down your route the .js.erb could just have a somthing like this in it:
$('#id_of_area_to_replace').html("<%= escape_javascript(render"comments/index") %>")
This would replace the whole area else you could just append new comments to the bottom of the area

Sencha touch xml reader

I have a problem with sencha touch xmlreader.
find my code below
Ext.regModel('User', {
fields: ['id', 'name', 'email']
});
var feedStore = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '192.168.248.1/notizie.xml',
reader: {
type: 'xml',
record: 'user'
}
}
});
notizie.xml
1
E
f
feedStore is always empty.
Could anyone can discover the reason?
Regards,
Kevin
Yes, if you use JSON then you can use scripttag proxy or if you use native app wrapper like phonegap than you don't get that cross domain security issue.
I solved the issue!
If you use the ajax you just can send requests inside your domain.
I pubblished notizie.xml and index.html on the server.
My question is there is a way using sencha touch to make a request outside your domain?
Ragards,
Carmelo
Only JSONP supports external domains. No way to use xml, only well formed json+callback. Look for ScriptTagProxy, it works pretty well, but only if you can change the service to use jsonp.
It's common policy with all current browsers. You can read more about this from wikipedia