PDA

View Full Version : [CLOSED-478][3.1] Ext.Store Direct update not sending data



vinnybozz
25 Jan 2010, 7:30 AM
Hello,

The direct update action in an Ext.data.Store is firing correctly but not sending any data.

http://www.extjs.com/forum/showthread.php?t=90421

Jamie Avins
25 Jan 2010, 8:48 AM
If you have a good test case we can use, I'll get this a bug number.

vinnybozz
25 Jan 2010, 11:45 AM
I do not have a good test case to show, but I will describe what I did.
In short, I was using the grid from the SimpleTask example(http://www.extjs.com/deploy/dev/examples/tasks/tasks.html) and changed the Task GroupingStore into a DirectStore and added a JsonWriter in the DirectStore params:


writer: new Ext.data.JsonWriter({
encode: true,
writeAllFields: false
}),
proxy: new Ext.data.DirectProxy({
paramsAsHash: true,
api: {
read: TaskAction.loadTasks,
destroy: TaskAction.deleteTask,
update: TaskAction.updateTask,
create: TaskAction.createTask
}
}),

In Ext 3.0, when editing a row in the grid, the update action would correctly send as POST parameter a data array containing the record id along with the record data to the Direct Function.
After upgrading to 3.1, this data array was now empty.

Curiously, after changing the option encode of the writer to false, the data array is not empty anymore, although it now contains only the record data and not the record id.

vinnybozz
22 Feb 2010, 1:46 PM
Hi I have a working example of this problem:

I recreated the example using existing samples...

Put the following files in the /examples/direct folder

- row-editor.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Direct Grid with RowEditor Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<link rel="stylesheet" type="text/css" href="../ux/css/RowEditor.css" />
<style type="text/css">
.x-grid3 .x-window-ml{
padding-left: 0;
}
.x-grid3 .x-window-mr {
padding-right: 0;
}
.x-grid3 .x-window-tl {
padding-left: 0;
}
.x-grid3 .x-window-tr {
padding-right: 0;
}
.x-grid3 .x-window-tc .x-window-header {
height: 3px;
padding:0;
overflow:hidden;
}
.x-grid3 .x-window-mc {
border-width: 0;
background: #cdd9e8;
}
.x-grid3 .x-window-bl {
padding-left: 0;
}
.x-grid3 .x-window-br {
padding-right: 0;
}
.x-grid3 .x-panel-btns {
padding:0;
}
.x-grid3 .x-panel-btns td.x-toolbar-cell {
padding:3px 3px 0;
}
.x-box-inner {
zoom:1;
}
.icon-user-add {
background-image: url(../shared/icons/fam/user_add.gif) !important;
}
.icon-user-delete {
background-image: url(../shared/icons/fam/user_delete.gif) !important;
}
</style>

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="gen-names.js"></script>
<script type="text/javascript" src="../ux/RowEditor.js"></script>

<script type="text/javascript" src="row-editor.js"></script>
<script type="text/javascript" src="php/api.php"></script>
</head>
<body>
<h1>Row Editor Grid Example</h1>


</p>
</body>
</html>



- row-editor.js


/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Direct.addProvider(Ext.app.REMOTING_API);

var Employee = Ext.data.Record.create([{
name: 'name',
type: 'string'
}, {
name: 'email',
type: 'string'
},{
name: 'active',
type: 'bool'
}]);



var store = new Ext.data.DirectStore({
api: {
read: GridAction.read,
update: GridAction.update,
create: GridAction.create
},
autoLoad: true,
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty:'totalCount',
idProperty: 'id',
fields: Employee
}),
writer: new Ext.data.JsonWriter({
returnJson: true,
writeAllFields: true
})
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

var grid = new Ext.grid.GridPanel({
store: store,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'name',
plugins: [editor],
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Employee',
handler: function(){
var e = new Employee({
name: 'New Guy',
email: 'new@exttest.com',
start: (new Date()).clearTime(),
salary: 50000,
active: true
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
}],

columns: [
new Ext.grid.RowNumberer(),
{
id: 'name',
header: 'First Name',
dataIndex: 'name',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
},{
header: 'Email',
dataIndex: 'email',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false,
vtype: 'email'
}
},{
xtype: 'booleancolumn',
header: 'Active',
dataIndex: 'active',
align: 'center',
width: 50,
trueText: 'Yes',
falseText: 'No',
editor: {
xtype: 'checkbox'
}
}]
});



var layout = new Ext.Panel({
title: 'Employee Salary by Month',
layout: 'border',
layoutConfig: {
columns: 1
},
width:600,
height: 600,
items: [grid]
});
layout.render(Ext.getBody());

});



- php/config.php


<?php
$API = array(
'TestAction'=>array(
'methods'=>array(
'doEcho'=>array(
'len'=>1
),
'multiply'=>array(
'len'=>1
),
'getTree'=>array(
'len'=>1
)
)
),

'Profile'=>array(
'methods'=>array(
'getBasicInfo'=>array(
'len'=>2
),
'getPhoneInfo'=>array(
'len'=>1
),
'getLocationInfo'=>array(
'len'=>1
),
'updateBasicInfo'=>array(
'len'=>2,
'formHandler'=>true
)
)
),

'GridAction'=>array(
'methods'=>array(
'read'=>array(
'len'=>1
),
'update'=>array(
'len'=>1
),
'create'=>array(
'len'=>1
)
)
),

);


- php/classes/GridAction.php


<?php
class GridAction {
function read($data){
$rows = array(
array('name'=>'John','email'=>'Doe@js.com'),
array('name'=>'Jane','email'=>'Doe@js.com')
);
return array(
'totalCount' => count($rows),
'rows' => $rows
);
}

function update($data) {
firelog($data);
}

function create($data) {
firelog($data);
}
}


Once these files are in place, simply go to row-editor.html page in firefox.
Then double click on a user and make an edit and UPDATE.
If you open firebug, you will see that a direct request is correctly sent to the server, but the Data is an empty array !

Or maybe I am missing a parameter in my grid settings but I cant seem to put my finger on it !!

Thx

Jamie Avins
22 Feb 2010, 4:18 PM
Have you changed your encode in the JsonWriter to false since you are using Direct?

vinnybozz
23 Feb 2010, 6:16 AM
Wow, thats all it took !!

Thx for the help and sorry for the inconvenience...

Jamie Avins
23 Feb 2010, 8:49 AM
We need to update Direct's documentation to make it more clear.