PDA

View Full Version : RESTFUL + GridFilters



zefyrus
1 Mar 2010, 11:43 AM
Hi

I'm doing a restful + codeigniter and I'm some issues.
1. All the get data, the read, never send any data on it, I had to change the proxy to another Method (RPUT) so I can have the data sent via JSON; this is not optimal.

2. Since I need to filter all the data I`m using GridFilter plugin; and no data is sent to the server, with or without encode flag set.

here is the code:


<script language="Javascript">
/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/


// Application instance for showing user-feedback messages.
var App = new Ext.App({});

// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
api: {
create: {
url: "<?php echo base_url() . 'index.php/rest_simple/'. $raiz .'/id' ?>",
method: 'PUT'
},
destroy: {
url: '<?php echo base_url() . 'index.php/rest_simple/'. $raiz .'/id' ?>',
method: 'DELETE'
},
read: {
url: '<?php echo base_url() . 'index.php/rest_simple/'. $raiz .'/id' ?>',
method: 'RPUT'
},
update: {
url: '<?php echo base_url() . 'index.php/rest_simple/'. $raiz .'/id' ?>',
method: 'POST'
}
}
});

// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
encode: true,
method: "POST",
autoDestroy: true,
idProperty: 'id',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, [
{name: 'id'},
{name: 'nome', allowBlank: false},
<?php echo $extraFields; ?>
]);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
encode: false, // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
listful: true,
encodeDelete: true,
writeAllFields: true,
method: 'POST'
});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'acoes',
restful: true, // <-- This Store is RESTful
remoteSort: true,
encode: true,
method: "POST",
sortInfo: {
field: 'nome',
direction: 'ASC'
},
proxy: proxy,
// url: '<?php echo base_url() . 'index.php/rest_simple/'. $raiz .'/id'; ?>',
reader: reader,
writer: writer // <-- plug a DataWriter into the store just as you would a Reader
});

// load the store immeditately
//store.load();

var filters = new Ext.ux.grid.GridFilters({
// encode and local configuration options defined previously for easier reuse
// encode: true, // json encode the filter query
local: false, // defaults to false (remote filtering)
filters: [{
type: 'numeric',
dataIndex: 'id'
}, {
type: 'string',
dataIndex: 'nome'
}
// , {
// type: 'numeric',
// dataIndex: 'price'
// }, {
// type: 'date',
// dataIndex: 'date'
// }, {
// type: 'list',
// dataIndex: 'size',
// options: ['small', 'medium', 'large', 'extra large'],
// phpMode: true
// }, {
// type: 'boolean',
// dataIndex: 'visible'
// }
]
});


////
// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
// upon Ext.data.DataProxy class. This is handy for centralizing user-feedback messaging into one place rather than
// attaching listenrs to EACH Store.
//
// Listen to all DataProxy beforewrite events
//
Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
App.setAlert(App.STATUS_NOTICE, "Antes " + action);
});

////
// all write events
//
Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
App.setAlert(true, action + ':' + res.message);
});

////
// all exception events
//
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
App.setAlert(false, "Erro na ação " + action + " em " + type);
});

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var createColModel = function (finish, start) {

var columns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id', filterable: true},
{header: "Nome", width: 300, sortable: true, dataIndex: 'nome', filterable: true, editor: new Ext.form.TextField({})},
<?php echo $extraFieldSets; ?>
];

return new Ext.grid.ColumnModel({
columns: columns.slice(start || 0, finish),
defaults: {
sortable: true
}
});
};


Ext.onReady(function() {
Ext.QuickTips.init();

// use RowEditor for editing
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Gravar'
});

// Create a typical GridPanel with RowEditor plugin
var userGrid = new Ext.grid.GridPanel({
renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: '<?php echo $titulo ?>',
autoScroll: true,
height: 300,
width: 740,
store: store,
loadMask: true,
plugins: [editor, filters],
// columns : userColumns,
colModel: createColModel(4),
listeners: {
render: {
fn: function(){
store.load({
params: {
start: 0,
limit: 50
}
});
}
}
},

tbar: [{
text: 'Novo',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Remover',
iconCls: 'silk-delete',
handler: onDelete
}, '-'],
viewConfig: {
forceFit: true
},
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 50,
plugins: [filters]
})

});

/**
* onAdd
*/
function onAdd(btn, ev) {
var u = new userGrid.store.recordType({
nome: ''
});
editor.stopEditing();
userGrid.store.insert(0, u);
editor.startEditing(0);
}
/**
* onDelete
*/
function onDelete() {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
userGrid.store.remove(rec);
}

});

</script>

can anyone help me on this? I need the data or sent via restful ( everything on the url "/" separated, or via JSON)

thanks

xpete
24 Aug 2010, 8:31 AM
have you fixed this?