PDA

View Full Version : Why does not api property(create, remove) work property ?



jeongyej
30 Jan 2014, 8:57 AM
Hi, I'm trying to do CRUD by using api property of "Ext.data.proxy.Ajax".
However, when I did some actions like "create", "destory", it did not work properly.
Can someone help me out this problem ?

I attached my source code to understand you.
First is Model.



Ext.define('directModel', {
extend : 'Ext.data.Model',
fields : [
{name : 'id', type : 'int'},
{name : 'firstName', type : 'string'},
{name : 'lastName', type : 'string'},
{name : 'company', type : 'string'},
{name : 'email', type : 'string'},
{name : 'dob', type : 'date'},
{name : 'age', type : 'int'},
{name : 'coworker', type : 'string'}
]
});


Next is store having proxy property.



var store = Ext.create('Ext.data.Store', {
storeId : 'directStore',
model : 'directModel',
proxy : {
type : 'ajax',
api : {
create : '/common/command.jsp?action=create',
update : '/common/command.jsp?action=update',
read : '/common/command.jsp?action=read',
destory : '/common/command.jsp?action=destory'
},
reader : {
type : 'json',
root : 'root'
}
},
autoLoad : true
});


Next is Grid Panel having Toolbar that I used to add CRUD.



Ext.create('Ext.grid.Panel', {
id : 'directGrid',
width : 700,
height : 400,
columns : [
{text : 'ID', dataIndex : 'id', width : 70, menuDisabled : true, sortable : false, align : 'right'},
{text : 'First Name', dataIndex : 'firstName', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Last Name', dataIndex : 'lastName', width : 70, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Company', dataIndex : 'company', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'E-Mail', dataIndex : 'email', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Birth', dataIndex : 'dob', width : 100, menuDisabled : true, sortable : false, align : 'center'},
{text : 'Age', dataIndex : 'age', width : 50, menuDisabled : true, sortable : false, align : 'right'},
{text : 'Coworker', dataIndex : 'coworker', width : 100, menuDisabled : true, sortable : false, align : 'center'}
],
checkbox : true,
tbar : tbar,
store : store,
renderTo : Ext.getBody()
});


Last is the Toolbar.



var tbar = Ext.create('Ext.toolbar.Toolbar', {
items : [{
text : 'Create',
handler : function(){
var s = Ext.getCmp('directGrid').getStore();
var m = Ext.create('directModel', {
id : '1',
age : 10
});
console.log(m);

s.add(m);
s.sync();
}
},'-',{
text : 'Update',
handler : function(){
var s = Ext.getCmp('directGrid').getStore();
s.getAt(0).set('age', 10);
s.sync();
}
},'-',{
text : 'Remove',
handler : function(){
var s = Ext.getCmp('directGrid').getStore();
s.removeAt(0);
s.sync();
}
},'-']
});


As you see, Read/Update worked well.
However, when I tried to create new record, it did not work. No request to server side.
Which means Nothing happened. As I know, it should send data to "/common/command.jsp?action=create" from api(create).

Also when I removed record and invoke "sync", I got error , "TypeError: url is undefined".
Seems that it did not find out url for destory.

Please give me an advice. I'm having this issue for a long time.

skirtle
30 Jan 2014, 12:57 PM
You've misspelt destroy.

Sync will only add new records if they are phantom. As you've given your record an id it is assumed to be non-phantom. You can either remove the id or manually set the phantom property.

jeongyej
30 Jan 2014, 6:05 PM
Thank a lot, I've almost resolved this problem.