PDA

View Full Version : xaction in extjs 4?



sferg989
27 Oct 2011, 6:41 AM
I am trying to perform a batch save in Extjs 4. I am confused how the data is passed from the browser to the server. In extjs 3.3 I believe it was passed through an xaction event.

As you can tell I am new to extjs4, and I appreciate any help/info you can give me.

castitas
27 Oct 2011, 11:30 AM
The proxy's 'batchActions' and 'batchOrder' configs will be of most interest to you. You can find them in the documentation on Proxy (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.proxy.Proxy).

Also note:


Proxies operate on the principle that all operations performed are either Create, Read, Update or Delete. These four operations are mapped to the methods create (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.proxy.Proxy-static-method-create), read (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.proxy.Proxy-method-read), update (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.proxy.Proxy-method-update) and destroy (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.proxy.Proxy-method-destroy) respectively. Each Proxy subclass implements these functions.

sferg989
27 Oct 2011, 11:55 AM
I am trying to use

store.save()

I can see in Firebug that there is a post occurring, and I can see that the data is in an array, but I don't understand how to get it to the server. I am using a basic writer, do I need to name the array? any direction would be appreciated.

Thank you for your patience, and help.

castitas
31 Oct 2011, 2:04 PM
1) store.save() seems to have been replaced in Ext 4 with store.sync()
2) What does your proxy look like?
3) What languages are you using? (specifically the one talking to your server?)

(Did anything in the documentation help?)_

sferg989
3 Nov 2011, 10:17 AM
I have spent a good amount of time trying to figure out the CRUD operations in extjs4. Here is the full layout of what I am doing

here is my proxy...

I am referring the proxy back to the same file ($self), where I want to pass the response (formerly xaction) of the browser into a php function.



var proxy = new Ext.data.proxy.Ajax({
url :'$self',
reader: {
type: 'json',
root: 'rows'
},
api:
{
create : '$self?create_table=yes',
read : '$self?get_json=yes',
update : '$self?update_json=yes'
}
});


data model



Ext.define('gridmodel', {
extend: 'Ext.data.Model',
fields: [
{
name : 'field_name',
type : 'string'
},{
name : 'data_type'
}
]
});



the store


var grid_store = Ext.create('Ext.data.Store', {
storeId : 'grid_store',
remoteSort : true,
proxy : proxy,
model : 'gridmodel',
autoLoad : false,
writer: {
type: 'json',
encode : true,
writeAllFields: true,
root: 'rows'
}
});

The Grid


var grid = Ext.create('Ext.grid.Panel', {
id : 'grid',
renderTo : divGrid,
store : grid_store,
stateful : true,
width : viewport_width,
height : viewport_height,
title : 'ExtJS 4 Template',
plugins : [cellEditing],
columns : [
{
dataIndex : 'field_name',
align : 'left',
text : 'Field Name'
},{
dataIndex : 'data_type',
align : 'left',
text : 'Data Type',
field: {
xtype : 'combobox',
typeAhead : true,
triggerAction : 'all',
selectOnTab : true,
lazyRender : true,
store: [
['int','int'],
['decimal','decimal'],
['date','date'],
['text','text']


]
}
}
], bbar: [
'->',
{
xtype : 'button',
text : 'Save Changes',
icon : '$g_images_path/icons/save_icon.gif',
handler : createTable
}]


});

The main problem, as stated earlier, is that I can see in firebug there is a post with the proper update information, but I do not know how to get that data? Thanks for your help and patience

flanders
3 Nov 2011, 11:51 AM
You mean you want to know how to receive the payload of the request? That, of course, depends on your serverside programming language. So thats the place to look for info.

F.e., for PHP you can look here: http://php.net/manual/en/wrappers.php.php

eddow
8 Dec 2011, 8:30 AM
I encountered the same problem, so I will reformulate :

I have a grid on an ajax proxy.
When I modify an entry, JSON data of the modification is sent like that :

{"records" : [ { "id" : "xxx", "property" : "newValue" } ] }
When I destroy a record, the json data sent is :

{"records" : [ { "id" : "xxx" } ] }

So, nowhere was specified in the first case that it was an 'update' operation nor in the second that it was a 'delete' operation.

Also, as I use complexly generated URL so I use the same for reading and modifying - the old 'xaction' parameter (specifying what CRUD operation the request is about) was highly useful - and I don't find it back neither.

eddow
8 Dec 2011, 9:34 AM
So,
After digging a bit in their code, I found this :
Their request object has a parameter 'action' but it is never used. I suppose they made their tests with the 'api' parameter and therefore didn't feel the need for that action parameter.
If you want to find back the old xaction parameter, just add this before using the proxy :


Ext.define('Ext.data.proxy.Action', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.ajax',

doRequest: function(operation, callback, scope) {
var writer = this.getWriter(),
request = this.buildRequest(operation, callback, scope);

if (operation.allowWrite()) {
request = writer.write(request);
}

Ext.apply(request, {
headers : this.headers,
timeout : this.timeout,
scope : this,
callback : this.createRequestCallback(request, operation, callback, scope),
method : this.getMethod(request),
disableCaching: false // explicitly set it to false, ServerProxy handles caching
});

request.params.xaction = request.action;
Ext.Ajax.request(request);

return request;
}
});


The line alias: 'proxy.ajax' is needed to ensure that specifying the proxy type to 'ajax' will refer this class.
The only line added was:
request.params.xaction = request.action;
who, obviously, use the action parameter in the POST parameter.

If anybody has a more 'clean' solution (using their tool and not patching them), it would still be nice.