Hello friends!
Yesterday I sent a new version and today moderator still didn't accept it. So I'm posting a new version: this fix the bug when a button is rendered hidden.
Remembering:
Any field accept 2 new config options:
Code:
buttons = obj|array
buttonsCfg = {
forceFit: true|false
padding: int|str
}
Here's the code:
Code:
Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(ct, position) {
var me = this;
me.getButtonsWidth = function() {
buttonsWidth = 0;
Ext.each(me.buttons, function(button){
if (me.buttonsCfg.forceFit) {
if (!button.hidden) {
buttonsWidth += button.getWidth();
}
} else {
buttonsWidth += (button.width ? button.width : button.getWidth());
}
});
return buttonsWidth;
}
if (me.buttons) {
// Buttons config.
me.buttonsCfg = {
/* A shortcut for setting a padding style on the buttons elements. The value can either be a number to be applied to
* all sides, or a normal css string describing padding. Defaults to undefined. Defaults to '0px 0px 0px 2px'. */
padding: me.buttonsCfg.padding || '0px 0px 0px 2px',
// Defaults to true. Specify true to have the field widths re-proportioned at all times when buttons are hidden or shown.
forceFit: me.buttonsCfg.forceFit ? true : false
};
me.buttonsWidth = 0;
// Element that wraps field and buttons.
me.wrapper = me.el.wrap();
// Applying float:left to field element.
me.el.applyStyles({
float: 'left'
});
// Array containing hidden buttons.
me.hiddenButtons = [];
// onClick new method.
var onClickFn = function(e){
if(e){
e.preventDefault();
}
if(e.button !== 0){
return;
}
if(!this.disabled){
this.doToggle();
if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){
this.showMenu();
}
this.fireEvent('click', this, this.field, e);
if(this.handler){
this.handler.call(this.scope || this, this, this.field, e);
}
}
};
// Checks configured buttons and reorganize them.
if (Ext.type(me.buttons) == 'object') me.buttons = [me.buttons];
if (Ext.type(me.buttons) == 'array') me.buttons.reverse();
// Iterates buttons.
var buttons = me.buttons;
for(var b = 0, length = buttons.length; b < length; b++) {
// Render buttons according the way they were created: rendered or not.
if (buttons[b].initialConfig) {
me.buttons[b].field = me;
me.buttons[b].onClick = onClickFn;
me.buttons[b] = me.buttons[b].render(me.wrapper);
} else {
me.buttons[b] = new Ext.Button(Ext.apply(buttons[b], {
field: me,
onClick: onClickFn,
renderTo: me.wrapper
}));
}
if (me.buttons[b].hidden) {
me.hiddenButtons[me.buttons[b].getId()] = true;
}
// Apply style to arrange buttons inside wrapper.
me.buttons[b].el.applyStyles({
float: 'right',
padding: me.buttonsCfg.padding
});
// onHide method to use with forceFit.
me.buttons[b].onHide = me.buttons[b].onHide.createSequence(function() {
if (me.buttonsCfg.forceFit && !me.hiddenButtons[this.getId()]) {
me.hiddenButtons[this.getId()] = true;
me.el.setWidth(me.el.getWidth() + this.width);
}
});
// onShow method to use with forceFit.
me.buttons[b].onShow = me.buttons[b].onShow.createSequence(function() {
if (me.buttonsCfg.forceFit && me.hiddenButtons[this.getId()]) {
me.hiddenButtons[this.getId()] = false;
me.el.setWidth(me.el.getWidth() - this.width);
}
});
// Total width of buttons.
me.buttonsWidth += me.buttons[b].width ? me.buttons[b].width : me.buttons[b].getWidth();
}
// Fixes wrapper width.
me.wrapper.setWidth(me.el.getWidth());
}
});
// Field onResize method.
Ext.form.Field.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
var me = this;
if (me.buttons) {
me.wrapper.setSize(adjWidth, adjHeight);
me.el.setSize((me.el.getWidth() - me.getButtonsWidth()), adjHeight);
me.initialWidth = me.el.getWidth();
}
});
// TriggerField onResize method.
Ext.form.TriggerField.prototype.onResize = Ext.form.TriggerField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
var me = this;
if (me.buttons) {
me.wrapper.setSize(adjWidth, adjHeight);
me.el.setSize((me.el.getWidth() - me.getButtonsWidth()), adjHeight);
me.initialWidth = me.el.getWidth();
}
});
A simple (and ugly :P) example:
Code:
oi = new Ext.Button({
text: 'oi',
hidden: true,
listeners: {
click: function(b, f, e) {
alert(this.field);
alert(f.fieldLabel);
}
},
width: 50
});
tchau = new Ext.Button({
text: 'tchau',
listeners: {
click: function() {
oi.hide();
}
},
width: 50
});
add = new Ext.form.ComboBox({
buttons: [oi, tchau, {
text: 'novo',
handler: function(b, f, e) {
alert(f.fieldLabel);
}
}],
buttonsCfg: {
forceFit: true
},
fieldLabel: 'add',
width: 200
});
del = new Ext.form.ComboBox({
fieldLabel: 'del',
width: 200
});
return new Ext.form.FormPanel({
buttons: [{
text: 'show',
handler: function() {
oi.show();
}
},{
text: 'hide tchau',
handler: function() {
tchau.hide();
}
}],
items: [add, del],
renderTo: Ext.getBody()
});
});
Thanks everyone for helping and using it! I hope you all enjoy!!!
[FIXED] Help with Button aligned to Field
Fixed!
