Results 1 to 3 of 3

Thread: Correct Inheritance

  1. #1
    Sencha User kavolorn's Avatar
    Join Date
    Jun 2010
    Location
    Russia, Yaroslavl
    Posts
    11

    Question Correct Inheritance

    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)?

    HTML Code:
    <!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>

  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Have you looked at this very good description?

  3. #3
    Sencha User kavolorn's Avatar
    Join Date
    Jun 2010
    Location
    Russia, Yaroslavl
    Posts
    11

    Default

    Quote Originally Posted by fay View Post
    Have you looked at this very good description?
    Thanks a lot! I will try to follow provided information.

Similar Threads

  1. FormPanel inheritance
    By asagala in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 24 Feb 2010, 7:37 PM
  2. ExtJS inheritance
    By peterpaul12 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 23 Feb 2010, 12:08 AM
  3. [2.2] TimeField inheritance
    By pgioseffi in forum Ext 2.x: Bugs
    Replies: 0
    Last Post: 27 Mar 2009, 8:56 AM
  4. Class Inheritance
    By jugs in forum Community Discussion
    Replies: 2
    Last Post: 5 Nov 2007, 11:55 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •