PDA

View Full Version : Create form in a panel by click on a button



daniferi
20 Feb 2011, 5:53 AM
I have a grid with a button in its top bar. When I click on it I want to create a form dynamically in a panel and replace it.
Here is a part of grid:


var grid = Ext.grid.GridPanel({
...
tbar: [new Ext.Toolbar.Button({
text: 'Add item',
icon: './resources/images/extra/btn_add.png',
handler: doGepForm.app.init
}), new Ext.Toolbar.Button({
text: 'Remove item',
icon: './resources/images/extra/btn_remove.png',
})
]
})

And here is the app:


doGepForm.app = function() {
return {
init : function(){
this.formcreate();
var gp = Ext.getCmp('gepInfoPanel');
gp.remove('gepInfoForm');
gp.add(gepForm);
ablak.doLayout();
},
formcreate : function(){
gepForm = new Ext.form.FormPanel({
region : 'center',
height : 90,
autoScroll : true,
id : 'gepInfoForm',
title : 'valami',
defaultType : 'field',
frame : true,
items : [
{ fieldLabel : 'Name' },
{ fieldLabel : 'Age' }
]
});
return gepForm;
}
};
}(); // end of app


When I write to Firebug console: doGepForm.app.init() it works, but when I click on 'Add item' button it has error: this.formcreate is not a function

What do I wrong?

drian
20 Feb 2011, 5:59 AM
try to put "scope: this" in the add button.

also, shouldn't it be:


var gepForm = this.formcreate();

OR

gp.add(Ext.getCmp('gepInfoForm'));

gepForm is a variable visible only inside formcreate function.

daniferi
20 Feb 2011, 6:52 AM
I test a lot of version and I find out the solution. I was wrong with 'this'. If I want call another function I must use the whole name: doGepForm.app.formcreate();



init : function(){
var gp = Ext.getCmp('gepInfoPanel');
gp.remove('gepInfoForm');
doGepForm.app.formcreate();
gp.add(gepForm);
ablak.doLayout();
},