dimanche 25 mai 2014

FormPanel + Store + Submit data to server


Code:



/* 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);
}
});

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.





Aucun commentaire:

Enregistrer un commentaire