PDA

View Full Version : Grid reload after form submit



raja.ecom
13 Oct 2011, 5:57 AM
Hi everyone I want to reload grid after form submit,

var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
type: 'rest',
url: '-----------------------------',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
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 eventForm = Ext.create('Ext.form.Panel', {
url:'<?php echo base_url();?>user/event_save/<?php echo $id; ?>/<?php echo $grouId ;?>',
frame:true,
title: 'Event Form',
bodyStyle:'padding:5px 5px 0',
width: 500,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 90
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},

items: [
{
fieldLabel: 'Event',
name: 'name',
allowBlank: false
}, {
xtype: 'textarea',
fieldLabel: 'Description',
name: 'description',
multiline: true
}, {
xtype: 'textarea',
fieldLabel: 'Highlight',
name: 'highlight',
multiline: true
}, {
fieldLabel: 'Event Location',
name: 'eventlocation'
}, {
xtype: 'datefield',
fieldLabel: 'Start Date',
name: 'startdate',
allowBlank: false
}, {
xtype: 'datefield',
fieldLabel: 'End Date',
name: 'enddate',
allowBlank: false
},{
xtype: 'timefield',
fieldLabel: 'Start Time',
name: 'starttime',
value: '',
minValue: '0:00am',
maxValue: '12:59pm'
}, {
xtype: 'timefield',
fieldLabel: 'End Time',
name: 'endtime',
value: '',
minValue: '0:00am',
maxValue: '12:59pm'
}, {
xtype: 'hidden',
fieldLabel: 'Evnt Id',
name: 'eventid'
}
],

buttons: [{
text: 'Save',
handler: function(){
if(eventForm.getForm())
{
eventForm.getForm().submit({
success: function(a, b)
{
//Ext.Msg.alert('Message', 'Event Data is Successfully saved');
eventForm.getForm().reset();
store.load(); //Not working -help needed
grid.store.load(); //Not working -help needed
grid.getView().refresh(); // Not working-help needed
},

failure: function(a, b)
{
Ext.Msg.alert('Failure', b.result.error);
}

});
}
}
},{
text: 'Cancel'
}, {
text: 'Reset',
handler: function()
{
eventForm.getForm().reset();
}
}]
});

any help will be appreciated

arthurakay
13 Oct 2011, 7:02 AM
First... please use the CODE or PHP tags when posting code.



success: function(a, b) {
//Ext.Msg.alert('Message', 'Event Data is Successfully saved');
eventForm.getForm().reset();
store.load(); //Not working -help needed
grid.store.load(); //Not working -help needed
grid.getView().refresh(); // Not working-help needed
}


I don't see anywhere in your code where "grid" is defined.

Second, "Not working" doesn't tell me anything. Do you get errors? Does nothing happen? What about it doesn't work?

raja.ecom
13 Oct 2011, 9:36 PM
I am sorry, actully I first time posted code on any forum, I am resending code here again with
Tags, hopefully that ll is clear now.....


Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'hide',
useNull: true
}, "game", .... ]
});
Ext.onReady(function(){
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
type: 'rest',
url: 'http://myurl.....',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
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.body,
plugins: [rowEditing],
width: 750,
height: 200,
frame: true,
title: 'Group name',
store: store,
iconCls: 'icon-user',
columns: [

{
text: 'Id',
flex: 1,
hidden: true,
sortable: true,
dataIndex: 'id' ,
field: {
xtype: 'hidden'
}
},
......... ],
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);
}
}
}]
}]
}

);

var eventForm = Ext.create('Ext.form.Panel', {
url:'http://myURL....',
frame:true,
title: 'Event Form',
bodyStyle:'padding:5px 5px 0',
width: 500,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 90
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},

items: [
{
fieldLabel: 'Event',
name: 'name',
allowBlank: false
}, ......... ],

buttons: [{
text: 'Save',
handler: function(){
if(eventForm.getForm())
{
eventForm.getForm().submit({
success: function(a, b)
{

eventForm.getForm().reset();

grid.store.load(); //Doesn't work for, I have also tried stor.load(); but no luck
grid.getView().refresh(); // Doesn't work
},

failure: function(a, b)
{
Ext.Msg.alert('Failure', b.result.error);
}

});
}
}
},{
text: 'Cancel'
}, {
text: 'Reset',
handler: function()
{
eventForm.getForm().reset();
}
}]
});

eventForm.render(document.body);

});

skirtle
13 Oct 2011, 11:23 PM
Add some logging to your success handler, confirm that it is actually being hit.

Are you getting any error messages? Can you see the request in Firebug/Chrome? What response is coming back from the server?

Asken
13 Oct 2011, 11:58 PM
I was just playing around with this and maybe this will help if you only want to update the row you edited... (If I didn't use the idProperty it automatically updated the entire grid but that was probably in error).


Ext.define('Person', { extend: 'Ext.data.Model',

idProperty: 'id',

fields: [
{
name: 'id',
type: 'hide',
useNull: true
}, "game", .... ]
});

Also when saving the record make sure the entire record gets returned from the server.