PDA

View Full Version : help with grid from examples/restful



asdasd9
23 Jul 2012, 4:26 AM
I managed to get data from my db and display it in the grid (by changing func get_data() in session_db.php to run a query..)
I'm having trouble understanding what to do so that when I click on add new or delete button the record won't just disappear (or appear) but real changes would be made in the DB.
from what I can tell I need to change the code in functions like update/save/destroy in Model.php

but, before that, I'm stuck cause I don't understand what changes I need to make to make the code get to those functions when one of the buttons are clicked.

when the page first loads the restful.js calls app.php and from there a request object is created, and it has a method that is GET and then the code goes through some long path and reaches function all() in class Model in Model.php

so it get's there as a result of having it's method set to GET, maybe if it'll be POST it will go to another function (that I will change to use my db later)
but how do I change the code to run the app.php again when one of the buttons are clicked?! how do I make this whole process run again, in the hopes it will end in one of the functions that would update the db.

friend
23 Jul 2012, 5:17 AM
The specific server-side request mappings associated with a create/read/update/destroy event can be configured on the Proxy declared by your data store.

In particular, look at the api (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.proxy.Rest-cfg-api) config attribute of Ext.data.proxy.Rest (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.proxy.Rest).

Also take a look at autoSync (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-cfg-autoSync) on your Ext.data.Store (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store).

Everything is event driven; when you call store.remove(record), a 'destroy' event fires on the store and assuming autoSync is enabled, a DELETE request is sent to the server-side.

asdasd9
23 Jul 2012, 8:28 PM
ok, I think I got it..
I just need to add sql query to the session_db.php function destroy()

let me try it, before I close this thread.

thank you!

asdasd9
23 Jul 2012, 9:49 PM
the delete button is working now..
I debugged and saw that when clicking on the delete button it goes to the destroy function in session_db.php

but now I'm trying to do the same for 'add new' button or updating row and I don't see it reaching the session_db.php to the functions that I expected (insert($rec) and update($idx, $attributes) )
is that because the process is triggered not by the "add new" button but by the 'update' button that is displayed after I click on add new or double click a row?

either way, when I click on update it doesn't triggers the process to get to those functions I mentioned above..I don't see what happens at all after I click it..what code is running?

I might be missing something here..

edit:
I saw there's an option to add autoSave: true, to save the changes without calling something but it didn't change anything..I still see that red mark on the fields of the row that I changed (where as it's supposed to disappear after save right?)

anyways, here's my current restful.js:



Ext.require(['Ext.data.*', 'Ext.grid.*']);


Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
useNull: true
},'user_code','user_name', 'email', 'status', 'types','remark'],
validations: [{
type: 'length',
field: 'email',
min: 1
}, {
type: 'length',
field: 'first',
min: 1
}, {
type: 'length',
field: 'last',
min: 1
}]
});






function display_users_list() {






var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,


model: 'Person',
proxy: {
type: 'rest',
url: 'extjs/examples/restful/app.php/users',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));


}
}
});


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');


var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.getElementById("main_layer"),
plugins: [rowEditing],
width: 850,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{


text: 'User Code',
flex: 1,
sortable: true,
dataIndex: 'user_code',
field: {
xtype: 'textfield'
}
}, {
text: 'User Name',
flex: 1,
sortable: true,
dataIndex: 'user_name',
field: {
xtype: 'textfield'
}
},{
text: 'Email',
flex: 0,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
}, {
header: 'Status',
width: 80,
sortable: true,
dataIndex: 'status',
field: {
xtype: 'textfield'
}
}, {
header: 'Types',
width: 220,
sortable: true,
dataIndex: 'types',
field: {
xtype: 'textfield'
}
}, {
text: 'Remark',
width: 160,
sortable: true,
dataIndex: 'remark',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Person());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);


}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
}