Results 1 to 9 of 9

Thread: Problem setting background color in IE6

  1. #1

    Default Problem setting background color in IE6

    Hi,

    I am trying to change the background color of the a grid row. I am using the following code snippet to do so. It works fine in Safari, IE 7 and Fire Fox, but fails in IE6.

    Note:

    1. I have to change the background color and the image at runtime so I cannot use a static class that is defined in some css file

    2. I have tried using the '!important' attribute but this did not work.

    getRowClass: function(record) {
    arguments[2].tstyle += "background:#FF000 url('../../RM-ui/images
    /severity_GRAY.png');";
    return grid.getView().getRowClass.apply(this, arguments);
    }

    Can some one let me know what is wrong in this.

    Regards,
    Pankaj.

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    You can't add !important to inline styles.

    Did you try it with 2 separate styles:
    Code:
    getRowClass: function(r, rowIndex, rp, ds){
      rp.tstyle += 'background-color:#F00;background-image:url(../../RM-ui/images/severity_GRAY.png);';
    }

  3. #3

    Default

    Yes, I have tried adding 2 diffferent styles background-color:#00FFF and background-image: url('../../RM-ui/images/severity_GRAY.png);'; but this did not work.

    Can you suggest me what is wrong why is it not working in IE6?

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Are you doing anything special, because this example works correctly:
    Code:
    Ext.onReady(function(){
    	new Ext.Viewport({
    		layout: 'fit',
    		items: {
    			xtype: 'grid',
    			store: new Ext.data.SimpleStore({
    				fields: ['a', 'b', 'c'],
    				data: [
    					[1, 2, 3],
    					[2, 3, 4],
    					[3, 4, 5]
    				]
    			}),
    			columns: [
    				{dataIndex: 'a', header: 'Column A'},
    				{dataIndex: 'b', header: 'Column B'},
    				{dataIndex: 'c', header: 'Column C'}
    			],
    			viewConfig: {
    				getRowClass: function(r, rowIndex, rp, ds){
    					rp.tstyle += 'background:#F00 url(resources/images/default/window/icon-warning.gif);';
    					return '';
    				}
    			}
    		}
    	});
    });

  5. #5
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    146

    Default

    Quote Originally Posted by pachaudhary View Post
    Hi,

    I am trying to change the background color of the a grid row. I am using the following code snippet to do so. It works fine in Safari, IE 7 and Fire Fox, but fails in IE6.

    Note:

    1. I have to change the background color and the image at runtime so I cannot use a static class that is defined in some css file

    2. I have tried using the '!important' attribute but this did not work.

    getRowClass: function(record) {
    arguments[2].tstyle += "background:#FF000 url('../../RM-ui/images
    /severity_GRAY.png');";
    return grid.getView().getRowClass.apply(this, arguments);
    }

    Can some one let me know what is wrong in this.

    Regards,
    Pankaj.
    Quote Originally Posted by pachaudhary View Post
    Yes, I have tried adding 2 diffferent styles background-color:#00FFF and background-image: url('../../RM-ui/images/severity_GRAY.png);'; but this did not work.

    Can you suggest me what is wrong why is it not working in IE6?
    I have seen your too codes here (please use code tags to get this looking better) and i only could say that you have an incorrect color code. "#FF000" is not a color code "#FF0000" is a color code, you must have 6 chars after "#" for color codes or use only 3 of them (in your case would be #F00).

    Maybe thats the problem...
    Javier Rincón aka SysCobra

  6. #6

    Default

    That was a typo error. I have the color set to #FF0000, but still facing the same error. And this happens only on IE6 works fine in IE7, Safari and Firefox

  7. #7

    Default

    I have check the style that is getting applied on the row, its is

    BACKGROUND: url('../../RM-ui/images/severity_GRAY.png') #ff99cc; WIDTH: 1586px

    This is not working on IE6.

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    And does my example above work on your IE6? If yes, then what are you doing differently?

  9. #9
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    146

    Default

    Quote Originally Posted by pachaudhary View Post
    I have check the style that is getting applied on the row, its is

    BACKGROUND: url('../../RM-ui/images/severity_GRAY.png') #ff99cc; WIDTH: 1586px

    This is not working on IE6.
    This is not the way:
    Code:
    BACKGROUND: url('../../RM-ui/images/severity_GRAY.png') #ff99cc; WIDTH: 1586px
    You must put the color code first then the url...
    try not to use Capital LETTERS too... is not good
    Code:
    background: #ff99cc url('../../RM-ui/images/severity_GRAY.png');width: 1586px
    Also if you use an image on the background it will replace the background color if its bigger than the container you are applying it.
    if this way is not working try using the full css code that would be in this case:
    Code:
    background-color: #ff99cc;background-image:url('../../RM-ui/images/severity_GRAY.png');width:1586px;
    edit:
    Also check the Image you are using i see its an PNG if its a 32Bits PNG file with transparency that doesn't work on IE6... you must use a normal image 8Bit or 16Bit. You can try to change the image to a GIF, is better for IE6 compatibility. (This if you use a transparency in the image)
    Last edited by syscobra; 4 May 2009 at 7:21 AM. Reason: forgot to say...
    Javier Rincón aka SysCobra

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •