PDA

View Full Version : HttpProxy CRUD Create is not called, but Update and Destroy are working Properly.



venkisakthi
30 Jan 2011, 8:41 PM
Hi.,

I am trying to integrate extjs CRUD with my application.

Here i have problem with saving newly added record. But editing old rows and deleting rows are working properly.

Even the write event is firing after i call store.save().

can u plz find where goes wrong im my code.

Here is the code.


var store;

Ext.onReady(function() {



Ext.ns('App', 'App.user');

/**
* App.user.Grid
* A typical EditorGridPanel extension.
*/

App.user.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
renderTo: 'user-grid',
iconCls: 'silk-grid',
//frame: true,
height: 300,
width: 950,
style: 'margin-top: 10px',

initComponent : function() {



// typical viewConfig
this.viewConfig = {
forceFit: true
};

// relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
this.relayEvents(this.store, ['destroy', 'save', 'update']);

// build toolbars and buttons.
this.tbar = this.buildTopToolbar();
//this.bbar = this.buildBottomToolbar();
//this.buttons = this.buildUI();



// super
App.user.Grid.superclass.initComponent.call(this);
},

/**
* buildTopToolbar
*/
buildTopToolbar : function() {
return [{
text: 'Add',
iconCls: 'silk-add',
handler: this.onAdd,
scope: this
}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: this.onDelete,
scope: this
}, '-'];
},

/**
* buildBottomToolbar
*/
buildBottomToolbar : function() {
return ['<b>@cfg:</b>', '-', {
text: 'autoSave',
enableToggle: true,
pressed: true,
tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',
toggleHandler: function(btn, pressed) {
this.store.autoSave = pressed;
},
scope: this
}, '-', {
text: 'batch',
enableToggle: true,
pressed: true,
tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',
toggleHandler: function(btn, pressed) {
this.store.batch = pressed;
},
scope: this
}, '-', {
text: 'writeAllFields',
enableToggle: true,
tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',
toggleHandler: function(btn, pressed) {
store.writer.writeAllFields = pressed;
},
scope: this
}, '-'];
},

/**
* buildUI
*/
buildUI : function() {
return [{
text: 'Save',
iconCls: 'icon-save',
handler: this.onSave,
scope: this
}];
},

/**
* onSave
*/
onSave : function(btn, ev) {
this.store.save();
},

/**
* onAdd
*/

onAdd : function(btn, ev) {
var u = new this.store.recordType({
code:'code',
complaintType: '-select-',
expStartDate : (new Date()).format('d/m/Y'),
expEndDate : (new Date()).format('d/m/Y')
});
this.stopEditing();
this.store.insert(0, u);
this.startEditing(0,0);
},

/**
* onDelete
*/
onDelete : function(btn, ev) {
var index = this.getSelectionModel().getSelectedCell();
if (!index) {
return false;
}
var rec = this.store.getAt(index[0]);
this.store.remove(rec);
}
});

?

// Create HttpProxy instance. Notice new configuration parameter "api" here instead of load. However, you can still use
// the "url" paramater -- All CRUD requests will be directed to your single url instead.

var proxy = new Ext.data.HttpProxy({
api: {
read : '<%=request.getContextPath()%>/fms/woDetails.loadJobStatusForGrid.do',
create: '<%=request.getContextPath()%>/fms/woDetails.createJobStatus1.do',
update: '<%=request.getContextPath()%>/fms/woDetails.updateJobStatus.do',
destroy: '<%=request.getContextPath()%>/fms/woDetails.deleteJobStatus.do'
}
});


// 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',
idProperty: 'id',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, [
{name: 'id',allowBlank: false},
{name: 'woId',allowBlank: false},
{name: 'sequence',allowBlank: false},
{name: 'code',allowBlank: false},
{name: 'complaintType', allowBlank: false},
{name: 'expStartDate', allowBlank: false, type: 'date',dateFormat: 'D M d H:i:s T Y'},
{name: 'expEndDate', allowBlank: false, type: 'date',dateFormat: 'D M d H:i:s T Y'},
{name: 'remarks', allowBlank: false}
]);


// The new DataWriter component.

var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true,
toHash: function(rec) {
var hash = this.constructor.prototype.toHash.call(this, rec);
hash['expStartDate'] = hash['expStartDate'].format('d/m/Y');
hash['expEndDate'] = hash['expEndDate'].format('d/m/Y');
return hash;
}
});


// Typical Store collecting the Proxy, Reader and Writer together.
store = new Ext.data.Store({
id: 'id',
proxy: proxy,
reader: reader,
sortInfo: {field:'sequence', direction:'ASC'},
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
autoSave: true // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.

});


// load the store immeditately

store.load();


////
// ***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, "Before " + 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) {
alert(type);
if (type === 'remote') {
Ext.Msg.show({
title: 'REMOTE EXCEPTION',
msg: res.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
});


// A new generic text field

var textField = new Ext.form.TextField();

var fm = Ext.form;

// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.

var userColumns = [
{header: "woId", dataIndex: 'woId', hidden:true},
{header: "Sequence", sortable: true, dataIndex: 'sequence', hidden:true},
{header: "Code", width: 100, sortable: true, dataIndex: 'code', editor: textField},
{header: "Complaint-Type", width: 150, sortable: true, dataIndex: 'complaintType',
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform: 'complaintType',
lazyRender: true,
listClass: 'x-combo-list-small'
}),
renderer:function(value){
if(value==1){
return 'Materials';
}else if(value==2){
return 'Labours'
}else if(value==3){
return 'Other Hindrance'
}
}
},
{header: "Expected Start Date", width: 150, sortable: true, dataIndex: 'expStartDate', renderer: Ext.util.Format.dateRenderer('d/m/Y'),
editor: {
xtype: 'datefield',
format:'d-m-Y',
allowBlank: false
}
},
{header: "Expected End Date", width: 150, sortable: true, dataIndex: 'expEndDate', renderer: Ext.util.Format.dateRenderer('d/m/Y'),
editor: {
xtype: 'datefield',
format:'d-m-Y',
allowBlank: false
}
},
{header: "Remarks", width: 250, sortable: true, dataIndex: 'remarks', editor: textField}

];

?
Ext.QuickTips.init();

// create user.Grid instance (@see UserGrid.js)
var userGrid = new App.user.Grid({
renderTo: 'user-grid',
store: store,
columns : userColumns
});

});


function updateDataFeedback(){
Ext.MessageBox.show({
title:' Update Changes?',
msg: 'Update Job Status Details?',
buttons: Ext.MessageBox.YESNO,
fn: save,
icon: Ext.MessageBox.QUESTION
});
function save(btn){
if(btn=='yes'){
store.save();
}
}
}