How to update a databse?

[Boston]

Hi,

I'm new on ExtJS and try to write an app which updates a record in a Database, using a PHP backend.

I started with the MVC example on this website. Reading the data works nearly fine.  I only get the notice "Store defined with no model. You may have mistyped the model name." since I'm using 4.0.7. Anyway the data is written in the grid.

After a dblclick a window with the record is opend. The record can be edited and is updated in the grid.

But when I try an update I face the error message "uncaught exception: You are using a ServerProxy but have not supplied it with a url."

I'm afraid that it is a typical mistake of an ExtJS beginner but I hope that anyone can help so that I can go forward.

Here my code:

Controller:

Ext.define('AM.controller.Haendler', {
extend: 'Ext.app.Controller',

views: [
'user.HListe',
'user.HEdit',
'user.NavTree'
],

stores: [
'Haendler'
],

models: [
'HaendlerAdr'
],

init: function() {
this.control({
'haendlerliste': {
itemdblclick: this.edithaendler
},
'edithaendler button[action=save]': {
click: this.updatehaendler
}

});
},

edithaendler: function(grid, record) {
var view = Ext.widget('edithaendler');

view.down('form').loadRecord(record);
},

updatehaendler: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();

record.set(values);
win.close();
this.getHaendlerStore().sync();

}
});

Store:

Ext.define('AM.store.Haendler', {
extend: 'Ext.data.Store',
model: 'AM.model.HaendlerAdr',
autoLoad: true,

proxy: {
type: 'ajax',
api: {
read: 'http://tools.example.com/ExtJS/php/backend.php?task=anzeigen',
update: 'http://tools.example.com/ExtJS/php/backend.php?task=aktualisieren'
},
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
}
}
});

Model:

Ext.define('AM.model.HaendlerAdr', {
extend: 'Ext.data.Model',
fields: ['ID','Name', 'Inhaber'],
proxy: {
type: 'ajax',
api: {
read: 'http://tools.example.com/ExtJS/php/backend.php?task=anzeigen',
update: 'http://tools.example.com/ExtJS/php/backend.php?task=aktualisieren'
},
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
}
}
});

Grid:

Ext.define('AM.view.user.HListe' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.haendlerliste',
width: 400,
x: 10,
y: 20,
title : 'Händler (Übersicht)',
store: 'Haendler',
collapsible: true,
collapseDirection: 'top',
titleCollapse: true,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'Haendler',
dock: 'bottom',
emptyMsg: "Keine Daten übermittelt",
displayInfo: true
}],
initComponent: function() {

this.columns = [
{header: 'ID', dataIndex: 'ID', flex: 1},
{header: 'Name', dataIndex: 'Name', flex: 1},
{header: 'Inahber', dataIndex: 'Inhaber', flex: 1}
];

this.callParent(arguments);
}
});

Window:

Ext.define('AM.view.user.HEdit', {
extend: 'Ext.window.Window',
alias : 'widget.edithaendler',

title : 'Händler bearbeiten',
layout: 'fit',
autoShow: true,

initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'Name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'Inhaber',
fieldLabel: 'Inhaber'
}
]
}
];

this.buttons = [
{
text: 'Speichern',
action: 'save'
},
{
text: 'Abbruch',
scope: this,
handler: this.close
}
];

this.callParent(arguments);
}
});

[wallynm]

Well, about the error, i will try to see what could be happeing, but, i found an error on your code:


Ext.define('AM.model.HaendlerAdr', {
extend: 'Ext.data.Model',
fields: ['ID','Name', 'Inhaber'],
proxy: {
type: 'ajax',
api: {
read: 'http://tools.example.com/ExtJS/php/backend.php?task=anzeigen',
update: 'http://tools.example.com/ExtJS/php/backend.php?task=aktualisieren' },
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
}
}
});

you don't need to define your proxy again on the mode, your store wil handle all url requests from the grid.
just set your model as here:


Ext.define('AM.model.HaendlerAdr', {
extend: 'Ext.data.Model',
fields: ['ID','Name', 'Inhaber']
});

[Boston]

Hi wallynm,

thanks for the hint. But I placed the additinal proxy definition after I got the error message. My first version looked like yours.

[flanders]

With regards to "But when I try an update I face the error message "uncaught exception: You are using a ServerProxy but have not supplied it with a url."" this quite a descriptive message imho.

The documentation for Ext.data.proxy.Ajax (which extends the serverproxy) shows a configuration property 'url' that needs to be provided. Like this:



Ext.define('AM.model.HaendlerAdr', {
extend: 'Ext.data.Model',
fields: ['ID','Name', 'Inhaber'],
proxy: {
type: 'ajax',
api: {
read: '?task=anzeigen',
update: '?task=aktualisieren'
},
reader: {
type: 'json',
root: 'results',
successProperty: 'success'
},
url: 'your/url'
}
});


Furthermore I would advise defining the proxy on the model and not on the store. This alows for using single instances of the model w/o a store (and reusing that proxy when working with an store) Not trying to start a flame war, but thought i point to the alternative ;)

[Boston]

Thanks to all for your advices.

But the final hint I fonud here (after you gave me the hint I should look for):
http://www.sencha.com/forum/showthread.php?156629-How-to-update-a-databse