Hybrid View

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default Unanswered: How to use a custom component

    Unanswered: How to use a custom component


    Hello all,

    Am trying to build a reusable component, but i observered that i cannot reuse it. my fire bug displays j is undefined.

    this is my code.
    Code:
    Ext.define('MyGridForm', {
            extend: 'Ext.container.Container',
            alias: 'widget.gridform',
                   height:600,
            width:'100%',
                   constructor: function(config){
                Ext.apply(this, {
                                    items: [
                    {
                        xtype:'form',
                        title: 'panel 1',
                        width:50,
                        height:50,
                        items:[
                            {
                                xtype:'textfield',
                                label:'First Name'
                            }
                        ]
                    },
                    {
                    xtype:'grid',
                    width:50,
                    height:50,
                    columns:[
                {
                    header:'SERVICE TYPE'
                },
                {
                    header:'DESCRIPTION'
                },
                {
                    header:'AMOUNT(N)'
                }
            ]
                },
                                    ]
                });
                this.callParent(arguments);
            }
    
        });
    And this is where i want to use it...
    Code:
    Ext.create('GridForm',{
    height:100,
    width:100
    
    })
    
    or 
    Ext.create('Ext.container.Container',{
    height:500,
    width:'100%',
    items:[
    {}
    xtype:'gridform'
    ]
    })
    From the view of this code is there something am not doing right?
    Please any contribution will be appreciated.
    Thanks in advance.

    Pat.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    Answers
    3564
    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


    Code:
    Ext.create('GridForm',{
        height:100,
        width:100
    })
    Your class name is MyGridForm so it needs to be Ext.create('MyGridForm', {

    -----

    Code:
    Ext.create('Ext.container.Container',{
    height:500,
    width:'100%',
    items:[
    {}
    xtype:'gridform'
    ]
    })
    That's just not valid JavaScript. It needs to be:

    Code:
    Ext.create('Ext.container.Container', {
        height:500,
        width:'100%',
        items:[
            {
                xtype: 'gridform'
            }
        ]
    })
    And you probably need to give the Container a layout.
    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.

Thread Participants: 1