PDA

View Full Version : FormPanel + Store + Submit data to server



melnac
25 May 2014, 10:45 AM
Hi,
i have a simple FormPanel and i want to submit the data inserted via a store with the specification of the api for CRUD operations:



/* definition of the Model */
Ext.define('FrameworkLib.web.model.Menu', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'iconPath', type: 'string' },
{ name: 'url', type: 'string' },
{ name: 'tooltip', type: 'string' },
{ name: 'parentId', type: 'string' },
{ name: 'menuIndex', type: 'int' },
]
});
/* definition of the Model */

/* Store definition... */
Ext.define('FrameworkLib.web.MenuStore', {
extend: 'Ext.data.TreeStore',
model: 'FrameworkLib.web.model.Menu',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
create: '/workers/MenuController.ashx?action=create',
read: '/workers/MenuController.ashx?action=read',
update: '/workers/MenuController.ashx?action=update',
destroy: '/workers/MenuController.ashx?action=destroy'
},
actionMethods : {
create : 'POST',
read : 'POST',
update : 'POST'
},
reader: {
type: 'json',
root: 'children',
getResponseData: function (response) {
var jsonData = Ext.JSON.decode(response.responseText);

var objs = this.readRecords(jsonData.children);
return objs;
}
},
writer: {
type: 'json',
root: 'data',
returnJson: true
writeAllFields: true,
allowSingle: false
}
}
});

/*
*/
Ext.define('FrameworkLib.web.MenuFormPanel', {
extend: 'Ext.form.Panel',

config: {},
constructor: function (config) {
this.initConfig(config);
return this.callParent(arguments);
},

initComponent: function () {
var me = this;

Ext.apply(this,
{
id : 'MenuFormPanelId',
title : 'Menu Item',
method :'POST',
resizable : false,
bodyPadding : '5',
buttonAlign : 'center',
collapsible : true,
border : true,
trackResetOnLoad : true,
standardSubmit: true,
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Item Name',
name: 'Name',
allowBlank: false
}, {
fieldLabel: 'Icon',
name: 'IconPath',
xtype: 'filefield'
}, {
fieldLabel: 'Url',
name: 'Url'
}, {
fieldLabel: 'Tooltip',
name: 'Tooltip'
}],
buttons: [{
text: 'New',
handler: function () {

var theStore = Ext.create('FrameworkLib.web.MenuStore');

var form = this.up('form').getForm();
var record = form.getRecord();

if(!record) {
record = Ext.create('FrameworkLib.web.model.Menu');
}

var values = form.getValues(false,false,false,true);

record.set(values);

theStore.create(record);
}
},{
text: 'Save',
handler: function () {

var theStore = Ext.create('FrameworkLib.web.MenuStore');

var form = this.up('form').getForm();
var record = form.getRecord();

if(!record) {
record = Ext.create('FrameworkLib.web.model.Menu');
}

var values = form.getValues();

record.set(values);

theStore.update(record);
}
}, {
text: 'Cancel',
handler: function () {
this.up('form').getForm().reset();
}
}]
});

me.callParent(arguments);
}
});


When i press the "New" button, an empty record is sent to server.

Debugging the code, i see the values taken from the form and assigned to the newly created record, but on the server side, i receive always an empty record.

Surely i miss some stupid thing, but i can't be able to see what is.

Thank in advace,
Giuseppe.

mitchellsimoens
27 May 2014, 9:51 AM
Why are you wanting to use a Store? Why not just use a form submit?

melnac
29 May 2014, 11:51 AM
Hi,
i want to use a store because the example is extracted from a more complex script.

I want a store so the grid present in the page can be able to download the data, others controls eventually present can use it, etc etc.

Can you help me with the code posted ?

Giuseppe.

undeclared
29 May 2014, 1:31 PM
All you really need to do to to get what you're looking for is turning off autoSync on your store, then doing store.sync() manually when you want to insert the new records to the DB. That's it.

melnac
30 May 2014, 12:39 PM
Hi,
i write the handler in this way:



handler: function () {

var theStore = Ext.create('FrameworkLib.web.MenuStore');

var form = this.up('form').getForm(); // get the basic form
var record = form.getRecord(); // get the record

if (!record) {
record = Ext.create('FrameworkLib.web.model.Menu');
}

var values = form.getValues(false, false, false, true);

record.set(values);

theStore.create(record);
theStore.sync();
}


without autoSync in the store, but i already get an empty record on server.

Can you provide me a working example ?

Thanks in advance,
Giuseppe.

melnac
5 Jun 2014, 1:17 PM
It seems that not work for TreeStore.

but when i try to use CRUD API with a simple Store, it works.

So, i use at the moment two stores, a tree store to load hierarchical data and a simple store to do crud operation from form.

Giuseppe.