Results 1 to 4 of 4

Thread: Unable to remove a component from parent container - Sencha Touch in Action

  1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    3
    Vote Rating
    0
      0  

    Default Answered: Unable to remove a component from parent container - Sencha Touch in Action

    I recently purchased the Sencha Touch in Action and I am stuck in chapter 4 where an attempt is made to remove a component from a container. I get this error: Uncaught TypeError: Cannot call method 'remove' of undefined. I figure its because the container isn't ready at the time the remove function was invoked.
    I decided to test this by both wrapping the code to remove the container in a setTimeout to no avail. Any assistance will be appreciated.

    Link to code:
    https://github.com/ModusCreateOrg/se...container.html

  2. We will have to fix this example as it simply won't work at all. Try this:

    Code:
    Ext.application({
        name : 'Test',
    
        launch : function () {
    
            var loginContainer = Ext.create('Ext.Container', {
                itemId     : 'loginContainer',
                fullscreen : true,
                items      : [
                    {
                        xtype       : 'textfield',
                        label       : 'Login',
                        placeHolder : 'Enter Username Here'
                    },
                    {
                        xtype       : 'textfield',
                        label       : 'Organization',
                        id      : 'orgField',
                        placeHolder : 'Enter Your Organization Here'
                    },
                    {
                        xtype       : 'textfield',
                        label       : 'Password',
                        placeHolder : 'Enter Password Here'
                    }
                ]
            });
    
            var container = Ext.ComponentQuery.query('#loginContainer')[0];
            container.remove(container.child('#orgField'));
    
        }
    });

  3. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Answers
    3976
    Vote Rating
    1368
      1  

    Default

    We will have to fix this example as it simply won't work at all. Try this:

    Code:
    Ext.application({
        name : 'Test',
    
        launch : function () {
    
            var loginContainer = Ext.create('Ext.Container', {
                itemId     : 'loginContainer',
                fullscreen : true,
                items      : [
                    {
                        xtype       : 'textfield',
                        label       : 'Login',
                        placeHolder : 'Enter Username Here'
                    },
                    {
                        xtype       : 'textfield',
                        label       : 'Organization',
                        id      : 'orgField',
                        placeHolder : 'Enter Your Organization Here'
                    },
                    {
                        xtype       : 'textfield',
                        label       : 'Password',
                        placeHolder : 'Enter Password Here'
                    }
                ]
            });
    
            var container = Ext.ComponentQuery.query('#loginContainer')[0];
            container.remove(container.child('#orgField'));
    
        }
    });
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  4. #3
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Answers
    3976
    Vote Rating
    1368
      0  

    Default

    A note, I've issued a pull request to fix the code in the git repo so the code will get updated to work: https://github.com/ModusCreateOrg/se...xamples/pull/1

    Thanks for pointing this out!
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

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

  5. #4
    Sencha User
    Join Date
    Jul 2013
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Thanks for the response. It worked.

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
  •