I was wondering if there is any way to pass an array of objects as extra param of model.save method ?
For simple types params seem to work.
Ext.define('RightGridModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'rightText', type: 'string'},
{name: 'digit',type:'int'}
]
});
var mod = Ext.create('RightGridModel');
mod.set('rightText', 'some text');
mod.save({
url: "Home/Insert",
params: {
par: 'additional parameter'
}
});
However if I want to send and array as an extra param,(of course I changed server side function to be approperiate ) par variable is an empty list. Here is a code I use to send an model and array
mod.save({
url: "Home/Insert",
params: {
par: Ext.encode(array)
}
});
Is there any way to send a model and an array as extra parameter ?? What is the best way to achieve that ?
Check out getParams function of Proxy class. You can just subclass existing proxy classes into your own and use it while communicating with your backend.
Related
I'm looking for a way to populate the Magic Suggest control with multiple values. I am using ASP.NET MVC and would like to set these values based on properties in the model.
Part 1: Magic Suggest Support for Multiple Values? A related question on SOF addresses adding a single value but not multiple. Is this possible?
Part 2: Ideally, I'd like to bind the control the MVC model somehow. If this is not possible, I'd at least like to set the pre-selected values dynamically. I have access the model via razor syntax. Something similar to how Magic Suggest allows you to set the data perhaps.
$(function () {
$('#magicsuggest').magicSuggest({
data: '/controller/GetValuesJson?mealId=#Model.Id',
valueField: 'Id',
displayField: 'Name',
/* The property below allows pre-selection */
/* How can I use Razor and set from my MVC model?* /
value: */ Some Code Here */
});
});
EDIT: Part 2: Attempting to set the value property by any variable seems to fail. I've tried variations of strings, quotes etc. to no avail.
var returnedIds = [1,2]; // Or some variable population
$(function () {
$('#magicsuggest').magicSuggest({
data: '/controller/GetValuesJson?mealId=#Model.Id',
valueField: 'Id',
displayField: 'Name',
value: [returnedIds]
});
});
Solved: Thanks to #karlipoppins posts below and some tinkering.
$(function ()
{
$.ajax({
url: '#Url.Action("GetSomeValuesJson")',
data: { Id: 1},
type: 'post',
success: function (returnedVal)
{
var ms = $('#magicsuggest').magicSuggest(
{
data: '/Meal/GetSomeValuesJson?&Id=#Model.Id',
valueField: 'Id',
displayField: 'Name',
});
ms.setValue(returnedVal);
}
});
});
From what I understand you are trying to set multiple values when the component is loaded up. On your code you are using Id as the value field and Name as the displayField.
This means that magicsuggest is expecting data to be in the form of
[{"Id": 1, "Name": "hello"}, {"Id": 2, "Name": "world"}, {"Id": 3, "Name": "no"}]
Now to set multiple values, you can
1) do that when defining the component in js:
$('#magicsuggest').magicSuggest({
data: '/controller/GetValuesJson?mealId=#Model.Id',
valueField: 'Id',
displayField: 'Name',
value: [1, 2] // select 'hello', 'world'
});
2) or you can also define it directly in your DOM containing field:
<div id="magicsuggest" value="[1,2]"></div>
and then create the component like this:
$('#magicsuggest').magicSuggest({
data: '/controller/GetValuesJson?mealId=#Model.Id',
valueField: 'Id',
displayField: 'Name'
});
See both examples here: http://jsfiddle.net/Kpz6y/
Cheers
I'm trying to create a model with a single database entry, instead of creating a store for just one row... doesn't make sense. Anyway, I can create the model by using the static load method, but the URL for my model's proxy is dynamic, so that's not an option, as I want to just load on the fly. Also, creating an instance of the model doesn't seem to work because I can't use the load method, due to it being static...
I've started experimenting with an Ajax call to grab the data, and then loading it into an instance of the model, but the association relationships seem to not get created, even though the plain field values do. This is what I'm attempting to do:
Code
// SectionsModel
Ext.define('SectionsModel', {
extend: 'Ext.data.Model',
fields: ['name']
});
// MY_MODEL
Ext.define('MY_MODEL', {
extend: 'Ext.data.Model',
fields: ['name', 'id'],
hasMany: [{
associationKey: 'sections', name: 'getSections', model: 'SectionsModel'
}],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'configuration'
}
}
});
var url = 'my/url';
Ext.Ajax.request({
url: url,
method: 'GET',
scope: this,
success: function(res) {
var configObj = Ext.decode(res.responseText);
var configModel = Ext.create('MY_MODEL', configObj);
console.log(configModel);
},
failure: function(res) {
console.error('failed');
}
});
Response
{
"code": 200,
"configuration": {
"name": "TestConfiguration",
"id": 1,
"sections": [{
"name": "section1"
}, {
"name": "section2"
}]
}
}
The above code is dummy code that I wrote for this example... think of it as pseudocode if it doesn't work. Like I said, it does work when I use the static load method, and I can successfully make the Ajax call... the issue is how to create a model with the given data. Would I need to pass in config to the model's constructor, and set the model's proxy's data to the passed in config? Is that proper protocol? I'm just trying to figure out the best approach here. Thanks!
Cross-posted from the Sencha forums.
I have come up with a solution, thanks to one of Mitchell Simoens' blog post. I changed MY_MODEL to look like this:
Ext.define('MY_MODEL', {
extend: 'Ext.data.Model',
fields: ['name', 'id'],
hasMany: [{
associationKey: 'sections', name: 'getSections', model: 'SectionsModel'
}],
constructor: function(data) {
this.callParent([data]);
var proxy = this.getProxy();
if (proxy) {
var reader = proxy.getReader();
if (reader) {
// this function is crucial... otherwise, the associations are not populated
reader.readAssociated(this, data);
}
}
},
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
// in the success of the Ajax call
success: function(res) {
var configObj = Ext.decode(res.responseText);
var configModel = Ext.create('MY_MODEL', configObj.configuration);
console.log(configModel);
}
I try to get started with ExtJs, and I have quite basic question.
I have a model
Ext.define('Mb.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
...
],
proxy: {
type: 'ajax',
url : 'server/gui/getUser.php'
}
});
getUser.php returns a json string (it is the logged in user, and not a user out of a user table):
{"id":"1","name": ... }
I tried the following to load the data, but I get an error Uncaught TypeError: Object [object Object] has no method 'load'
Ext.define('Mb.Application', {
...
launch: function() {
....
user = Ext.create('Mb.model.User');
user.load();
}
});
What is the correct way to load that data ?
An additional question: What is the benefit of using Modelhere ?
Couldn't I do something like this ?
Ext.Ajax.request({
url: 'server/gui/getUser.php',
success: function(response){
var user = Ext.JSON.decode(response.responseText);
}
});
In this case load is a static method. You can load a model from your server by passing the id.
Mb.model.User.load(id, {
success: function(rec) {
console.log('loaded', rec.getData());
}
});
The advantage to using a model is the layer of abstraction, + the extra functionality you get from using a model.
You can do, but with little changes
myRequest = Ext.Ajax.request({
url: 'getdata.php',
method: 'GET',
callback: function(response) {
console.log(response.responseText);
}
});
From my extended Ext.data.TreeStore:
proxy: {
type: 'ajax',
api: {
read: "/GetTree.json",
update: "/SetTree.aspx?username=user1"
},
reader: {
type: 'json',
root: 'children'
},
listeners: {
exception: function (proxy, response, options) {
// error case
console.log('Exception in Portlets store proxy...');
console.log(response);
}
}
},
What I am trying to figure out is how can I make the username=user1 dynamic, such that I could pass in user2 and have the aspx page process with that user data.
I cannot figure out if/how TreeStore.sync() allows parameters to be passed into it.
Update:
What I am really after here is the ability to save back the entire tree structure as a JSON string instead of just the record that was updated. I can build the JSON string I need to pass but cannot figure out how to actually get that information to my SetTree.aspx page.
You can try setting extra params on the proxy before calling sync:
store.proxy.extraParams = { param1 : '', param2 : '' };
There is anecdotal evidence that suggests this works in 4.1.3 but not earlier versions.
Another thought is to just fire a regular Ajax.request and send desired params along instead of using the tree store to do that.
I know this is old, but for people like me that were searching for the same question...
If you want to save the entire structure instead of just the modified lines, you need to define a writer in your store proxy and in that writer, set writeAllFields: false:
proxy: {
type: 'ajax',
api: {
read: "/GetTree.json",
update: "/SetTree.aspx?username=user1"
},
reader: {
type: 'json',
root: 'children'
},
listeners: {
exception: function (proxy, response, options) {
// error case
console.log('Exception in Portlets store proxy...');
console.log(response);
}
},
writer: {
type: 'json',
writeAllFields: true
}
},
I'm using MooTools 1.4.1. I want to create an ajax post requst, but I can't figure out how to construct the "data" attribute, which I wish to contain the name value pairs of a form whose id is "myForm".
$('save').addEvent('click', function(event) {
var req = new Request({
method: 'post',
url: 'save',
data: { ... },
onRequest: function() {
// on request
},
onComplete: function(response) {
alert(response);
});
});
Anyone know how I should populate the "data" attribute? Thanks, - Dave
You can use
$('myForm').toQueryString();
Alternatively, The MooTools More package has a Form.Request() class to send a Form using Ajax.
As Savageman commented, you can throw your form element into toQueryString() and send it through in the data property, or by running .send() or .post() on the request object.
You also seem to be missing a closing squiggly bracket.
Anyhow, this is how I make AJAX requests:
new Request({
url: 'http://url/to/ajax/script.php',
onSuccess: function(data) {
doStuff();
}
}).post('action=foo&bar=baz');
I'd recommend you use Request.JSON if you're planning on sending stuff back. It's less "shotgun approach"-ey.
You can just pass form element to "data" property, and conversion is automatic.
var req = new Request({
method: 'post',
url: 'example.com/form.php',
data: $('myForm'),
onRequest: function() {
// on request
},
onComplete: function(response) {
alert(response);
}
});
data - (mixed: defaults to '') The default data for Request:send, used when no data is given. Can be an Element, Object or String.
If an Object is passed the Object:toQueryString method will be used to convert the object to a string.
If an Element is passed the Element:toQueryString method will be used to convert the Element to a string.
http://mootools.net/docs/core/Request/Request