1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    85
    Vote Rating
    0
    newusername is on a distinguished road

      0  

    Default use of function

    use of function


    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
                                    }
    
    
                                 ]
        });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Are you sure you saw initMethod means when creating an instance or when extending? This is called the factory method:

    Code:
    Ext.ns('Some.ns');
    
    Some.ns.MyView = Ext.extend(Ext.Panel, {
        layout : 'card',
    
        initComponent : function() {
            this.items = this.buildItems();
    
            Some.ns.MyView.prototype.initComponent.call(this);
        },
    
        buildItems : function() {
            return [
                {
                    html : 'Hi'
                },
                {
                    html : 'Hello'
                }
            ];
        }
    });
    
    Ext.reg('myview', Some.ns.MyView);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    85
    Vote Rating
    0
    newusername is on a distinguished road

      0  

    Default


    at a time of extending I used this method ..

Thread Participants: 1