PDA

View Full Version : resize event listener problems



alex9311
23 Oct 2012, 5:04 PM
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
23 Oct 2012, 6:46 PM
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
24 Oct 2012, 2:21 PM
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
24 Oct 2012, 2:25 PM
See:

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