¿Cómo puedo obtener esta frontera de campos para envolver firmemente alrededor de su contenido
Pregunta
I tiene un formulario con campos añadidos dinámicamente (diferentes tamaños). Me gustaría poner un número de campos de formulario en un conjunto de campos, y tienen la frontera de campos lo suficientemente grande para contener todos los campos.
Aquí es un (feo) ejemplo que muestra el problema:
var win = new Ext.Window({
xtype: 'form',
layout: 'form',
height: 200,
width: 500,
title: 'Testing',
items: [{
xtype: 'fieldset',
layout: 'hbox',
autoHeight:true,
autoWidth: false,
title: 'Fieldset',
defaults: {
border: false,
layout: 'form',
labelAlign: 'top',
labelSeparator: ''
},
items: [{
items: new Ext.form.TextField({
fieldLabel: 'Col1',
name: 'col1',
value: 'nothing',
})
}, {
items: new Ext.form.TextField({
fieldLabel: 'Col2',
name: 'col2',
value: 'something'
})
}]
},
new Ext.form.TextField({
fieldLabel: 'Col3',
name: 'col3',
value: 'anything'
})
]
}).show();
Esto es lo que parece: ??
No voy a conocer el ancho de los campos contenidos de antemano, así que no puedo especificar un ancho.
Gracias por cualquier sugerencia.
Solución 2
Ok, funciona cambiando algunas propiedades fieldset:
diseño de 'mesa',
ANCHO AUTO true,
la adición de un CLS con 'float: left', (poniendo esto en el estilo no parece que ayuda)
y la adición de un elemento separador para borrar el flotador:
{
xtype: 'componente',
estilo: 'clear: both'
}
Se muestra ahora como se desee!
Otros consejos
No es lo que pidieron, pero añadiendo flex: 1
a los valores por defecto para el conjunto de campos hace que los campos se disponen de manera uniforme dentro de los límites del grupo de campos.