PDA

View Full Version : Correct Inheritance



kavolorn
12 Jun 2010, 7:16 AM
Hi there

Could anyone help me to understand whats the right way of extending and why there is an error in execution. Is there any good description of how Ext.extend() works (the source code is difficult to my mind right now as im not familiar with deep javascript techniques)?



<!DOCTYPE html>
<html>
<head>
<title>Inheritance</title>
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />
<script type="application/javascript" src="ext-3.2.1/adapter/ext/ext-base-debug.js"></script>
<script type="application/javascript" src="ext-3.2.1/ext-all-debug.js"></script>
<script type="application/javascript">

Ext.onReady(function(){
// Creating MyApp namespace
Ext.ns('MyApp');

// Extending from Ext.form.FormPanel
MyApp.FormPanelA = Ext.extend(Ext.form.FormPanel, {
initComponent : function() {
this.items = [ { xtype : 'button', text : 'sample' } ];
MyApp.FormPanelA.superclass.initComponent.call(this);
}
});

// Extending from Ext.form.FormPanel
MyApp.FormPanelB = Ext.extend(Ext.form.FormPanel, {
items : [ { xtype : 'button', text : 'sample' } ],
initComponent : function() {
MyApp.FormPanelB.superclass.initComponent.call(this);
}
});

// Everything is ok
var formA = new MyApp.FormPanelA({
renderTo : 'form-a'
});

// Error execution
var formB = new MyApp.FormPanelB({
renderTo : 'form-b'
});
});

</script>
</head>
<body>
<div id='form-a'></div>
<div id='form-b'></div>
</body>
</html>

fay
12 Jun 2010, 7:23 AM
Have you looked at this (http://www.extjs.com/forum/showthread.php?54537-code-structure&p=259901) very good description?

kavolorn
12 Jun 2010, 8:51 AM
Have you looked at this (http://www.extjs.com/forum/showthread.php?54537-code-structure&p=259901) very good description?

Thanks a lot! I will try to follow provided information.