PDA

View Full Version : [FIXED][3.0.0] Animatetarget on window breaks anchor layout on combo



jburnhams
16 Jul 2009, 12:47 AM
I have a page with a viewport. A window is shown with animatetarget set as the center region of the borderlayout contained in the viewport.

The window contains a form with an anchor layout. The form has two items - a combobox and a textfield.

When animatetarget is used, the trigger button of the combobox is put outside of the correct width, instead of inside (compare with textfield). A resize of the window causes the width to be correctly set.

Code below can be put in the examples directory.


<html>
<head>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
</head>

<body>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
},{
region: 'center',
id: 'centerregion',
title: 'Center Panel'
}]
});


var simple = new Ext.Window({
animateTarget: Ext.getCmp('centerregion').getEl(),
width: 300,
autoHeight: true,
layout: 'fit',
items:[{
xtype: 'form',
defaults: {anchor: '99%'},
frame: true,
autoHeight: true,
items: [{
xtype: 'combo',
fieldLabel: 'combo1',
store: ['one', 'two', 'three']
},{
xtype: 'textfield',
fieldLabel: 'textfield'
}]
}]
});

simple.show();
});
</script>
</body>
</html>

evant
16 Jul 2009, 7:01 AM
Fixed in the trunk.

jburnhams
17 Jul 2009, 12:47 AM
There's an additional problem with the combobox and animatetarget that the fix doesn't correct. The combobox listwidth is not wide enough - it does not match the width of the combobox. This can be seen in the example I posted although there the text is short enough to fit - longer text is truncated.

jburnhams
23 Jul 2009, 1:39 AM
Any ideas as to the combo width fix?

This is the override I'm using:

Ext.override(Ext.form.TriggerField, {
onResize : function(w, h){
Ext.form.TriggerField.superclass.onResize.call(this, w, h);
var tw = this.trigger.getWidth();
if(!this.hideTrigger && tw === 0){
tw = 17;
}
if(typeof w == 'number'){
this.el.setWidth(this.adjustWidth('input', w - tw));
}
this.wrap.setWidth(this.el.getWidth() + tw);
}
});