Results 1 to 6 of 6

Thread: Ext.getCmp("myForm") is undefined issue

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    80
    Answers
    1

    Default Ext.getCmp("myForm") is undefined issue

    In one of my panels i have a form panel

    Code:
    xtype: 'form',
                                        id: 'formJobSummary',
                                        layout: {
                                            align: 'stretch',
                                            type: 'hbox'
                                        }


    I wish to bind data to this and have the following code.

    Code:
    var form = Ext.getCmp('formJobSummary').getForm(); 
     form.loadRecord(user);
    I am getting:

    Ext.getCmp("formJobSummary") is undefined

    So obviously the loadRecord is out of scope. Given that my architecture is from the designer and has 2 files. Where do i put this loadRecord statement.

    MyPanel.js

    Code:
    //Define a model with field names mapping to the form field name
    Ext.define('UserModel', {
        extend: 'Ext.data.Model',
        fields: ['quotedPrice', 'name']
    });
    
    
    //Create an instance of the model with the specific value
    var user = Ext.create('UserModel', {
        quotedPrice: 'test',
        name: 'test'
    });
    
    
    
    
    Ext.define('MyApp.view.MyPanel', {
        extend: 'MyApp.view.ui.MyPanel',
    
    
        initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.down('button[text=Submit]').on('click',
        me.onSubmitBtnClick, me);
        me.down('button[text=Cancel]').on('click',
        me.onCancelBtnClick, me);
        },
        onSubmitBtnClick: function () {
    
    
            var conn = new Ext.data.Connection();
    
    
            var est = Ext.getCmp('estimate');
            alert(est.getValue());
    
    
            conn.request({
                method: 'POST',
                url: 'tmp.php',
                params: {
                    foo: "bar"},
        success: function (responseObject) { alert(responseObject.responseText); },
        failure: function () { alert(est); }
         });
       },
       onCancelBtnClick: function () {
            
       }
    });
    
    
    var form = Ext.getCmp('formJobSummary').getForm(); //returns form1
    form.loadRecord(user);
    ui/MyPanel.js

    Code:
     Ext.define('MyApp.view.ui.MyPanel', {    extend: 'Ext.panel.Panel',
    
    
        height: 600,
        width: 950,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        title: 'JobPanel',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'tabpanel',
                        activeTab: 0,
                        flex: 1,
                        items: [
                            {
                                xtype: 'panel',
                                layout: {
                                    align: 'stretch',
                                    type: 'hbox'
                                },
                                title: 'Job Summary',
                                items: [
                                    {
                                        xtype: 'form',
                                        id: 'formJobSummary',
                                        layout: {
                                            align: 'stretch',
                                            type: 'hbox'
                                        },
                                        bodyPadding: 10,
                                        title: '',
                                        url: '/submit.html',
                                        flex: 1,
                                        dockedItems: [
                                            {
                                                xtype: 'toolbar',
                                                flex: 1,
                                                dock: 'bottom',
                                                items: [
                                                    {
                                                        xtype: 'button',
                                                        text: 'Submit'
                                                    },
                                                    {
                                                        xtype: 'button',
                                                        text: 'Cancel'
                                                    }
                                                ]
                                            }
                                        ],
                                        items: [
                                            {
                                                xtype: 'panel',
                                                flex: 1,
                                                items: [
                                                    {
                                                        xtype: 'radiogroup',
                                                        width: 400,
                                                        fieldLabel: 'Job Type',
                                                        items: [
                                                            {
                                                                xtype: 'radiofield',
                                                                boxLabel: 'Fix Price'
                                                            },
                                                            {
                                                                xtype: 'radiofield',
                                                                boxLabel: 'Production'
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'quotedPrice',
                                                        name: 'quotedPrice',
                                                        fieldLabel: 'Quoted Price'
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'clientPO',
                                                        name: 'clientPO',
                                                        fieldLabel: 'Client PO'
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'jobQuantity',
                                                        name: 'jobQuantity',
                                                        fieldLabel: 'Job Quatity'
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'filesOver',
                                                        name: 'filesOver',
                                                        fieldLabel: 'Files Over'
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'previousJobId',
                                                        name: 'previousJobId',
                                                        fieldLabel: 'Previous JobId'
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'estimate',
                                                        name: 'estimate',
                                                        fieldLabel: 'Estimate'
                                                    }
                                                ]
                                            },
                                            {
                                                xtype: 'panel',
                                                flex: 1
                                            },
                                            {
        xtype: 'panel',
       layout: {
       align: 'stretch',
        type: 'hbox'
                                                },
                                                flex: 1
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                title: 'Parts'
                            },
                            {
                                xtype: 'panel',
                                title: 'Process'
                            },
                            {
                                xtype: 'panel',
                                title: 'Invoice'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        layout: {
                            align: 'stretch',
                            type: 'vbox'
                        },
                        title: 'FooterPanel',
                        flex: 1
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    });

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Please wrap your code in code tags so it can be read easily. I wouldn't use the id config, I would use ComponentQuery to resolve components. id should only be used for debugging.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    80
    Answers
    1

    Default

    1) ok code reformatted.
    2) do you think you can expand on your Component query. Any help would be must appreciate.

    I've tried the following

    Code:
    var form = Ext.ComponentQuery.query('formJobSummary'); // formJobSummary is the id and name
    form.loadRecord(user);
    but i get the following.
    form.loadRecord is not a function

    Where should i be using ComponentQuery?

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Location
    France
    Posts
    37
    Answers
    2

    Default

    Using Ext.ComponentQuery you should be able to get it, but you need to put a # in front of the id you are querying.

    http://docs.sencha.com/ext-js/4-0/#!...ComponentQuery

    Code:
    var form = Ext.ComponentQuery.query('#formJobSummary');

  5. #5
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    To add to that, I've stopped using id and instead use itemId to reduce possible collisions.

    Also, query will return all found components in an array. So, if you know you have one instance if '#jobFormSummary' you might include [0]:

    Code:
    var form = Ext.ComponentQuery.query('#formJobSummary')[0];

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Location
    France
    Posts
    37
    Answers
    2

    Default

    Good points.

    Quote Originally Posted by slemmon View Post
    To add to that, I've stopped using id and instead use itemId to reduce possible collisions.

    Also, query will return all found components in an array. So, if you know you have one instance if '#jobFormSummary' you might include [0]:

    Code:
    var form = Ext.ComponentQuery.query('#formJobSummary')[0];

Posting Permissions

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