PDA

View Full Version : ExtJS 4 MVC Application: Form undefined error



harsha.deep
18 Feb 2012, 10:38 AM
Hi,
I am new to ExtJS 4 and am trying to implement a simple application in MVC style. The documentation is really good and this is one of the topics covered in the Form package guide, but it doesn't seem to work in my case.

The app basically can create, edit and delete articles.The creation and editing are in pop-up windows.
The pop-up window contains a form with a text field and html-editor.
This is the error in Google Chrome Console when I click on the submit button in the window

31879
Here is the code which I've written
Model:

Ext.define('AM.model.Article', {
extend: 'Ext.data.Model',
fields: ['name', 'data'],
proxy: {
type: 'rest',
url: 'users/data',
reader: {
type: 'json',
root: 'myJaxBean',
successProperty: 'success'
},
writer: {
type: 'json'
}
}
});

View:

Ext.define('AM.view.New', {
extend: 'Ext.window.Window',
alias : 'widget.new',
title : 'New Article',
autoShow: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: 'fit',
bodyStyle:'padding:5px 5px 0',
width: '70%',
height: '40%',
initComponent: function() {
this.items = [
{
xtype: 'form',
anchor: '99%',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Article Name',
anchor: '99%'
},
{
xtype: 'htmleditor',
name : 'data',
fieldLabel: 'Article',
anchor: '99% -25'
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm(), // get the basic form
record = form.getRecord(); // get the underlying model instance
if (form.isValid()) { // make sure the form contains valid data before submitting
form.updateRecord(record); // update the record with the form data
record.save({ // save the record to the server
success: function(user) {
Ext.Msg.alert('Success', 'User saved successfully.')
},
failure: function(user) {
Ext.Msg.alert('Failure', 'Failed to save user.')
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
}
}
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
]
}
],


this.callParent(arguments);
}
});


and finally the code in my controller which makes the window visible
Controller:


.....

'viewport > panel > panel > tbar button[action=newarticle]' :{
click: this.newArticle
},
....

newArticle: function(button){
var view = Ext.widget('new');
},



Please point me in the right direction in case I am doing something wrong.
Thanks in advance.

vietits
18 Feb 2012, 4:09 PM
It seems that you are missing a step of loading record to your form with <form>.loadRecord(record). So when you call <form>.getRecord() in the handler of submit button click it will return null and throws exception.

harsha.deep
18 Feb 2012, 10:54 PM
Hi @vietits (http://www.sencha.com/forum/member.php?362966-vietits),

Thanks for the reply. The window here basically has a form with empty fields i.e. I have to create a new record which needs to go into the store .
The updating logic which I have applied in my code works just fine. I am able to load and edit record. But how to I create a new record in a store when working in an MVC type application.
I've seen many examples and tried the methods but they don't seem to work here.
One of the post related to this is
http://www.sencha.com/forum/showthread.php?120956-Form-and-data-store-examples


(http://www.sencha.com/forum/showthread.php?120956-Form-and-data-store-examples)

vietits
18 Feb 2012, 11:11 PM
With your code to create a new record and load it into your form, you could do as below:


...
newArticle: function(button){
var view = Ext.widget('new');
var form = view.down('form');
var record = Ext.create('AM.model.Article');
form.loadRecord(record);
},
...

harsha.deep
19 Feb 2012, 1:11 AM
Hi,

It worked. Thanks a lot for the effort put in.


With your code to create a new record and load it into your form, you could do as below:


...
newArticle: function(button){
var view = Ext.widget('new');
var form = view.down('form');
var record = Ext.create('AM.model.Article');
form.loadRecord(record);
},
...

harsha.deep
19 Feb 2012, 1:16 AM
Here is my new code if it helps anyone who views this post in the future.
I have commented out the handler in my view and handled the button click on the controller itself.

Its only parts of code, please be careful not to copy paste it directly.

View:


buttons: [
{
text: 'Submit',
action: 'submit'
/*handler: function() {
var form = this.up('form').getForm(), // get the basic form
record = form.getRecord();


if (form.isValid()) {
form.updateRecord(record);
record.save({
success: function(user) {
Ext.Msg.alert('Success', 'User saved successfully.')
},
failure: function(user) {
Ext.Msg.alert('Failure', 'Failed to save user.')
}
});
} else {
Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
}
}*/
},


Controller:

init:function () {
this.control({
'viewport > panel > panel > userlist':{
itemdblclick:this.editArticle,
selectionchange:this.showArticle
},
'useredit button[action=save]':{
click:this.updateArticle
},
'viewport > panel > panel > tbar button[action=newarticle]':{
click:this.newArticle
},
'new button[action=submit]':{
click:this.userCreateValidate
}


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


editArticle:function (grid, record) {
var view = Ext.widget('articleedit');
view.down('form').loadRecord(record);
},


newArticle:function (button) {
var view = Ext.widget('new');
var form = view.down('form');
var record = Ext.create('AM.model.Article');
this.getArticlesStore().add(record);
form.loadRecord(record);
},




showArticle:function (selModel, selection) {
this.getArticleInfo().update(selection[0]);
},


updateArticle:function (button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
this.getArticleInfo().update(record);
win.close();
}
});