PDA

View Full Version : Any Field with Button beside!



primolan
13 Apr 2010, 10:27 AM
Hello guys!

I need a field (any type) with a button beside. I searched and realized that a low of people was trying to find it but no one was having success. I tried and finally came up with the solution! I hope you all enjoy!


Just use the property buttonConfig as a Ext.Button config. Simple!



// onRender method
Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(thisContainer, thisPosition){
if (this.buttonConfig) {
this.wrapper = this.el.wrap({
style: 'clear: both;'
});
this.el.applyStyles('float: left;');
this.button = new Ext.Button(Ext.apply(this.buttonConfig, {
renderTo: this.wrapper,
style: 'float: right;'
}));
}
});

// onResize method
Ext.form.Field.prototype.onResize = Ext.form.TriggerField.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
if (this.buttonConfig) {
this.wrapper.setSize(adjWidth, adjHeight);
if (!this.wrap) { // textfield
var elWidth = this.wrapper.getWidth() - (this.button.getEl().getWidth() + this.buttonConfig.buttonOffset);

} else { // triggerfield
var elWidth = this.wrapper.getWidth() - (this.button.el.getWidth() + this.trigger.getWidth() + this.buttonConfig.buttonOffset);
}
this.el.setSize(elWidth, adjHeight);
}
});

//var field = new Ext.form.TextField({
var field = new Ext.form.DateField({
renderTo: Ext.getBody(),
width: 200,
store: ['Rodrigo', 'Primolan'],
buttonConfig: {
buttonOffset: 3,
iconCls: 'icon-add',
handler: function(thisButton) {
alert('field plus button working!');
}
}
});

primolan
19 Apr 2010, 4:27 AM
Fixed methods. Now it works with ux.FileUploadField and allows multiple buttons.

Just use property buttons on your field configuration.

Eg.:



return new Ext.form.TriggerField({
buttons: [{
iconCls: 'icon-add',
id: 'button'
},{
iconCls: 'icon-delete'
},{
iconCls: 'icon-zoom',
handler: function(b, e) {
var b = Ext.getCmp('button');
b.setDisabled(!b.disabled);
},
scope: this
}],
fieldLabel: 'User',
hiddenName: 'user',
name: 'user',
renderTo: Ext.getBody(),
width: 300
});


Just write this code into a file (I called buttonsField.js) and include it, very simple. I hope you all enjoy!



// Field onRender method
Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(thisContainer, thisPosition){
if (this.buttons) {
this.wrapper = this.el.wrap({
style: 'clear: both;'
});
this.el.applyStyles('float: left;');
var button = {};
this.buttonsWidth = 0;
this.buttons.reverse();
for(var b = 0, length = this.buttons.length; b < length; b++) {
button[b] = new Ext.Button(Ext.apply(this.buttons[b], {
renderTo: this.wrapper,
style: 'float: right; padding: 0px 0px 0px 2px'
}));
this.buttonsWidth += button[b].el.getWidth();
}
this.wrapper.setWidth(this.el.getWidth());
this.el.setWidth(this.el.getWidth() - this.buttonsWidth);
}
});

// Field onResize method
Ext.form.Field.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
if (this.buttons) {
this.wrapper.setSize(adjWidth, adjHeight);
this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
}
});

// TriggerField onResize method
Ext.form.TriggerField.prototype.onResize = Ext.form.TriggerField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
if (this.buttons) {
this.wrapper.setSize(adjWidth, adjHeight);
this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
}
});

// ux.FileUploadField onResize method
Ext.ux.form.FileUploadField.prototype.onResize = Ext.ux.form.FileUploadField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
if (this.buttons) {
this.wrapper.setSize(adjWidth, adjHeight);
var wrapWidth = adjWidth - this.buttonsWidth;
this.wrap.applyStyles('float: left;');
this.wrap.setSize(wrapWidth, adjHeight);
var width = (this.wrap.getWidth() - this.button.el.getWidth());
var elWidth = this.wrapper.getWidth() - (this.buttonsWidth + this.button.el.getWidth() + 2);
this.el.setSize(elWidth, adjHeight);
}
});

primolan
30 Apr 2010, 4:12 AM
Hello!

Fixed again! Now the handler function accepts a third parameter, the field.

Note that I made some extra code on Ext. I only left here to facilitate the copy of code. It would be better move that piece of code into a different file, called, eg, as override.js.



/**
* Gives possibility to any field to have any buttons beside.
*
* @cfg buttons : object/array Ext.Button
* @cfg button.handler now reveives a third parameter, the field. Eg.: handler: function(button, field, event)
*
* new Ext.form.TextField({
* buttons: {
* handler: function(b, f, e) {
* alert(b); alert(f); alert(e);
* }
* text: 'here!'
* },
* fieldLabel: 'Nome',
* name: 'name'
* });
*
* author: Rodrigo Novelo Primolan (primolan@interair.com.br)
*/

Ext.prototype = {
isObject: function(v) {
return (typeof(v) == 'object' && v.length == undefined);
},
isArray: function(v) {
return (typeof(v) == 'object' && v.length != undefined);
}
};

// Field onRender method
Ext.form.Field.prototype.onRender = Ext.form.Field.prototype.onRender.createSequence(function(thisContainer, thisPosition){
if (this.buttons) {
this.wrapper = this.el.wrap({
style: 'clear: both;'
});
this.el.applyStyles('float: left;');
var button = {};
this.buttonsWidth = 0;
if (Ext.isObject(this.buttons)) {
this.buttons = [this.buttons];
} else {
this.buttons.reverse();
}
for(var b = 0, length = this.buttons.length; b < length; b++) {
button[b] = new Ext.Button(Ext.apply(this.buttons[b], {
field: this,
renderTo: this.wrapper,
style: 'float: right; padding: 0px 0px 0px 2px',
onClick: function(e) {
if (e) {
e.preventDefault();
}
if (e.button !== 0){
return;
}
if (!this.disabled) {
if (this.enableToggle && (this.allowDepress !== false || !this.pressed)) {
this.toggle();
}
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);
}
}
}
}));
this.buttonsWidth += button[b].el.getWidth();
}
this.wrapper.setWidth(this.el.getWidth());
this.el.setWidth(this.el.getWidth() - this.buttonsWidth);
}
});

// Field onResize method
Ext.form.Field.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
if (this.buttons) {
this.wrapper.setSize(adjWidth, adjHeight);
this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
}
});

// TriggerField onResize method
Ext.form.TriggerField.prototype.onResize = Ext.form.TriggerField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
if (this.buttons) {
this.wrapper.setSize(adjWidth, adjHeight);
this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
}
});

// ux.FileUploadField onResize method
Ext.ux.form.FileUploadField.prototype.onResize = Ext.ux.form.FileUploadField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
if (this.buttons) {
this.wrapper.setSize(adjWidth, adjHeight);
var wrapWidth = adjWidth - this.buttonsWidth;
this.wrap.applyStyles('float: left;');
this.wrap.setSize(wrapWidth, adjHeight);
var width = (this.wrap.getWidth() - this.button.el.getWidth());
var elWidth = this.wrapper.getWidth() - (this.buttonsWidth + this.button.el.getWidth() + 2);
this.el.setSize(elWidth, adjHeight);
}
});


I hope you all enjoy!

genie_vn
2 May 2010, 8:02 PM
Thanks, in need for this, trying it now :-)

Condor
2 May 2010, 10:06 PM
Any reason you are not using a TriggerField or a CompositeField?

primolan
3 May 2010, 5:40 AM
Condor,

I didnt understand very well your question, but I used Field because all other types are extended from it. Was this the answer you expected?! :P

Cya!

WixSL
15 Jul 2010, 10:42 AM
This is awsome!
Thank you!

I don't know witch versio of Ext are you using right now, but with v3.2.1 under FF 3.6.6 / Opera 10.6 / IE8 / Chrome 4 i had to make the following change:

this.wrapper = this.el.wrap({
-- style: 'clear: both;'
++ style: 'clear: right;'
});

Jaitsu
16 Jul 2010, 12:08 AM
http://www.sencha.com/deploy/dev/docs/?class=Ext.form.TriggerField

It's already in 3.0+

WixSL
21 Jul 2010, 8:41 AM
But that is only for form controls that inherit from TriggerField.
If i want to add buttons beside a CheckBox or a TextArea, the TriggerField won't do.