youtube api v3 CORS support in sencha touch 2 - youtube-api

Question

Using Sencha Touch, How do we query youtube v3 search api?
Below is the sample url which works fine when issued from a browser directly (NOTE: Key is required) :
"https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&type=video&channelId=UC3djj8jS0370cu_ghKs_Ong&key=MY_KEY"
However the same url fails when loaded using sencha touch Store ajax proxy.
It seems that OPTIONS call is made against this URL and GET was aborted.
What is needed in Sencha touch store for working with youtube V3 google apis? I did not find jsonp support for youtube V3 api.

Answer 1

I have used this api like this,
proxy: {
type: 'ajax',
url: 'https://www.googleapis.com/youtube/v3/search',
useDefaultXhrHeader: false,
extraParams: {
part: 'snippet',
q: 'ambarsariya',
regionCode: 'IN',
maxResults: 30,
key: 'your_key'
},
reader: {
type: 'json',
rootProperty: 'items'
}
}
One more thing you have to do and thats is you have set a idProperty in the model of this store. Inside config of the model used I have used
idProperty: 'videoId',// its better if this name is not same as any fields name
fields: [{
name: 'snippet'
}, {
name: 'thumbnail',
mapping: 'snippet.thumbnails.default.url'
}, {
name: 'title',
mapping: 'snippet.title'
}]
Hope this solves your problem.

Answer 2

It works well for me.
STORE:-
Ext.define('MyApp.store.videos', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Video',
config: {
autoLoad: true,
proxy: {
type: 'ajax',
//This is required to enable cross-domain request
useDefaultXhrHeader: false,
url: 'https://www.googleapis.com/youtube/v3/search',
extraParams: {
part: 'snippet',
q: "Enrique", //Query string
regionCode: 'IN',
maxResults: 30,
key: 'AIzaSyD6FvoLaIFqyQGoEY4oV7TEWGAJSlDd1-8'
}
}
}
});
This is the model used by the above store.
MyApp.model.Video:-
Ext.define('MyApp.model.Video', {
extend: 'Ext.data.Model',
requires: [],
config: {
idProperty: 'videoId',
fields: [{
name: 'id'
}, {
name: 'videoId',
mapping: 'id.videoId'
}]
}
});
It also works well for jsonp proxy also,
just change type: jsonp inside proxy and remove useDefaultXhrHeader config.