PDA

View Full Version : ExtJS form submission ?



bomslang
4 Sep 2012, 8:05 AM
Folks,

I have a form data to be submitted to the server. I am sending this to server side using REST.
There's no issue with REST code.

But I don't know how to send the form record to the server side code ?

E.g


Ext.define('Record', {
extend: 'Ext.data.Model',
fields: [{name: 'id', type:'int'}, {name:'content', type:'string'} ,{name: 'name', type:'string'} ,{name:'title', type:'string'}],
proxy: new Ext.data.proxy.Rest({
api: {
read : 'feedback/read.action',
create : 'feedback/create.action',
update: 'feedback/update.action',
destroy: 'feedback/delete.action'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true
}
})
});

var record = Ext.create('Record');
var store = new Ext.data.Store({
model: record,
autoSave: false,
autoLoad: true
});


and in the same app.js, I have this form ..



items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Last Three Jobs',
labelWidth: 100,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'textareafield',
grow: true,
fieldLabel: 'Content',
name: 'content',
flex: 1
}],
}, {
xtype: 'button',
text: 'Submit',
align: 'right',
handler: function() {
var form = this.up('form').getForm();

if(form.isValid()) {

// How to post the form values to server side REST ?
// I am not sure if below code is correct ?
var values = form.getValues();
record.save('Record', values);
store.sync();


Please point me in correct direction, if I am missing something.

jay@moduscreate.com
4 Sep 2012, 8:07 AM
you could use form.submit();

or if you truly want binding with models, you'll have to read this post: http://moduscreate.com/expert-ext-js-model-integration-in-forms/

jay@moduscreate.com
4 Sep 2012, 8:07 AM
FWIW, the *manual* way of doing something like this was detailed inside of Ext JS in Action for 3.x!

bomslang
4 Sep 2012, 8:14 AM
Is this the right way ?


form.submit({
success: function(response) {
Ext.Msg.alert('Success');
},
failure: function(response) {
Ext.Msg.alert('Failed');
});

But where am I submitting the values in form submit way ?

jay@moduscreate.com
4 Sep 2012, 8:24 AM
Is this the right way ?


form.submit({
success: function(response) {
Ext.Msg.alert('Success');
},
failure: function(response) {
Ext.Msg.alert('Failed');
});

But where am I submitting the values in form submit way ?

You're doing it in your "submit button" handler.