PDA

View Full Version : Store doesn't save(), just load()



Gr3yh0und
3 Dec 2011, 4:13 PM
Hey guys,
I'm developing my first application and I'm running into a problem with my tries with a form.
So there is a grid and I have buttons for create/remove entries. I now added a form to add a entry.


Ext.define('Location', {
extend: 'Ext.data.Model',
fields: ['id', 'idcity', 'idrange', 'name', 'street', 'postal', 'city', 'comment']
});


var columns_location = [
{ id: 'xid', header: 'ID', dataIndex: 'id', flex: 1, sortable: true, editor: {allowBlank: false} },
{ id: 'xidcity', header: 'IDcity', dataIndex: 'idcity', flex: 1, sortable: true, editor: {allowBlank: false} },
{ id: 'xidrange', header: 'IDrange', dataIndex: 'idrange', flex: 1, sortable: true, editor: {allowBlank: false} },
{ id: 'xname', header: 'name', dataIndex: 'name', flex: 1, sortable: true, editor: {allowBlank: false} },
{ id: 'xstreet', header: 'street', dataIndex: 'street', flex: 1, sortable: true, editor: {allowBlank: false} },
{ id: 'xpostal', header: 'postal', dataIndex: 'postal', flex: 1, sortable: true, editor: {allowBlank: false} },
{ id: 'xcitys', header: 'city', dataIndex: 'city', flex: 1, sortable: true, editor: {allowBlank: false} },
];

var proxy_location = new Ext.data.proxy.Ajax({
type: 'ajax',
autoSave: true,
url: 'config/api.php',
// Which actions to use for each method
extraParams: {
select: 'id, idcity, idrange, name, street, postal, city',
table: 'location',
where: ''
},
actionMethods: {
read: 'POST',
update: 'POST',
create: 'POST',
destroy: 'POST'
},
// Reader plugin
reader: {
type: 'json',
model: 'Location',
root: 'results',
totalProperty: 'total',
idProperty: 'id'
},
// Writer plugin
writer: {
type: 'json',
model: 'Location',
root: 'results',
encode: 'true' // important to get JSON formated data

},
// URLs to query for each action
api: {
read: 'config/api.php?do=read',
update: 'config/api.php?do=update',
create: 'config/api.php?do=create',
destroy: 'config/api.php?do=destroy'
}
});

var store_location = new Ext.data.Store({
model: 'Location',
autoLoad: true,
pageSize: 25,
proxy: proxy_location
});

var win;
function showContactForm() {
if (!win) {
var form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: { margins: '0 0 10 0' },
// Textfields
items: [ {
xtype: 'textfield',
fieldLabel: 'Lokationskuerzel im Format: AAA000-0',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Bezeichnung',
id: 'name',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: 'Uebergeordneter Standort',
allowBlank: false
},{
xtype: 'fieldcontainer',
fieldLabel: 'Adresse',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',

fieldDefaults: { labelAlign: 'top' },

items: [{
flex: 3,
name: 'street',
fieldLabel: 'Strasse',
allowBlank: true
}, {
flex: 1,
name: 'postal',
fieldLabel: 'PLZ',
margins: '0 0 0 5',
allowBlank: true
}, {
flex: 2,
name: 'city',
fieldLabel: 'Ort',
allowBlank: false,
margins: '0 0 0 5',
allowBlank: true
}]
},{
xtype: 'textfield',
fieldLabel: 'IP Range',
allowBlank: true
},{
xtype: 'textareafield',
fieldLabel: 'Kommentar',
labelAlign: 'top',
flex: 1,
margins: '0',
allowBlank: true
}],

buttons: [{
text: 'Abbrechen',
handler: function() {
this.up('form').getForm().reset();
this.up('window').hide();
}
}, {
text: 'Erstellen',
handler: function() {
if (this.up('form').getForm().isValid()) {
// In a real application, this would submit the form to the configured url
//this.up('form').getForm().submit();

var r = Ext.ModelManager.create({
id: 'id22',
idcity: '11',
idrange: '11',
idregion: '11',
name: '11',
street: '11',
postal: '11',
city: '11',
comment: '11'
}, 'Location');
store_location.insert(0, r);
store_location.save();
this.up('form').getForm().reset();
this.up('window').hide();
Ext.MessageBox.alert('Success!', 'Die neue Lokation bla wurde erfolgreich angelegt!');


//store_location.load();
}
}
}]
});

win = Ext.widget('window', {
title: 'Neue Lokation erstellen',
closeAction: 'hide',
width: 300,
height: 550,
minHeight: 400,
layout: 'fit',
resizable: true,
modal: true,
items: form
});
}
win.show();

}


// Create Location Grid panel
var grid_location = Ext.create('Ext.grid.Panel', {
title: 'Lokationen',
store: store_location,
columns: columns_location,
frame: false,
width: 800,
height: 587,
loadMask: true,
dockedItems: [{
// Paging
xtype: 'pagingtoolbar',
store: store_location,
dock: 'bottom',
displayInfo: true,
pageSize: 25
},{
xtype: 'toolbar',
dock: 'top',
items: [{
// Create Button
xtype: 'button',
text: 'Erstellen',
iconCls: 'employee-add',
handler: showContactForm
},{
// Delete Button
xtype: 'button',
text: 'Entfernen',
iconCls: 'employee-remove',
handler: function() {
var sm = grid_location.getSelectionModel();
rowEditing.cancelEdit();
store_location.remove(sm.getSelection());
sm.select(0);
store_location.save();
}
}]
}],
listeners: {
'selectionchange': function(view, records) {
//grid.down('#removeGrid').setDisabled(!records.length);
},
'edit': function(data){
store_location.save();
//if(result !== '1'){ Ext.MessageBox.alert('Error','Could not save data!'); }
}
}
});




// Create Tabs with everything
Ext.create('Ext.tab.Panel', {
renderTo: 'editor-grid',
activeTab: 0,
width: 800,
height: 600,
plain: true,
layout: 'fit',
border: true,
closable: false,
defaults :{
autoScroll: true,
layout:'fit'
},
items: [ grid_overview, grid_city, grid_location ]
});


Any ideas? The entry is in the local store in the browser, but there is no usual CREATE event as JSON to the server :-/

mitchellsimoens
5 Dec 2011, 6:49 AM
Store doesn't have a save method, only the Model does. Store does have a sync method.