Crear boton a la derecha de un textfield
Saludos,
Estoy intentando crear un formulario en el que algunos de los campos de texto deben tener un botón a su derecha. EL error que me da es que al poner el boton me lo inserta debajo del textfield en vez de a la derecha:
Código concreto:
var fpCalcInc = new Ext.form.FormPanel({
bodyStyle:'padding:5px 5px 0; text-align:right;',
autoHeight: true,
border: false,
layout: 'table',
//cls:'alinearderecha',
layoutConfig: {
columns: 2,
tableAttrs: {
style: {
width: '100%',
buttonAlign: 'right'
}
}
},
/* defaults: {
border: false,
labelAlign: 'top',
labelWidth: 50
},*/
items: [
{
layout: 'form',
align: 'right',
items:[ {
xtype: 'numberfield',
fieldLabel: 'totales',
name: 'desIcp',
ref: '../desIcp',
tabIndex: 2,
//readOnly:true,
//cls:'verde',
//width: '30%'
style: {
width: '30%',
align: 'right'
//marginBottom: '10px'
},
},
{
xtype: 'button',
text: 'rojo',
width: '150px'
}
]
//items
},
(...)
El código completo del formulario:
Ext.onReady(function() {
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
var fpCalcInc = new Ext.form.FormPanel({
bodyStyle:'padding:5px 5px 0; text-align:right;',
autoHeight: true,
border: false,
layout: 'table',
//cls:'alinearderecha',
layoutConfig: {
columns: 2,
tableAttrs: {
style: {
width: '100%',
buttonAlign: 'right'
}
}
},
/* defaults: {
border: false,
labelAlign: 'top',
labelWidth: 50
},*/
items: [
{
layout: 'form',
align: 'right',
items:[ {
xtype: 'numberfield',
fieldLabel: 'totales',
name: 'desIcp',
ref: '../desIcp',
tabIndex: 2,
//readOnly:true,
//cls:'verde',
//width: '30%'
style: {
width: '30%',
align: 'right'
//marginBottom: '10px'
},
},
{
xtype: 'button',
text: 'rojo',
width: '150px'
}
]
//items
},
{
layout: 'form',
items: {
xtype: 'numberfield',
//fieldLabel: 'fechafin',
//labelSeparator: '',
name: 'timEnvIncRHH',
ref: '../timEnvIncRHH',
id: 'timEnvIncRHH',
tabIndex: 3,
//cls:
width: '30%'
}
},
{
layout: 'form',
items: {
xtype: 'numberfield',
//fieldLabel: 'fechafin',
//labelSeparator: '',
name: 'timEIncRHHaa',
ref: '../timvIncRHHaa',
id: 'timEnncRHHaa',
tabIndex: 3,
//cls:
width: '30%'
}
},
{
layout: 'form',
items: {
xtype: 'numberfield',
//fieldLabel: 'fechafin',
//labelSeparator: '',
name: 'tiHHaa',
ref: '../tsadncRHHaa',
id: 'timEsdaHaa',
tabIndex: 3,
//cls:
width: '30%'
}
},
{
layout: 'form',
items: {
xtype: 'numberfield',
//fieldLabel: 'fechafin',
//labelSeparator: '',
name: 'timEIncsHHaa',
ref: '../timvIcRHHaa',
id: 'timEdaHaa',
tabIndex: 3,
//cls:
width: '30%'
}
},
{
layout: 'form',
items: {
xtype: 'numberfield',
//fieldLabel: 'fechafin',
//labelSeparator: '',
name: 'qqq',
ref: '../qqq',
id: 'qqq',
tabIndex: 3,
//cls:
width: '30%'
}
},
{
layout: 'form',
colspan:2,
items: {
xtype: 'numberfield',
name: 'timEnvIncRHHaa',
ref: '../timEnvIncRHHaa',
id: 'timEnvIncRHHaa',
tabIndex: 3,
width: '10%'
}
}],
buttonAlign: 'center',
buttons: [{
text: 'buscar',
iconCls: 'icon-find',
tabIndex: 3,
handler: function(){
validarBusqueda();
}
},
{
text: 'limpiar',
iconCls: 'icon-reset',
tabIndex: 4,
handler: function(){
fpCalcInc.form.reset();
stCalcInc.removeAll();
grCalcInc.resetPagingToolbar();
}
},
{
text: 'salir',
id: 'grCalcIncBtnSal',
iconCls: 'icon-close',
tabIndex: 5,
handler: function(){
//Ocultamos la ventana de Busqueda de incentivos calculo proceso
winCalcInc.close()
}
}]//buttons
}) //fpCalcInc
fpCalcInc.render(document.body);
});
PD: Maquetar formularios con extjs que se salgan de "campos de texto con botones al final" es un coñazo.
Usuario no registrado
09/10/2010
puedes crearte un componente y luego registrarlo te pongo un ejemplo:
Ext.ns("Ext.ux");
Ext.ux.txtandbutton = Ext.extend(Ext.Panel, {
width: 400,
height: 250,
layout: 'hbox',
autoHeight: true,
initComponent: function() {
this.items = [
{
xtype: 'textfield',
flex: 1
},
{
xtype: 'button',
text: 'MyButton',
flex: 0
}
];
txtandbutton.superclass.initComponent.call(this);
}
});
Ext.reg('txtandbutton', Ext.ux.txtandbutton);
ahora lo incluyes en tu documento y para llamarlo desde otro componente pones
{
xtype:"txtandbutton",
.......
}
Y ya está <!-- s;) --><!-- s;) --> es sencillo
Invitado
09/10/2010
Bueno, creo q cada uno tiene su modo, yo trabajo asi:
{xtype: 'compositefield',
fieldLabel:'Cliente',
items:[
{ xtype:'textfield',width:478, name:'cliente', id:'cliente',allowBlank:false}, {xtype:'button',name:'boton',iconCls:'boton',id:'boton'}
]
}
PPor cierto todo eso es un ítems de mi form
Invitado
09/10/2010
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.