View Full Version : REST + form submit

24 Oct 2011, 3:55 PM
I am trying MVC architecture + REST + form. I have some difficulties with the new syntax.

My store:

var userstore = Ext.define('APP.store.Users', {
extend: 'Ext.data.Store',
model : 'APP.model.User',
autoLoad : true,
proxy : {
type : 'rest',
url : url_server + 'user',
reader : {
type : 'json',
root : 'users'
writer : {
type : 'json',
writeAllFields : false,
root : 'users',

My view :

Ext.define('APP.view.user.edit' , {

extend: 'Ext.form.Panel',
alias : 'widget.useredit',
title : 'Edit a user',
store: 'Users',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
submitOnAction : false,
// The fields
defaultType: 'textfield',
items: [...],

buttons: [{
text: 'Reset',
handler: function() {
}, {
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {

var values = form.getValues();

var obj = Ext.create('APP.model.User',values);

//what HERE?
renderTo: Ext.getBody()

My questions :
- I tried to make it work with submit but it doesn't work, is it possible?
- I tried the following lines without success instead of "//what HERE":
and obj.save();
and userstore.add(obj);
--> I can't do that APP.model.User.insert(..), why?
--> how can I add my form values to my store?

25 Oct 2011, 1:24 AM
I'm not sure if your store is needed because you access the model directly


But you have defined the proxy only in the store. You should define it in the model instead.

I just have a model with a proxy and use record.save() function to send my record to the server.
this looks something like this

Ext.define('Record', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/record'

success:function(rec,op) {
failure:function(rec,op) {

hope this helps a bit

25 Oct 2011, 2:09 PM
thank you, it works with the proxy in the model.
But I still don't understand how get a component when you define it like this:

Ext.define('mygrid',{...}); --> ?
instead of var mygrid= new Ext.grid.EditorGridPanel({...}); --> grid.myfunction();

do you know?

25 Oct 2011, 4:52 PM
Ext.define isn't the same as new. it just defines a object after that you can create it with var xx = new mygrid or var xx = Ext.create('mygrid',{})

25 Oct 2011, 5:35 PM
yes you're right I forgot it, it like a class and an object, it makes sence... so when you are doing an MVC architecture, you define all the class with ext.define for store/model/view/controller and in app.js you do an ext.create to init a new object (your application), and you attached some controllers. Then, in your controller, in the function init you create your object view. So my question is : when you are in a class (ext.define), you should use "this" to access to your object, it is working for the event listener because it is at the same level but it is not working when you defined docked items because you are in a sublevel (in term of dom)... so what is the syntax for doing something like this : this.up(???).this.getSelectionModel().getSelection()?

(as we do in an object : var selection = grid.getView().getSelectionModel().getSelection()[0];)

Ext.define('APP.view.chain.list' , {

extend: 'Ext.grid.Panel',
alias : 'widget.chainlist',
title : 'All chains',
store: 'Chains',
dockedItems: [{
}, {
iconCls: 'icon-delete',
text: 'Delete',
disabled: true,
itemId: 'delete',
handler: function(){
??? .getSelectionModel().getSelection();