Results 1 to 6 of 6

Thread: Finding a component?

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    99

    Default Finding a component?

    I have controller with a controller action "onButtonClick" which looks like this:

    Code:
    onButton: function(button, e, eOpts) {
    var panel = button.up('#gridPanel');
    panel.setSize(135, 135);
    
    
    var label = button.nextSibling('#mainLabel');
    label.setText('Complete');
    so when I click the button, the grid panel changes size no problem, but the label does not change it's text, the browser throws out the error:

    Uncaught TypeError: Cannot call method 'setText' of null

    I have no clue why the second half isn't working, why isn't it finding the label/setting it to null? This is what the grid panel looks like btw, does it have something to do with the button and label being "docked" left and top? am I not supposed to be using nextSibling? Please help.

    Code:
    Ext.define('MyApp.view.MyGridPanel', {
        extend: 'Ext.grid.Panel',
    
    
        height: 250,
        itemId: 'gridPanel',
        width: 400,
        title: 'My Grid Panel',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'string',
                        text: 'String'
                    },
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'number',
                        text: 'Number'
                    },
                    {
                        xtype: 'datecolumn',
                        dataIndex: 'date',
                        text: 'Date'
                    },
                    {
                        xtype: 'booleancolumn',
                        dataIndex: 'bool',
                        text: 'Boolean'
                    }
                ],
                dockedItems: [
                    {
                        xtype: 'button',
                        dock: 'left',
                        itemId: 'textChange',
                        width: 100,
                        text: 'MyButton'
                    },
                    {
                        xtype: 'label',
                        dock: 'top',
                        itemId: 'mainLabel',
                        width: 100,
                        text: 'My Label'
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    27

    Default

    try var label = panel.down('#mainLabel');


  3. #3
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    99

    Default

    yes that works, thank you, but I'm just trying to understand why button.nextSibling does not work, why can't I find it like that?

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2013
    Posts
    27

    Default

    because it's not in the same container where the button is. When you use dock="something", a container is created to wrap the component you want to dock and that container is then used for positioning.

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2013
    Posts
    99

    Default

    oh i see, so if I remove the "dock", then it should work right?

  6. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    574
    Answers
    59

    Default

    No. The problem is a bit different: next/previousSibling() does not work for dockedItems, but for items only. But works for items in any dockedItem container (like a toolbar).

Posting Permissions

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