PDA

View Full Version : Design Event Handling - Submit Form



fsi
11 Aug 2010, 3:06 PM
I would appreciate some guidance on the coding for the Event to submit the form using a Designer generated form.

I have the following events in my .js file.

MyForm = Ext.extend(MyFormUi, {
initComponent: function() {
MyForm .superclass.initComponent.call(this);
this.CancelButton.on('click', this.onCancelButtonClick, this);
this.SaveButton.on('click', this.onSaveButtonClick, this);
},
onCancelButtonClick: function() {
Ext.Msg.alert('Cancel', 'It is cancelled.');
},
onSaveButtonClick: function() {
this.form.submit();
Ext.Msg.alert('Save', 'It is saved.');
}

I've autoreferenced the buttons and the Cancel works fine, but when clicking on the Save button I get the message that "this.form.submit" is not defined. I've tried many variations but have not seemed to figure out how to correctly call the submit. I've also tried giving the button a type = "submit" in Designer that gets added to the .ui.js file but that does not work by itself.

Any suggestions??

jarrednicholls
12 Aug 2010, 12:46 PM
Hi fsi,

That is rather odd indeed. I just mimicked your scenario and did not receive such an error. What browser are you using? Can you also attach your project (.xds) file, I can try it directly from there to see if I can reproduce and then debug.

Thanks.

fsi
15 Aug 2010, 4:58 AM
Ahh. Ok. I was not referring to the form variable within the container correctly.

I modified my handler to:

MyForm = Ext.extend(MyFormUi, {
initComponent: function() {
MyForm.superclass.initComponent.call(this);
this.CancelButton.on('click', this.onCancelButtonClick, this);
this.SaveButton.on('click', this.onSaveButtonClick, this);
},
onCancelButtonClick: function() {
Ext.Msg.alert('Cancel', 'It is cancelled.');
},
onSaveButtonClick: function() {
this.MyForm.getForm().submit();
Ext.Msg.alert('Save', 'It is saved.');
}
});

Thanks for verifying that the syntax and approach made sense!

fsi

barton
26 Aug 2010, 1:41 PM
I too am a noob and these "this" references really confuse me. And I have the same problem you describe but I haven't been able to figure out what to do. I have a basic Login form. Here is the UI:



LoginUi = Ext.extend(Ext.Window, {
title: 'My Window',
width: 400,
height: 250,
layout: 'form',
id: 'loginWnd',
initComponent: function() {
this.fbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Login',
id: 'loginBtn'
}
]
};
LoginUi.superclass.initComponent.call(this);
}
});




and here is the class:





Login = Ext.extend(LoginUi, {
initComponent: function() {
Login.superclass.initComponent.call(this);
this.loginBtn.on('click', this.onLoginBtnClick, this);
},
onLoginBtnClick: function() {
this.getForm().submit(); //////////////////What to do here?
Ext.Msg.alert('Save', 'It is saved.');
}


});



Any help is greatly appreciated. Thanks in advance.

Barton

barton
26 Aug 2010, 10:38 PM
Solved: I changed the Login UI definition to the following:



*/

LoginUi = Ext.extend(Ext.form.FormPanel, {
title: 'Login',
width: 400,
height: 152,
padding: 10,
frame: true,
id: 'loginFrm',
initComponent: function() {
this.items = [
{
xtype: 'textfield',
fieldLabel: 'User Id',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '100%'
}
];
this.fbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Login',
ref: '../loginBtn',
id: ''
}
]
};
LoginUi.superclass.initComponent.call(this);
}
});