Comunidad de diseño web y desarrollo en internet online

Flex - Datagrid - Color del componente deshabilitado

Citar            
MensajeEscrito el 29 Nov 2010 02:17 pm
Buenas tardes,

Tengo un Datagrid que, dependiendo de la selección realizada por el usuario, se debe mostrar habilitado o deshabilitado. Para ello, estoy cambiando la propiedad enabled="false" en tiempo de ejecución.

El problema que tengo, es que al deshabilitar el datagrid sólo cambia el color de la barra de desplazamiento, no se queda gris ni el título del componente, ni el texto de las filas ni nada... lo que hace que no parezca deshabilitado (y claro, a mi jefe esto no le gusta nada...)

Estoy probando todos los tipos de "disabledcolor" que encuentro en las propiedades (backgroundDisabledColor, disabledColor, disabledIconColor, etc) pero lo único que consigo es cambiar el color de la barra de desplazamiento.

:(

He probado a crear 2 datagrids en un proyecto nuevo sin tocar nada de estilos (por si acaso era por algún themeColor, o itemRenderer que tengo por ahí) pero parece que ocurre lo mismo.... Os pego el código por si queréis probarlo:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="422" height="416">
<mx:Script>
   <![CDATA[
      [Bindable]
      public var datosEjemplo:XML = new XML(
        <DATOS>
           <DATOSGRID> <IND> Indicador  1</IND> <VAL> 30643</VAL> <ACU>  343935</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  2</IND> <VAL>  1136</VAL> <ACU>    8985</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  3</IND> <VAL>  7114</VAL> <ACU>   81751</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  4</IND> <VAL> 27860</VAL> <ACU>  257851</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  5</IND> <VAL> 30743</VAL> <ACU>  338666</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  6</IND> <VAL>   545</VAL> <ACU>    7230</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  7</IND> <VAL>   326</VAL> <ACU>    5450</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  8</IND> <VAL>   165</VAL> <ACU>    1572</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  9</IND> <VAL> 29848</VAL> <ACU>  330662</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador 10</IND> <VAL>  1931</VAL> <ACU>   22256</ACU> </DATOSGRID>      
        </DATOS>
      );
      [Bindable]
      public var datosGrid:XMLList = datosEjemplo.descendants("DATOSGRID");
   ]]>
</mx:Script>
   <mx:DataGrid x="60" y="57" dataProvider="{datosGrid}">
      <mx:columns>
         <mx:DataGridColumn headerText="Column 1" dataField="IND"/>
         <mx:DataGridColumn headerText="Column 2" dataField="VAL"/>
         <mx:DataGridColumn headerText="Column 3" dataField="ACU"/>         
      </mx:columns>
   </mx:DataGrid>
   <mx:DataGrid x="60" y="233" enabled="false" dataProvider="{datosGrid}" >
      <mx:columns>
         <mx:DataGridColumn headerText="Column 1" dataField="IND" />
         <mx:DataGridColumn headerText="Column 2" dataField="VAL"/>
         <mx:DataGridColumn headerText="Column 3" dataField="ACU"/>   
      </mx:columns>
   </mx:DataGrid>
</mx:Application>


Y esto es lo que sale:




Muchas gracias. Un saludo!

Por Pilar_RWS

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Nov 2010 02:46 pm
Puedes cambiarle el estilo cuando lo deshabilitas, si miras en la ayuda veás que tienes bastante cosas que puedes cambiar:

Styles
backgroundDisabledColor="0xEFEEEF"
columnDropIndicatorSkin="DataGridColumnDropIndicator"
columnResizeSkin="DataGridColumnResizeSkin"
disabledIconColor="0x999999"
headerColors="[#FFFFFF, #E6E6E6]"
headerDragProxyStyleName="headerDragProxyStyle"
headerSeparatorSkin="DataGridHeaderSeparator"
headerStyleName="dataGridStyles"
horizontalGridLineColor="0xF7F7F7"
horizontalGridLines="false|true"
horizontalLockedSeparatorSkin="undefined"
horizontalSeparatorSkin="undefined"
iconColor="0x111111"
rollOverColor="0xB2E1FF"
selectionColor="0x7FCEFF"
sortArrowSkin="DataGridSortArrow"
stretchCursor=""cursorStretch" symbol from the Assets.swf file"
verticalGridLineColor="0xCCCCCC"
verticalGridLines="false|true"
verticalLockedSeparatorSkin="undefined"
verticalSeparatorSkin="undefined"

Te conviene crear un estilo CSS para aplicar y quitar según el estado

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 30 Nov 2010 09:01 am
Muchas gracias.

A lo mejor es que yo soy muy bruta, pero con las indicaciones que me has dado no soy capaz... Ninguno de esos atributos de estilo parece ser para lo que yo necesito...

Me serviría sólo con poder cambiar el texto a gris, estoy probando también con un itemRenderer en cada dataGridColumn pero no sé como detectar si el dataGrid está deshabilitado o no....

Código :

   <mx:DataGrid x="60" y="233" enabled="false" dataProvider="{datosGrid}" >
      <mx:columns>
         <mx:DataGridColumn headerText="Column 1" dataField="IND" itemRenderer="rowColor.ColorInd"/>
         <mx:DataGridColumn headerText="Column 2" dataField="VAL" itemRenderer="rowColor.ColorInd"/>
         <mx:DataGridColumn headerText="Column 3" dataField="ACU" itemRenderer="rowColor.ColorInd"/>   
      </mx:columns>
   </mx:DataGrid>


Código :

/*   ColorInd.as   */
package rowColor{
    import mx.controls.Label;
    import mx.controls.listClasses.*;
 
    public class ColorInd extends Label { 
        private const NORMAL_COLOR:uint = 0x000000; // Negro
        private const DISAB_COLOR:uint     = 0xEFEFEF; // Gris

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            setStyle("color", (AQUI ES DONDE TENGO QUE PONER LA CONDICION) ? SELECT_COLOR: NORMAL_COLOR); 
        }
    }
}

Por Pilar_RWS

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 30 Nov 2010 10:13 am
Bueno, al final lo he conseguido (más o menos); pero para lo que yo necesito, me vale.

Pongo la solución aquí por si a alguien más le sirve en un futuro:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="422" height="416">
<mx:Script>
   <![CDATA[
      [Bindable]
      public var datosEjemplo:XML = new XML(
        <DATOS>
           <DATOSGRID> <IND> Indicador  1</IND> <VAL> 30643</VAL> <ACU>  343935</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  2</IND> <VAL>  1136</VAL> <ACU>    8985</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  3</IND> <VAL>  7114</VAL> <ACU>   81751</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  4</IND> <VAL> 27860</VAL> <ACU>  257851</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  5</IND> <VAL> 30743</VAL> <ACU>  338666</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  6</IND> <VAL>   545</VAL> <ACU>    7230</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  7</IND> <VAL>   326</VAL> <ACU>    5450</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  8</IND> <VAL>   165</VAL> <ACU>    1572</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador  9</IND> <VAL> 29848</VAL> <ACU>  330662</ACU> </DATOSGRID>
           <DATOSGRID> <IND> Indicador 10</IND> <VAL>  1931</VAL> <ACU>   22256</ACU> </DATOSGRID>      
        </DATOS>
      );
      [Bindable]
      public var datosGrid:XMLList = datosEjemplo.descendants("DATOSGRID");
      
      private function activaOdesactiva():void{
         if(DG.enabled){
            DG.enabled = false;
            disabGrids.visible = true;
            boton.label = "Activar";            
         }else{
            DG.enabled = true;
            disabGrids.visible = false;
            boton.label = "Desactivar";
         }
      }
   ]]>
</mx:Script>

   <mx:DataGrid x="53" y="21" dataProvider="{datosGrid}" height="153" width="316">
      <mx:columns>
         <mx:DataGridColumn headerText="Column 1" dataField="IND"/>
         <mx:DataGridColumn headerText="Column 2" dataField="VAL"/>
         <mx:DataGridColumn headerText="Column 3" dataField="ACU"/>         
      </mx:columns>
   </mx:DataGrid>
   <mx:DataGrid x="53" y="200" enabled="false" dataProvider="{datosGrid}" height="153" width="316" id="DG">
      <mx:columns>
         <mx:DataGridColumn headerText="Column 1" dataField="IND"/>
         <mx:DataGridColumn headerText="Column 2" dataField="VAL"/>
         <mx:DataGridColumn headerText="Column 3" dataField="ACU"/>   
      </mx:columns>
   </mx:DataGrid>
   <mx:Canvas x="53" y="200" id="disabGrids" height="153" width="316" backgroundColor="#ECECEC" backgroundAlpha="0.5"></mx:Canvas>
   <mx:Button x="164.5" y="375" label="Activar" click="activaOdesactiva()" id="boton" width="93"/>
</mx:Application>



Y este es el resultado:

Por Pilar_RWS

3 de clabLevel



 

chrome
Citar            
MensajeEscrito el 30 Nov 2010 02:26 pm
¿Un datagrid duplicado con distinto estilo de texto? No es la mejor solución. Dentro de tu itemRenderer puedes escuchar el evento onChange y refrescar el dataProvider, haciendo que el itemRenderer alternativamente cambie de un estilo a otro. Buscando rápidamente no encontré evento "disabled" que sería lo suyo, pero duplicar un datagrid es overkilling (aunque para un ejemplo banal funcione) Debería investigarlo ...

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 30 Nov 2010 05:03 pm

solisarg escribió:

¿Un datagrid duplicado con distinto estilo de texto? No es la mejor solución. Dentro de tu itemRenderer puedes escuchar el evento onChange y refrescar el dataProvider, haciendo que el itemRenderer alternativamente cambie de un estilo a otro. Buscando rápidamente no encontré evento "disabled" que sería lo suyo, pero duplicar un datagrid es overkilling (aunque para un ejemplo banal funcione) Debería investigarlo ...

Jorge


No hombre, no!! :lol:

El doble datagrid lo puse sólo para el ejemplo, de forma que se observara la diferencia entre el componente "enabled" y el componente "disabled".

En mi aplicación sólo uso 1 datagrid, la "solución" que he encontrado al problema que planteaba en el primer post (cómo cambiar el estilo del datagrid para que sea más evidente que está deshabilitado), ha sido poner un canvas de color gris y opacidad al 50%, inmediatamente después del datagrid, con el mismo tamaño y coordenadas que éste:

Código Flex :

  <mx:DataGrid x="53" y="200" enabled="false" dataProvider="{datosGrid}" height="153" width="316" id="DG">
      <mx:columns>
         <mx:DataGridColumn headerText="Column 1" dataField="IND"/>
         <mx:DataGridColumn headerText="Column 2" dataField="VAL"/>
         <mx:DataGridColumn headerText="Column 3" dataField="ACU"/>   
      </mx:columns>
   </mx:DataGrid>

   <!-- Este canvas lo muestro y oculto a la vez que cambio la propiedad Enabled del Datagrid anterior -->
   <mx:Canvas x="53" y="200" id="disabGrids" height="153" width="316" backgroundColor="#ECECEC" backgroundAlpha="0.5"></mx:Canvas>


Cuando se produce el evento o situación que debe deshabilitar este datagrid, muestro también el canvas, de forma que "aparentemente", el datagrid ha cambiado de color. Cuando habilito el datagrid, oculto también el canvas, y vuelve a su estado inicial.

Código Flex :

     if(DG.enabled){
           //Deshabilito el datagrid
            DG.enabled = false;
            //Muestro el canvas gris que está delante
            disabGrids.visible = true;
            boton.label = "Activar";            
         }else{
            //Habilito el datagrid
            DG.enabled = true;
            //Oculto el canvas gris
            disabGrids.visible = false;
            boton.label = "Desactivar";
         }



Siento si el ejemplo te ha confundido... Gracias de todas formas.


Saludos!!

Por Pilar_RWS

3 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.