Cómo establecer estilos usando ExtJS

que querían cambiar los estilos como el color, tamaño de fuente, fondo, etc., de un elemento o widget de extJS utilizando siguiente código pero ninguno funciona:Cómo establecer estilos usando ExtJS

Ext.get('mydivid').setStyle({.......});  // does not work 
Ext.get('mydivid').applyStyle({.......}); // does not work 
Ext.select('mydivid').applyStyle({.......}); // does not work 
Ext.query('.myclass').applyStyle({.......}); // does not work

Y para widget de extJs Intenté usar Ext.getCmp.

¿Alguien sabe cómo cambiar los estilos de un elemento html y un widget extJS usando extJS y no CSS?

Fuente

2011-03-20 Sarfraz

Cambiar el estilo de los elementos HTML DOM es muy fácil:

HTML

<html> 
    <head> 
     <title>Test</title> 
    </head> 
    <body> 
     <div id="el1">Element 1</div> 
     <div class="el">Element [1]</div> 
     <div class="el">Element [2]</div> 
    </body> 
</html>

Javascript

Ext.onReady(function() { 
    Ext.get('el1').setStyle('color', 'red'); 
    Ext.select('.el').setStyle('color', 'green'); 
});

Ext.query no va a funcionar directamente, ya que devuelve una simple matriz de los nodos DOM encontrados, por lo que tendrías que recorrer el resultado t para aplicar estilos. ¿Qué hiciste exactamente?

widgets de estilo no es tan desafortunado. La mayoría de los widgets proporcionan algunos atributos de estilo, como cls, ctCls, bodyCls o style, pero se aplican al representar el componente. Para cambiar el estilo de los widgets después del renderizado, debe cambiar los elementos DOM del widget directamente utilizando los métodos anteriores.

Fuente

2011-03-20 14:17:21

+1 Gracias por su respuesta. ¿No podemos usar 'setStyle' o' applyStyles' para widgets? – Sarfraz

No puede establecer el estilo de un widget directamente porque un widget en sí no tiene un estilo. El widget está formado por nodos DOM que están asignados a clases CSS o tienen atributos de estilo configurados para producir la apariencia general de un widget. Para manipular los estilos, debe acceder a los nodos DOM que forman el widget y aplicar los estilos allí. El mejor enfoque es siempre el uso de clases de CSS: jugar con 'setStyle()' en los nodos DOM no es realmente lo que deberías hacer. –

Hay error del error tipográfico en su pregunta:

no es applyStyle pero applyStyles.

applyStyles es el método de Ext.Element, puede utilizar la siguiente manera:

var win = new Ext.Window({ 
     width: 200, 
     height: 200 
}); 
win.show(); 

win.body.applyStyles({ 
    'background-color':'red', 
    'border': '1px solid blue' 
});

Fuente

2011-12-09 12:28:35

El siguiente es posible en el widget (pero sólo antes de que se hace, ya que la propiedad style configuración se aplica durante el render):

Ext.define('Ext.Component', { 
    style: {}, 
    initComponent: function(config) { 
    this.callParent(config); 
    this.style['background-color'] = 'red'; 
    } 
});

Esto es útil, por ejemplo, si está actuando sobre algún valor específico de alguna otra configuración.

Como se ha señalado una vez dictada que tienen acceso al método setStyle() de la Ext.Element encapsulado:

component.getEl().setStyle(config);

Finalmente, puede ir directamente a la carne, y acceder a la DOM element encapsulado directamente:

component.getEl().dom.style.backgroundColor = 'red';

Fuente

2014-04-22 17:25:10

Cómo establecer estilos usando ExtJS

Respuesta

Cuestiones relacionadas