2009-11-11 30 views
5

Tengo diseño de formulario con algunos elementos de TextField y un elemento HtmlEditor. Algunos elementos de TextField son "ocultos", es decir, podrían ocultarse o mostrarse. Después de ocultar/mostrar los elementos HtmlEditor, diseño de interrupción de instancia, aparece el espacio vacío o el elemento no termina en el borde de la ventana.ExtJS: diseño de ajuste dinámico después de agregar/eliminar algunos campos de formulario

¿Es posible decirle a la instancia de HtmlEditor que use todo el espacio restante disponible? Incluso en caso de que algunos elementos estén ocultos/mostrados.

He intentado utilizar la propiedad anchor, pero funciona bien hasta que algún elemento se elimine del diseño.

Actualizado Aquí es un ejemplo de código:

var htmlEditor = new Ext.form.HtmlEditor({ 
    anchor: '100% -54', 
    hideLabel: true 
}); 

var fp = new Ext.form.FormPanel({ 
    items: [{xtype: 'textfield', fieldLabel: 'zzz', mode: 'local'}, 
      {xtype: 'textfield', fieldLabel: 'nnn', id: 'id-one', mode: 'local'}, 
     htmlEditor] 
}); 

var w = new Ext.Window({layout: 'fit', 
    height: 400, width: 600, 
    tbar: [{text: 'click', 
     handler: function() { 
      // hide element 
      Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); 
      w.doLayout(); 
     } 
     }], 
    items: fp 
}); 

w.show(); 

ejecutar, haga clic en la barra de herramientas botón "clic", un campo debe desaparecer, y luego mirar espacio vacío debajo HTMLEditor.

Respuesta

-1

debe usar la propiedad "visibilidad" del elemento. El truco es que incluso los elementos invisibles ocupan espacio en la página.

object.style.visibility="hidden" 
7

Al añadir/quitar componentes de un contenedor, hay que llamar Container.doLayout() para que se vuelva a calcular las dimensiones.

[EDIT]: Tenga en cuenta que esto se aplica solo a Ext. < = 3.x. En 4.x, el sistema de diseño lo gestiona por usted. Aunque el método todavía está allí, nunca deberías tener que usarlo.

+0

No ayuda realmente. Cuando algún elemento simplemente está oculto, aparece un espacio vacío debajo de HtmlEditor (o textarea). –

+0

Mi comentario asume que (A) sus widgets están configurados con el anclaje adecuado, y (B) todos los contenedores anidados tienen un diseño apropiado configurado. Si tienes otras cosas configuradas incorrectamente, doLayout() no será de ayuda, pero como no has publicado ningún código, es imposible saber cuál podría ser el problema. –

+0

Una cosa más: suponiendo que tiene un diseño de aplicación complicado, para resolver este problema debe codificar un caso de prueba simple con un FormPanel no anidado y con suficientes campos y código de diseño para probar su escenario. Una vez que tenga ese trabajo, será más fácil averiguar qué es lo que necesita cambiar en el código de su aplicación. Tu caso de uso es bastante alcanzable ya que he hecho exactamente lo mismo antes. –

4

[respuesta Nueva por lo que puedo formato de código]

Un enfoque sería hacer su diseño algo exterior más diseñado para hacer lo que quiera, como decir un BorderLayout con un norte (sus campos superiores) y el centro (el editor html). De esta forma, el editor html podría simplemente anclarse al 100% de la altura de su contenedor (la región central). En ese caso, dado que el diseño se gestionaría correctamente, mi consejo anterior de doLayout() debería funcionar.

Si realmente desea administrar los campos fuera de un diseño que lo ayudarán a hacerlo, le corresponderá administrar las alturas manualmente. La modificación de la propiedad de ancla es una forma de hacerlo. La forma en que lo hice en el pasado (y es más preferible) es escuchar un evento apropiado y establecer el tamaño de los componentes según sea necesario. Así, por ejemplo, es posible añadir un detector de cambio de tamaño de la ventana:

listeners: { 
     'resize': function(){ 
      Ext.getCmp('my-htmleditor').setHeight(w.getEl().getHeight()-110); 
     } 
    } 

Usando su código de prueba, esto te lleva muy cerca. Sin embargo, en el código real, querrás obtener las alturas de tus componentes visibles existentes y restar ese número en lugar de codificarlo, pero entiendes la idea. Una forma de facilitar este enfoque es agregar los campos superiores a un Panel independiente que sea autoHeight: verdadero, luego de mostrar u ocultar los campos, simplemente mida la altura de ese Panel y reste la altura de la ventana (más los márgenes/relleno) para obtener la altura de su editor html (eso es lo que hice en el pasado cuando no podía confiar en un diseño para administrarlo).

Como puede ver, hay muchas maneras de desollar a este gato, para que pueda elegir el enfoque que mejor se adapte a usted.

1

usa autoHeight:true y la ventana cambia de tamaño para adaptarse al contenedor.

1

trate de poner este evento Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); el interior de la ventana afterlayout y la adición de una condición no ...

así:

'afterlayout': function() { 
    <condition> { 
     Ext.getCmp('id-one').getEl().up('.x-form-item').setDisplayed(false); 
    } 
} 

esperanza que esto ayude!

Cuestiones relacionadas