resize event listener problems

[alex9311]

Hey all,

I've got a resizable panel with a column layout which has a grid and another panel as its child components. When the outer-most panel is resized by the user, I want the grid and inner pannel to resize to fill their container. The width resizing is working (thanks to the column layout manager I think) but the height is stuck.

My workaround was to make a listener in the parent panel for the resize event and resize its child components when it itself is resized. However, when I try to access the child components they return null. Any idea why I might be running into this problem?

  Ext.define('BZ.view.blaze.MailDetailMaster', {
        extend: 'Ext.Panel',
        alias: 'widget.maildetailmaster',
        frame: true,
        title: 'Blaze',
        width: 1024,
        layout: 'column',
        resizable: 'true',
        listeners: {
                resize: function(panel, w, h) {
                        //var detailpanel = Ext.ComponentQuery.query('detailpanel');
                        var detailpanel = panel.down('detailpanel');
                        detailpanel.setHeight(h);
                }
        },
        items: [{
                xtype: 'blazegrid',
                itemId: 'gridPanel',
                height: 500,
                width: 380,
            },{
                xtype: 'panel',
                columnWidth: 1,
                height: 500,
                layout: 'border',
                itemId: 'detailpanel',
                items:[{
                        xtype: 'maildetailone',
                        itemId: 'detailPanelOne',
                        region: 'north',
                        height: 75
                    },{
                        xtype: 'maildetailtwo',
                        itemId: 'detailPanelTwo',
                        region: 'center',
                        autoFill: 'true'
                    }]
        }],
        initComponent: function() {
            this.callParent();
        },
    });

[skirtle]

Missing #:

var detailpanel = panel.down('#detailpanel');

You shouldn't need to do manual resizing like this. Any reason you're not just using a vbox layout with align: 'stretch'?

[alex9311]

Thanks, that got it working. What does the # indicate?

I was using a column layout originally but I could try it with a vbox like you're suggesting

[skirtle]

See:

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