El ancho de campo de números extjs es incorrecto

StackOverflow https://stackoverflow.com//questions/22026851

  •  21-12-2019
  •  | 
  •  

Pregunta

Cuando se agrega un campo de número (o campo de fecha) a un panel de formulario, el ancho del campo numérico no se ajusta para que coincida con el ancho del panel.Aquí hay un ejemplo simple que muestra que el campo de texto se ajusta para adaptarse al espacio disponible, pero el campo número no lo es.Consulte este jsfiddle .

Parece un error en el diseño del selector de Extjs.¿Alguien tiene un trabajo alrededor? 

<head>
<link rel="stylesheet" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/resources/css/ext-all.css">
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.namespace('E2cc.settings');
E2cc.settings.getString = function(s) { return s; }
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
    width: 200,
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Text',
        border: 3,
        style: {
            borderColor: 'black',
            borderStyle: 'solid',
        }
    }, {
        xtype: 'numberfield',
        fieldLabel: 'Number',
        border: 3,
        style: {
            borderColor: 'red',
            borderStyle: 'solid'
        },
        name: 'date'
    }],
    renderTo: Ext.getBody()
});
});
</script>

</body>

¿Fue útil?

Solución

No pude explicar por qué se rinde de manera diferente a un libro de texto normal, pero una buena práctica en EXTJS es especificar el ancho de sus elementos y no permitir que Extjs Layo lo compulte para usted.Agregue Ancla: '100%' a su campo de números y debe estar bien.

Otros consejos

Creo que si desea definir algunos mismos valores a todos los campos, debe definirlo en la propiedad de Dedatults.

Consulte su ejemplo modificado

Ext.create('Ext.form.Panel', { width: 200, defaults : { width: 200, labelWidth : 70 }, items: [{ xtype: 'textfield', fieldLabel: 'Text', border: 3, style: { borderColor: 'black', borderStyle: 'solid', } }, { xtype: 'numberfield', fieldLabel: 'Number', border: 3, style: { borderColor: 'red', borderStyle: 'solid' }, name: 'date' }], renderTo: Ext.getBody() });

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top