YQL in sencha touch MVC - sencha-touch

I am looking for some blog or example for YQL explaining with MVC architecture. I feel difficult in understanding kitchen sink example. Can any one share simple MVC on YQL. so it will be helpful for other also.

I don't know about YQL, but based on the link user3849047 provided it's basically a request against some remote api. So integration might be a little bit more tricky than in this draft.
Basically, this is how it should work.
You will get some kind of data from the api calls. This data can be represented as an Ext.data.Model. A bunch of models is organized and stored in Ext.data.Store.
So all you have to do is populating the store somehow.
There are two ways.
Do it in your controller:
Ext.create("Controller", {
extend: "Ext.app.Controller",
getStoreData: function () {
var me = this;
Ext.data.JsonP.request({
url: "yqlRequestUrl",
params: {
// request parameter
},
success: function ( result, request ) {
me.fillStore( result );
}
});
},
fillStore: function ( result ) {
var data = transformResultIntoModels( result );
var store = Ext.getStore("myStore");
store.add( data );
}
});
You execute the api request and the transformation of the response into the models all by yourself.
Or let your store do it for you:
Ext.define("MyStore", {
extend: "Ext.data.Store",
autoLoad: false,
storeId: "mystore",
model: "MyModel",
proxy: {
type: "jsonP",
url: "yqlRequestUrl",
extraParams: {
// request parameter
},
reader: {
type: "json",
rootProperty: "yourRootElement"
}
}
});
Since this store is set to autoLoad: false you have to load the store manually by
store.load({
callback: function ( records, operation, success ) {
},
scope: this
});

Related

Net Core and JQuery autocomplete

Im having some real problems getting JQuery autocomplete to work in Net Core.
here is my client side script :
<script>
$(document).ready(function () {
$('#txtSystemUserDisplayName').autocomplete({
change: function (event, ui) {
if (!ui.item) {
$('#txtSystemUserDisplayName').val("");
}
},
source: function (request, response) {
$.ajax({
url: "#(Url.Action("SearchEmployeesAJAX", "Home" ))",
// data: "{ 'term': '" + request.term.replace(/'/gi, "\\'") + "'}",
data: { term: 'fumanchu' },
dataType: "json", type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
var x = Array.prototype.slice.call(data);
response($.map(x, function (item) {
return {
label: item.employeeDisplayName,
}
}))
}, error: function (response) { alert(response.responseText); }, failure: function (response) { alert(response.responseText); }
});
},
select: function (e, i) {
$("#hfSystemUserDisplayName").val(i.item.label);
},
minLength: 1
});
});
Now when i start typing , the autocomplete fires but the param in the controller method is NULL , no matter what i do. it doesnt matter what i call the 'term' in the data object of the request. And yes i am making sure that the controller method parameter is named the same . eg
public JsonResult SearchEmployeesAJAX(String term) {
as you can see ive even commented it out and hardcoded a string in there, still null.
it DOES work if I set the string as part of the URL eg:
url: "#(Url.Action("SearchEmployeesAJAX", "Home", new {#term="blahblahblah" }
This is how I have always done autocompletes in the past on .Net Framework, and never had an issue. Is there something different about Net Core that im not aware of, maybe something different about how requests are formed?
Any help would be appreciated.
Ok so if anyone else is also having this problem, it appears that you cant use the Url.Action helper anymore and still have the parameter not be null.
You will need to use a raw string as the url instead, which seemed to solve this.

Updating release field with Rally API fails, what's wrong and how to fix it?

I'm trying to update some release fields with the Rally API, but the requests fails when trying to save, I've tried with normal and custom fields. I can't figure out why this is happening.
Here's my portion of the code that attempts to do this:
launch: function() {
this._getReleaseModel().then({
success: function(model) {
console.log('release model: ', model)
return this._getReleaseRecord(model, 72984315568);
},
scope: this
}).then({
success: function(releaseRecord) {
console.log('release record:', releaseRecord);
this._updateReleaseRecord(releaseRecord, 'Name', 'Test Release Modified by API');
},
scope: this
});
}
_getReleaseModel: function() { // returns model promise
return Rally.data.ModelFactory.getModel({
type: 'Release'
});
},
_getReleaseRecord: function(model, objectID) { // returns record promise
return model.load(objectID);
},
_updateReleaseRecord: function(record, fieldToChange, newField) {
console.log('gonna update this record:', record);
record.set(fieldToChange, newField);
record.save({
callback: function(result, operation) {
if(operation.wasSuccessful()) {
console.log('record saved successfully');
}
else {
console.log('failed to save record');
}
}
})
}
Note I'm not pasting the whole app code for simplicity. Thank you.
So, the problem was that I was testing the rally code from a cloud9 server through app-debug.html. Apparently the save method can't access the Rally CA central from outside rally. I tested the code inside an actual rally custom html app and it worked fine. Thanks to Kyle for answering promptly either way.

Add a auto initialize function inside a Sencha Touch model to manipulate model's data

When I load a store, due to the API structure, I get a json object inside my model:
Ext.define('TestApp.model.SecretKeyModel', {
extend: 'Ext.data.Model',
config:{
identifier: {
type: 'uuid'
},
fields: [
{ name:'theRecord', type:'json' }
]
},
extractToken: function() {
var record = this;
var token = record.initSession.token;
console.log('token: ' + token);
}
});
I need to extract the token from that json object.
For that, i think I should write a function right there, inside the model.
How can I call it, when the store loads, to manipulate the data and extract the token?
I faced a similar situation 1 hour ago, i needed to edit data during loading or immidiatly after. I ended with this solution:
Ext.define('TestApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: ['TestApp.model.SecretKeyModel'],
config :{
model: 'TestApp.model.SecretKeyModel',
proxy: {
type: 'ajax',
url: TestApp.utils.GlobalVariables.getServerUrl(),
reader: {
type: 'json',
rootProperty: ''
}
},
listeners: {
refresh: function(store, data, eOpts) {
store.each(function (item, index, length) {
item.extractToken(); // call this on every record loaded in the store
});
}
}
}
});

Sencha Touch:How to capture Status code Returned by Server

I am developing a Sencha touch application using SAP 'Odata' proxy.
In my store I am calling the URL for READ operation
http:///sap/opu/odata/sap/TECHHELP/Tickets
I am loading the store manually in the controller using the following code
var ticketStore = Ext.getStore("Tickets");
var proxy=ticketStore.getProxy();
ticketStore.load(function(records, operation, success) {
if(success){
console.log('loaded records');
}
else{
console.log('loading failed');
}
}, this);
When the application is executed in browser, in network tab I can see the format
Status Code:401 Unauthorized
Now when the URL is executed, I want to capture the exact status Code and the Message in the application.
I want to capture the possible error conditions by checking the status codes returned from server for Eg: 500,401,200,204
How Can I do this?
Regards,
P
this was helpful for me.
new Ext.data.Store({
model: "Your Model",
proxy:{
type: 'ajax',
url: "SomeURL",
reader: new Ext.data.JsonReader({
type: 'json',
root: 'SOME ROOT'
}),
listeners: {
exception:function (proxy, response,operation) {
console.log(response.status);
console.log(response.responseText);
}
}
}
})
May be this will helpful for you.

Update record in Sencha Touch Data Store with Ajaxproxy

I'm developing a simple form with Secha Touch. I have defined a DataStore for my model like this:
App.stores.shopinglists = new Ext.data.Store({
model: 'ShopingList',
autoLoad: false,
proxy: new Ext.data.AjaxProxy({
type: 'ajax',
url: 'http://localhost:2795/ShopingListService/',
reader: {
type: 'json',
root: 'ResultData',
totalProperty: 'Total',
successProperty: 'Success'
},
writer: {
encode: true,
type: 'json'
}
})
});
The view loads fine, and I can see a list of items and edit them. However, when I click the update button, I get the following error:
Uncaught Error: You are using a ServerProxy but have not supplied it with a url.
What I am missing here? The proxy has the url defined, but when update is invoked, it's undefined.
Edit: The button just call a controller action.
onSaveAction: function () {
var model = this.getRecord();
Ext.dispatch({
controller: 'ShopingLists',
action: (model.phantom ? 'save' : 'update'),
data: this.getValues(),
record: model,
form: this
});
},
The code executed by the controller is this:
update: function (params) {
debugger;
var tmpshopingList = new App.models.ShopingList(params.data);
var errors = tmpshopingList.validate();
if (errors.isValid()) {
params.record.set(params.data);
params.record.save();
this.index();
} else {
params.form.showErrors(errors);
}
},
I think I know what is happening: The model knows it has a server proxy, but all of the configurations are not being copied over. Perhaps this is a bug with Sencha Touch 1.x.
Try putting the proxy configuration into your model, not your store.