Hi I am very much new to EXT-JS ,

just created a panel with card layout .
inside panel , instead of using items config to render items , i used initMethod() function to render those items under panel . actaully I read somewhere to use in this way . But I just confused that within function how these items are get initialized . following is the code for ur reference :

Code:
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all-debug.js"></script>
        <script type="text/javascript" src="PO/PO.js"></script>
        <meta http-equiv="cache-control" content="max-age=0" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="expires" content="0" />
        <meta http-equiv="pragma" content="no-cache" />
    </head>
    
    <body>
    
    
    </body>
</html>
Code:
Ext.ns('PO');


Ext.onReady(function() {
    
    
    var navHandler = function(incr){
        
        var layOut = Ext.getCmp('card').getLayout();
        //layOut.setActiveItem('card-'+incr);
        //incr++;
        
       var i = layOut.activeItem.id.split('card-')[1];
       var next = parseInt(i, 10) + incr;
       layOut.setActiveItem(next);
      
    };
    
    
    var card = new Ext.Panel({  
        title: 'Purchase Order',
        id:'card',
        layout:'card',
        border:true,
        activeItem: 0, // make sure the active item is set on the container config!
        bodyStyle: 'padding:15px',
        abc:'a',
        initMethod:function(){
            this.purchaseOrderForm = new PO.purchaseOrderForm();
            this.items=[this.purchaseOrderForm];
            alert("hi");
        },
        
        defaults: {
            // applied to each contained panel
            border:false
        },
        // just an example of one possible navigation scheme, using buttons
        bbar: [
            {
                id: 'move-prev',
                text: 'Back',
                handler: Ext.createDelegate(navHandler,[this],[-1]),
                //disabled: true
            },
            '->', // greedy spacer so that the buttons are aligned to each side
            {
                id: 'move-next',
                text: 'Next',
                handler: Ext.createDelegate(navHandler,[this],[1])
            }
        ]
    });
    
    card.render(document.body);
});
Code:
Ext.ns('PO');


var purchase_order_header_form = new Ext.FormPanel({


    region:'west',
    id:'card-2',
    title: 'Purchase Order Header',
    layout:'form',
            items:[
                                {
                                    xtype: 'textfield',
                                    fieldLabel: 'First Name',
                                    name: 'fName',
                                    id: 'fName',
                                    allowBlank:false                                    
                                },
                                {
                                    xtype: 'textfield',
                                    fieldLabel: 'Last Name',
                                    name: 'lName',
                                    id: 'lName',
                                    allowBlank:false
                                },
                                {
                                    xtype: 'datefield',
                                    fieldLabel: 'DOB',
                                    name: 'dob',
                                    id: 'dob',
                                    allowBlank:false
                                }


                             ]
    });