PDA

View Full Version : not able to execute proxy update of the store



rushi2440
24 Mar 2012, 4:34 AM
hi..

sencha forum members I am having one problem with updating my form.

my grid panel companydetail code is below

Ext.define('rms.view.companymgt.companyDetail', {
extend: 'Ext.grid.Panel',
alias: 'widget.companydetail',
id: 'companydetail',
itemId: 'companydetail',
store: 'company',
forceFit: true,
frame: true,
initComponent: function() {
var me = this;


Ext.applyIf(me, {
viewConfig: {


},
columns: [{xtype: 'rownumberer', width: 40},
{
xtype: 'gridcolumn',
dataIndex: 'cmptitle',
text: 'Company Title'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpname',
text: 'Company Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpfax',
text: 'Fax'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpcontact',
text: 'Contact No.'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpwebsite',
text: 'Website'
},{
xtype: 'gridcolumn',
dataIndex: 'cmpemail1',
text: 'Email'
},{
xtype: 'gridcolumn',
text: 'Company Logo',
dataIndex: 'cmplogopath',
renderer: function(value, p, r){
return '<img src="' + r.data['cmplogopath']+""+ r.data['cmplogo'] + '">';
}
},{
xtype: 'actioncolumn',
id:'companyedit-btn',
header: 'Edit Company',
width: 80,
items: [{
iconCls: 'icon-edit-record',
tooltip: 'Edit Company',
text: 'edit'
}]
},
{
xtype: 'actioncolumn',
id:'projectdelete',
header: 'Delete Project',
width: 80,
items: [{
iconCls: 'icon-delete-record',
action:'delete',
tooltip: 'delete record',
text: 'delete'
}]
}],
//plugins: [rowEditing],
dockedItems: [
{
xtype: 'pagingtoolbar',
displayInfo: true,
store: 'company',
dock: 'bottom'
},
{
xtype: 'toolbar',
id: 'companydetailtoolbar',
dock: 'top',
items: [
{
xtype: 'splitbutton',
text: 'File',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
id: 'mnuCompany',
itemId: 'mnuCompany',
text: 'New Company'
},
{
xtype: 'menuseparator'
},
{
xtype: 'menuitem',
id: 'mnuExit',
text: 'Exit',
action: 'btn-exit-company'
}
]
}
},
{
xtype: 'tbfill'
},
{
xtype: 'textfield',
fieldLabel: 'Search'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Export',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
id: 'mnuExcel',
text: 'Excel'
},
{
xtype: 'menuseparator'
},
{
xtype: 'menuitem',
id: 'mnuCSV',
text: 'CSV'
}
]
}
}
]
}
]
});


me.callParent(arguments);
}
});


on click with the button having action btn-update-company my controller execute below function to edit the form

editCompany: function(grid, no, rowindex,colindex,temp) {
var rec = grid.store.getAt(rowindex);
var countryId = rec.get('id');
var store = Ext.data.StoreManager.lookup('company');
store.load({
params: {'countryId':countryId},
scope: this
});
this.getCompanyEdit().editform=1;
this.getCompanyEditForm().loadRecord(rec);
this.getCompanyEdit().show();
},



and my editCompany form code is below

Ext.define('rms.view.companymgt.companyEdit', {
extend: 'Ext.window.Window',
alias: 'widget.companyeditwindow',
id: 'companyeditwindow',
editform:1,
itemId: 'companyeditwindow',
store: 'companyStore',
constrain: true,
height: 595,
width: 875,
layout: {
type: 'column'
},
title: 'Company',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'form',
itemId: 'editmainform',
frame: true,
height: 546,
margin: 2,
width: 838,
layout: {
type: 'column'
},
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
{

xtype: 'fieldset',
height: 134,
margin: 2,
width: 400,
title: 'Company Information',
items: [
{
xtype: 'textfield',
id: 'cmptitle',
itemId: 'cmptitle',
margin: 5,
width: 366,
name: 'cmptitle',
fieldLabel: 'Company Title',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpname',
itemId: 'cmpname',
margin: 5,
name: 'cmpname',
fieldLabel: 'Company Name',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpwebsite',
itemId: 'cmpwebsite',
margin: 5,
name: 'cmpwebsite',
fieldLabel: 'Website',
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 138,
margin: 2,
width: 400,
title: 'Company Contact',
items: [
{
xtype: 'textfield',
id: 'cmpfax',
itemId: 'cmpfax',
margin: 5,
name: 'cmpfax',
fieldLabel: 'Fax No',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpcontact',
itemId: 'cmpcontact',
margin: 5,
name: 'cmpcontact',
fieldLabel: 'Contact No',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpemail1',
itemId: 'cmpemail1',
margin: 5,
name: 'cmpemail1',
fieldLabel: 'Email',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpemail2',
itemId: 'cmpemail2',
margin: 5,
name: 'cmpemail2',
fieldLabel: 'Other Email',
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 350,
margin: 2,
width: 397,
title: 'Company Address',
items: [
{
id: 'btn-add-country',
itemId: 'btn-add-country',
xtype: 'button',
margin: '4 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add Country',
action: 'btn-add-country'
},
{
xtype: 'combobox',
id: 'countryname',
itemId: 'countryname',
name: 'countryname',
margin: 5,
width: 294,
fieldLabel: 'Country',
emptyText: 'Select Country...',
displayField: 'countryname',
store: 'country',
valueField: 'countryid'
},
{
xtype: 'button',
id: 'btn-add-state',
itemId: 'btn-add-state',
margin: '0 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add State',
action: 'btn-add-state'
},
{
xtype: 'combobox',
id: 'statename',
itemId: 'statename',
margin: 5,
width: 294,
name: 'statename',
fieldLabel: 'State',
emptyText: 'Select State...',
displayField: 'statename',
store: 'state',
valueField: 'stateid'
},
{
id: 'btn-add-city',
itemId: 'btn-add-city',
xtype: 'button',
margin: '0 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add City',
action: 'btn-add-city'
},
{
xtype: 'combobox',
id: 'cityname',
itemId: 'cityname',
margin: 5,
width: 294,
name: 'cityname',
fieldLabel: 'City',
emptyText: 'Select City...',
displayField: 'cityname',
store: 'city',
valueField: 'cityid'
},
{
xtype: 'textareafield',
height: 75,
id: 'cmpaddress',
itemId: 'cmpaddress',
margin: 5,
width: 380,
name: 'cmpaddress',
fieldLabel: 'Address',
anchor: '100%'
},
{
xtype: 'htmleditor',
height: 146,
id: 'cmpdesc',
itemId: 'cmpdesc',
margin: 5,
style: 'background-color: white;',
name: 'cmpdesc',
fieldLabel: 'Description',
hideLabel: true,
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 350,
margin: 2,
width: 398,
title: 'Company Logo',
items: [
{
xtype: 'form',
frame: true,
itemId: 'logoform',
id: 'logoform',
height: 320,
width: 375,
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
{
xtype: 'image',
height: 158,
itemId: 'cmplogoimg',
margin: 10,
width: 287,
src:'http://www.sencha.com/img/sencha-large.png'
},
{
xtype: 'filefield',
margin: '10 0 0 15',
width: 296,
name: 'file',
id: 'file',
itemId: 'file',
fieldLabel: 'File',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
emptyText: 'Select file',
buttonText: 'Select a File...'
}],

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
alert('VALUE IS :'+form.getValues());
if(form.isValid()){
form.submit({
url: 'company/UploadFile.action',
waitMsg: 'Uploading your file...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your file has been uploaded.');
Ext.Ajax.request({
url: 'company/GetImages.action',
scope: this,
success: function(response,opts) {
console.log('GET IMAGES');
}
});
}
});
}

}
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Reset',
itemId: 'btn-reset',
action: 'btn-reset'
,
handler: function() {
this.up('form').getForm().reset();
}
}
]
}]
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
height: 27,
width: 804,
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Save',
action: 'btn-update-company'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Exit',
action: 'btn-exit-company'
}
]
}
]
}
]
});


me.callParent(arguments);
}
});


my editCompany has save button which on click execute below controller function to update the company details

updateCompany: function(btn){
alert('UPDATE BUTTON CLICKED');
var win = btn.up('window');
var form = win.down('form').getForm();

var values = form.getValues();
console.log(values);

record = Ext.create('rms.model.companyModel');
record.set(values);

this.getCompanyStore().add(record);
this.getCompanyStore().update();
},


but don't able to understand why update ajax request is made with empty data

my companyStore code is below

Ext.define('rms.store.company', {
extend: 'Ext.data.Store',
model: 'rms.model.companyModel',
storeId: 'companyStore',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read : 'company/GetCompany.action',
create : 'company/CreateCompany.action',
update: 'company/UpdateCompany.action',
destroy: 'company/DeleteCompany.action'
},
reader: {
type: 'json',
root: 'companydata',
totalProperty: 'total',
successProperty: 'success'

},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'companydata'
}
}
});


my companyModel code is below

Ext.define('rms.model.companyModel', {
extend: 'Ext.data.Model',
fields : [
{ name: 'id', type: 'int', useNull: true, mapping: 'id'},
{ name: 'cmpname', type: 'string', mapping: 'cmpname'},
{ name: 'cmptitle', type: 'string', mapping: 'cmptitle'},
{ name: 'cmpdesc', type: 'string', mapping: 'cmpdesc'},
{ name: 'cmpfax', type: 'string', mapping: 'cmpfax'},
{ name: 'cmpcontact', type: 'string', mapping: 'cmpcontact'},
{ name: 'cmpwebsite', type: 'string', mapping: 'cmpwebsite'},
{ name: 'cmpemail1', type: 'string', mapping: 'cmpemail1'},
{ name: 'cmpemail2', type: 'string', mapping: 'cmpemail2'},
{ name: 'countryid', type: 'int', mapping: 'countryid'},
{ name: 'stateid', type: 'int', mapping: 'stateid'},
{ name: 'cityid', type: 'int', mapping: 'cityid'},
{ name: 'cmplogo', type: 'string', mapping: 'cmplogo'},
{ name: 'cmplogopath', type: 'string', mapping: 'cmplogopath'},
{ name: 'cmpaddress', type: 'string', mapping: 'cmpaddress'},
]
});


Don't know what's the reason why my update request from the controller pass empty data. Also the id of the edited company is not available when I print on my console .

please suggest me some solution I can try, so my update request passes perfectly with the data along with the id of the company to be updated

Yogendra Singh
Sr. Programmer
Kintudesigns.com

mitchellsimoens
24 Mar 2012, 7:24 AM
Instead of executing update(), try sync()

dedoz
24 Mar 2012, 7:28 AM
Extjs version ?
i dont see any update method for stores in docs for 4.1 versions (neither in the online docs) to respond to your code


this.getCompanyStore().update();

maybe you are trying to do a sync() ?

mitchell was faster D:

rushi2440
25 Mar 2012, 9:03 PM
Instead of executing update(), try sync()

when I tried to use sync() on the store it executes the create function not the update function.

No doub't with sync() create request is made and my data gets persisted successfully. But I need to update the data by calling the update request of the proxy.


when I make use of update, the update request is made but it makes request with null data. No data has been passed.

for sync I am calling below code

saveCompany: function(btn) {
var win = btn.up('window');
var form = win.down('form').getForm();

var values = form.getValues();

record = Ext.create('rms.model.companyModel');
record.set(values);

this.getCompanyStore().add(record);
this.getCompanyStore().sync();

},


and for update I am using below code

updateCompany: function(btn){
alert('UPDATE BUTTON CLICKED');
var win = btn.up('window');
var form = win.down('form').getForm();

var values = form.getValues();
console.log(values);

record = Ext.create('rms.model.companyModel');
record.set(values);

this.getCompanyStore().add(record);
this.getCompanyStore().update();
},


but don't understand why the update request is made with null data eventhough I am adding all the values to model first and then that model to store. And after that calling the update function.

Please guide me with this, what's wrong why the update is called with null values to server side.

Yogendra Singh
Sr. Programmer
Kintudesigns.com