PDA

View Full Version : Creating an abstract class for form



mayurid
23 Aug 2010, 4:29 AM
Ext.ns('MyApp');

MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
defaultType: 'textfield',
frame: true,
width: 300,
height: 200,
submitUrl: null,
initComponent: function () {
Ext.apply(this, {
items: this.buildItems(),
buttons: this.buildButtons(),

});

MyApp.AbstractFormPanel.superclass.initComponent.call(this);
},
buildItems: function () {
return [];
},
buildButtons: function () {
return [{
text: 'Submit',
scope: this,
handler: this.onSubmit
}, {
text: 'Cancel',
scope: this,
handler: this.onCancel
}];
},
onSubmit: function () {
Ext.MessageBox.alert('Submit', this.submitUrl);
},
onCancel: function () {
this.el.mask('This form is canceled');
}
});
Name form calling abstractformpanel

Ext.ns('MyApp');

MyApp.NameFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
title: 'Edit name data',
submitUrl: 'nameAction.asp',
buildItems: function ()
{
return [
{
name: 'firstName',
fieldLabel: 'First Name'
}, {
name: 'lastName',
fieldLabel: 'Last Name'
}];
},
//Extension
buildButtons: function ()
{
var btns = MyApp.NameFormPanel.superclass.buildButtons.call(this);

btns[0].text = "OK";
btns[0].handler = this.onOkBtn;
return btns;
},
//Override
onOkBtn: function ()
{
alert('OK pressed');
}

});
calling name form. but nothing show up:

Ext.onReady(function () {

new NameFormPanel({


renderTo: Ext.getBody()
});

});
when i cal AbstractFormPanel it shows form with buttons,but when i cal nameformpanel it wont cal abstractformpanel

Condor
23 Aug 2010, 4:36 AM
1. Obviously it's: new MyApp.NameFormPanel({renderTo: Ext.getBody()})
2. You did include MyApp.AbstractFormPanel I hope? (no javascript errors?).
3. You should start using:

initComponent: function () {
var config = {
items: this.buildItems(),
buttons: this.buildButtons()
});
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
MyApp.AbstractFormPanel.superclass.initComponent.call(this);
},
(otherwise your next post will be "Why can't I specify 'url' in initComponent")

mayurid
23 Aug 2010, 8:52 PM
1. Obviously it's: new MyApp.NameFormPanel({renderTo: Ext.getBody()})
2. You did include MyApp.AbstractFormPanel I hope? (no javascript errors?).
3. You should start using:

initComponent: function () {
var config = {
items: this.buildItems(),
buttons: this.buildButtons()
});
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
MyApp.AbstractFormPanel.superclass.initComponent.call(this);
},(otherwise your next post will be "Why can't I specify 'url' in initComponent")


i used Ext.apply(this.initialConfig, config);
and included MyApp , it does not show up anything

Condor
23 Aug 2010, 9:41 PM
It should work...

Can you post the code you have now (with the suggested changes applied)?

mayurid
23 Aug 2010, 9:56 PM
It should work...

Can you post the code you have now (with the suggested changes applied)?
AbstractFormPanel.js

Ext.ns('MyApp');

MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
defaultType: 'textfield',
frame: true,
width: 300,
height: 200,
submitUrl: null,
initComponent: function () {
var config = {
items: this.buildItems(),
buttons: this.buildButtons()
}

Ext.apply(this, config);

Ext.apply(this.initialConfig, config);

MyApp.AbstractFormPanel.superclass.initComponent.call(this);
},
buildItems: function () {
return [];
},
buildButtons: function () {
return [{
text: 'Submit',
scope: this,
handler: this.onSubmit
}, {
text: 'Cancel',
scope: this,
handler: this.onCancel
}];
},
onSubmit: function () {
Ext.MessageBox.alert('Submit', this.submitUrl);
},
onCancel: function () {
this.el.mask('This form is canceled');
}
});
NameFormPanel .js

Ext.ns('MyApp');

MyApp.NameFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
title : 'Edit name data',
submitUrl : 'nameAction.asp',
buildItems : function() {
return [
{
name : 'firstName',
fieldLabel : 'First Name'
},
{
name : 'lastName',
fieldLabel : 'Last Name'
},
{
name : 'middleName',
fieldLabel : 'Middle Name'
},
{
xtype : 'datefield',
name : 'dob',
fieldLabel : 'DOB'
}
];
},
//Extension
buildButtons : function() {
var btns = MyApp.NameFormPanel.superclass.buildButtons.call(this);

btns[0].text = "OK";
btns[0].handler = this.onOkBtn;
return btns;
},
//Override
onOkBtn : function() {
console.info('OK btn pressed');
}

});

Ext.onReady(function(){
new MyApp.NameFormPanel({
renderTo: Ext.getBody()
}) ;
}) ;

Condor
23 Aug 2010, 10:19 PM
I've put these three code fragments after each other in the same file and the form displays correctly.

Are you sure you are including all 3 .js files in your html?

mayurid
23 Aug 2010, 10:47 PM
I've put these three code fragments after each other in the same file and the form displays correctly.

Are you sure you are including all 3 .js files in your html?
ya its working for me otgether, but i want to create one abstract form file, and call it in many different places,in my application. so what can i do?

Condor
23 Aug 2010, 10:51 PM
It also works if you include the 3 .js files after each other.

Are you SURE you are including all 3 files (did you check the Firebug Net tab to see if they are all loaded)?

mayurid
24 Aug 2010, 12:44 AM
ya, all the three files are included and loading,
Ext.onReady(function () {
new MyApp.NameFormPanel({
renderTo: Ext.getBody()
});
}); also i have included in panel_1.js file and calling it in html. but its not working

Condor
24 Aug 2010, 12:51 AM
And you checked (with Firebug Net tab) that the files are actually loaded?

And you also checked (with Firebug Html tab) that the form isn't rendered but invisible due to some markup or styling you added to the HTML?

mayurid
24 Aug 2010, 1:03 AM
And you checked (with Firebug Net tab) that the files are actually loaded?

And you also checked (with Firebug Html tab) that the form isn't rendered but invisible due to some markup or styling you added to the HTML?
in html it does not show anything,except class,id,body
in net panel in html and js its including all files but its showing status as not modified

Condor
24 Aug 2010, 2:07 AM
It's working for me... There must be something else wrong on your side.

Start debugging. Set a breakpoint on the 'new' call and step from there.

mayurid
24 Aug 2010, 3:16 AM
u included all the three codes in different files,and then called them in html file?

<html>
<head> <title>Form Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript" src="NameFormPanel.js"></script>
<script type="text/javascript" src="AbstractFormPanel.js"></script>
<script type="text/javascript" src="panel_1.js">

</script>


</head>
<body>
</body>
</html>AbstractFormPanel.js

Ext.ns('MyApp');
MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
defaultType: 'textfield',
frame: true,
width: 300,
height: 200,
submitUrl: null,
initComponent: function () {
var config = {
items: this.buildItems(),
buttons: this.buildButtons()
}
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
MyApp.AbstractFormPanel.superclass.initComponent.call(this);
},
buildItems: function () {
return [];
},
buildButtons: function () {
return [{
text: 'Submit',
scope: this,
handler: this.onSubmit
}, {
text: 'Cancel',
scope: this,
handler: this.onCancel
}];
},
onSubmit: function () {
Ext.MessageBox.alert('Submit', this.submitUrl);
},
onCancel: function () {
this.el.mask('This form is canceled');
}
});
NameFormPanel.js

Ext.ns('MyApp');



MyApp.NameFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
title : 'Edit name data',
submitUrl : 'nameAction.asp',
buildItems : function() {
return [
{
name : 'firstName',
fieldLabel : 'First Name'
},
{
name : 'lastName',
fieldLabel : 'Last Name'
},
{
name : 'middleName',
fieldLabel : 'Middle Name'
},
{
xtype : 'datefield',
name : 'dob',
fieldLabel : 'DOB',
allowBlank : true,
}
];
},
buildButtons : function() {
var btns = MyApp.NameFormPanel.superclass.buildButtons.call(this);

btns[0].text = "OK";
btns[0].handler = this.onOkBtn;
return btns;
},
onOkBtn : function() {
console.info('OK btn pressed');
}

});



Ext.reg('f1', MyApp.NameFormPanel);

Ext.onReady(function () {
new MyApp.NameFormPanel(
{
renderTo:Ext.getbody()
}
);
});

Condor
24 Aug 2010, 11:49 PM
You obviously have to include your javascript in the right order:

<script type="text/javascript" src="AbstractFormPanel.js"></script>
<script type="text/javascript" src="NameFormPanel.js"></script>
<script type="text/javascript" src="panel_1.js">

mayurid
24 Aug 2010, 11:54 PM
its working, i dint knew that in html order also is inportant..
thanks condor

mayurid
28 Aug 2010, 4:41 AM
i want to implement the same form and use it to view use display field, for that i have implented datastore and in that in listener i am using the form to load the values.
but its not getting the form because of form scope,

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'b4view_form.php',
method: 'POST'
}),

reader: new Ext.data.JsonReader({
root: 'results',
id: 'alert_detail_id',
//fields: ['company_name' ],
fields: ['myusername', 'team_name', 'firstname', 'lastname']
}),
listeners: {
load: function (thisDS, records, options)

{
if (this.reader.jsonData.success) {
if (records.length > 0) {
alert(Ext.getCmp('NameFormPanel'));
Ext.getCmp('NameFormPanel').getForm().loadRecord(records[0]);
}
}
}
}
});
ds.load();
Ext.ns('MyApp');

MyApp.NameFormPanel = Ext.extend(MyApp.AbstractFormPanel, {
id: 'NameFormPanel',
name: 'NameFormPanel',
submitUrl: 'nameAction.asp',
buildItems: function () {
return [{
name: 'myusername',
fieldLabel: 'myusername'
}, {
name: 'team_name',
fieldLabel: 'team_name'
}, {
name: 'firstname',
fieldLabel: 'firstname'
}, {
name: 'lastname',
fieldLabel: 'lastname'
}, {
xtype: 'datefield',
name: 'dob',
fieldLabel: 'DOB'
}];
},
//Extension
buildButtons: function () {
var btns = MyApp.NameFormPanel.superclass.buildButtons.call(this);

btns[0].text = "OK";
btns[0].handler = this.onOkBtn;
return btns;
},
//Override
onOkBtn: function () {
console.info('OK btn pressed');
}

});

mayurid
29 Aug 2010, 8:43 PM
i want to use the abstract form for loading the data from store in display field,
NameFormPanel.getForm().loadRecord(records[0]);its showing an error that Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
So how do i load the form using getelementbyid?

document.getElementById('NameFormPanel').loadRecord(records[0]);is this correct