PDA

View Full Version : Help adding new row



metalinspired
8 Apr 2012, 9:27 AM
Hello,

First time ExtJs user here :D

I followed tutorial on Sencha docs for MVC application architecture and using what I learned there I went on creating my own application and now I'm stuck :(

Here's the deal. I can't get my add new user form window to actually create new row in panel. I tried my best to google for solution but no avail.

Let me explain a bit more. I use, almost, exact window to edit user data as described in docs. Now, since form to add new user should be identical to edit form I tried next approach. Create same window and simply change title of window and change click event for save button. I actually managed to get that part working but I can't get reference to store to add form data to it. In docs this.getUsersStore() was used and that call works when editing existing user but not when adding.

Here's a part of my controllers code:


init: function() {
this.control ({
'userlist button[action=new]': {
click: this.newUser
},
'userlist button[action=edit]': {
click: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
},

newUser: function() {
var view = Ext.widget('useredit');

view.setTitle('Add new user');

//Here I change behavior of save button
var button = view.down('button[action=save]');
button.removeListener('click', this.updateUser);
button.addListener('click', this.addUser);
},

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

// Here I should add new row to panel and then simply call sync but I'm not getting it to work
},

editUser: function(button) {
var view = Ext.widget('useredit'),
grid = button.up('gridpanel');

view.down('form').loadRecord(grid.getSelectionModel().getSelection()[0]);
},

updateUser: function(button) {
var win = button.up('window'),
form = win.down('form');

form.getRecord().set(form.getValues());
win.close();
this.getUsersStore().sync();
}


Thanks for any help.

vietits
8 Apr 2012, 4:09 PM
See my suggestion in your code.


init: function() {
this.control ({
'userlist button[action=new]': {
click: this.newUser
},
'userlist button[action=edit]': {
click: this.editUser
},
// 1. No need because handler will be attached to button basing on editing context. If this is still used, updateUser will also be called anytime user click save button regardless which handler is attached to it.
// 'useredit button[action=save]': {
// click: this.updateUser
//}
});
},

newUser: function() {
var view = Ext.widget('useredit');

view.setTitle('Add new user');

//Here I change behavior of save button
var button = view.down('button[action=save]');
// 2. No need because view is new instance, there is no event handler attached to button yet.
// button.removeListener('click', this.updateUser);

// 3. No scope specified => addUser will be run in the context of button, not controller
// button.addListener('click', this.addUser);

// 4. Add event handler with scope clearly specified. addUser will be run in the context of controller not button.
button.addListener('click', this.addUser, this);
},

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

// close (and destroy by default) window
win.close();

var store = this.getUsersStore();
// add new record to store
store.add(values);
// sync store with database
store.sync();
},

editUser: function(button) {
var view = Ext.widget('useredit'),
grid = button.up('gridpanel');

view.down('form').loadRecord(grid.getSelectionModel().getSelection()[0]);

// attach click event handler to the button
var button = view.down('button[action=save]');
button.addListener('click', this.updateUser, this);
},

updateUser: function(button) {
var win = button.up('window'),
form = win.down('form');

form.getRecord().set(form.getValues());
win.close();
this.getUsersStore().sync();
}

metalinspired
8 Apr 2012, 10:13 PM
I went to bed last thinking it must have something to do with scope.
Just couldn't figure out what and how.
I can't wait to get home and try what you suggest.
Thank you :)

metalinspired
9 Apr 2012, 5:42 AM
Your solution works like charm. Thank you once again :)