PDA

View Full Version : [FIXED-431][3.??] Ext.Panel does not use buttonAlign



watrboy00
15 Jan 2010, 9:48 AM
Ext version tested:

Ext 3.1 rev 5892


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:
Not a browser specific bug

Operating System:
Not an OS specific bug

Description:
The re-factor of Ext.Panel applies the buttonAlign config to the fbar which is passed into createToolbar. createToolbar just creates an instance of a toolbar which does have or use a buttonAlign config.


// private
createFbar : function(fbar){
var min = this.minButtonWidth;
this.elements += ',footer';
this.fbar = this.createToolbar(fbar, {
buttonAlign: this.buttonAlign,
toolbarCls: 'x-panel-fbar',
enableOverflow: false,
defaults: function(c){
return {
minWidth: c.minWidth || min
};
}
});
//@compat addButton and buttons could possibly be removed
//@target 4.0
/**
* This Panel's Array of buttons as created from the <code>{@link #buttons}</code>
* config property. Read only.
* @type Array
* @property buttons
*/
this.fbar.items.each(function(c){
c.minWidth = c.minWidth || this.minButtonWidth;
}, this);
this.buttons = this.fbar.items.items;
}

onRender use to apply the buttonAlign but now it does not...


// Render Toolbars. These must lay out immediately, so poke an ownerCt in them after they render
if(this.fbar){
this.footer.addClass('x-panel-btns');
this.fbar.render(this.footer);
this.fbar.ownerCt = this;
this.footer.createChild({cls:'x-clear'});
}

Test Case:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Panel</title>
<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>
<script type="text/javascript">
Ext.onReady(function(){
var p = new Ext.Panel({
buttonAlign: 'right',
buttons: [{
text: 'Not Right Aligned'
}],
height: 200,
renderTo: Ext.getBody(),
title: 'Panel',
width: 400
});
});
</script>
</head>
<body></body>
</html>

watrboy00
15 Jan 2010, 9:57 AM
Related: http://www.extjs.com/forum/showthread.php?t=89486

Jamie Avins
15 Jan 2010, 10:49 AM
Nice example, I'll get this fix in shortly.

watrboy00
15 Jan 2010, 11:04 AM
css\structure\panel.css is missing styles...

.x-panel-btns-right .x-panel-fbar {
float:right;
clear:none;
}

.x-panel-btns-left .x-panel-fbar {
clear:none;
}

.x-panel-btns-center{
text-align:center; /*ie*/
}

.x-panel-btns-center .x-toolbar-ct {
margin:0 auto; /*everyone else*/
text-align:left;
width:auto;
}

.ext-ie .x-panel-btns-right .x-toolbar-ct, .ext-gecko2 .x-panel-btns-right .x-toolbar-ct {
width:auto;
}

panel.js line 1032 r5892 change to...

this.footer.addClass('x-panel-btns x-panel-btns-'+this.buttonAlign);

Jamie Avins
15 Jan 2010, 3:56 PM
Fixed in SVN 5893