PDA

View Full Version : docked item resize doesn't cause main item resize



touchy
27 Oct 2010, 12:34 PM
We have:

In Panel A (layout 'fit') only item in items: is a Container B (layout 'fit') containing Component C (with a tpl, happens to show a message body).

In same Container A (the only) docked item in dockedItems: is a Container D ((docked 'top', itself having a layout 'vbox') which contains zero, one or several (number of attachments) Components E1, E2… (with a small tpl each as only content, happens to be showing icon and name of attachments of the message).

Problem is that when the docked item D grows and shrinks (by adding/removing Components E) the item B doesn't get resized.

Is there a way to get the item B to resize when the docked D item changes size?

I've tried various combinations of doLayout, doComponentLayout, hide and show, on the docked item D, on the item that should resize B, on the container holding them both A … No luck.

Oddly, if I rotate the iPad it updates correctly (or if I resize on desktop Safari). So it knows how to. But how to trigger that?

Jamie Avins
27 Oct 2010, 1:57 PM
If you could post some code it would help a lot here as that is very difficult to follow...

Note that currently, adding/removing items to a container still require a manual doComponentLayout. We are discussing changing this behavior so it would trigger a layout automatically, but there are some performance concerns that adding many items in a loop can cause layouts each time. Most likely the default will be to trigger the layout and give developers a way to suspend that behavior when necessary.

touchy
28 Oct 2010, 9:14 AM
I have made this complete app to show the problem.

Click the Add an Attachment button and we would expect the message body test to move down.

Using doLayout() because it is more broken if using doComponentLayout().


Ext.setup({
onReady: function() {
var guiRoot = new Problem01RootPanel({
fullscreen: true,
id: 'guiRoot',
style: 'background-color:#e0e0ff;',
});
guiRoot.doComponentLayout();
}
});

Problem01Attachment = Ext.extend(Ext.Component, {
tpl: '{custom}attachment serial number {serno}',
style: 'background-color:#b0b0ff;margin: 0.2em 0.5em 0.2em 0.5em;',
constructor: function(config) {
config = config || {};
custom = config.custom || '';
Ext.applyIf(config, {
data: {serno:Ext.id(),custom:custom,},
});
Problem01Attachment.superclass.constructor.call(this, config);
},
});

Problem01Attachments = Ext.extend(Ext.Panel, {
constructor: function(config) {
config = config || {};
this.addAttachmentsButton = new Ext.Button({
text: 'Add an Attachment',
style: 'background-color:#9090ff;',
dock: 'top',
});
this.addAttachmentsButton.on('tap',function(){
console.log('adding button');
this.add(new Problem01Attachment({
custom: 'added ',
}));
// this.doComponentLayout();
this.doLayout();
console.log('added button');
},
this);
this.removeAllAttachmentsButton = new Ext.Button({
text: 'Remove all Attachments',
style: 'background-color:#9090ff;',
dock: 'top',
});
this.removeAllAttachmentsButton.on('tap',function(){
console.log('removing all buttons');
this.removeAll();
// this.doComponentLayout();
this.doLayout();
console.log('removed all buttons');
},
this);
Ext.applyIf(config, {
dockedItems: [this.addAttachmentsButton,this.removeAllAttachmentsButton,],
});
Problem01Attachments.superclass.constructor.call(this, config);
this.add(new Problem01Attachment({
custom: 'initially placed ',
}));
},
});

Problem01Message = Ext.extend(Ext.Component, {
html: 'Line 1 of message body.'
+ '<br>Line 2 of message body.'
+ '<br>Line 3 of message body.'
+ '<br>Line 4 of message body.'
});

Problem01RootPanel = Ext.extend(Ext.Panel, {
items: [new Problem01Message({
style: 'background-color:#d0d0ff;',
}),],
dockedItems: [new Problem01Attachments({
dock:'top',
style: 'background-color:#c0c0ff;',
}),],
});

touchy
28 Oct 2010, 10:11 AM
Have put up a demo of problem at http://www.nrvr.com/dev/sencha/problem01.html (Safari, Chrome).

You should see what's wrong right away when clicking the buttons to add and remove attachments.