Results 1 to 4 of 4

Thread: Is there a way to set the background color of a spacer?

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
      0  

    Default Is there a way to set the background color of a spacer?

    I'm using a spacer between horizontal panels in a container. I would like to change the color of the spacer to make it more subtle. Here's my code. I tried using the style property and setting the background-color, but that didn't work.

    Thanks,

    Bruce

    BTW, I was amazed when this worked as expected. I had only used the spacer for buttons before.

    Code:
    Ext.define('MyApp.view.Main', {
    	extend: 'Ext.Container',
    	requires: [],
    
    
    	config: {
    		layout: 'hbox',
    		items: [
    	        {
    	        	xtype: 'panel1view',
    	        	flex: 1,
    	        },
    	        {
    	        	xtype: 'spacer',
    	        	width: 3,
    	        },
    	        {
    	        	xtype: 'panel2view',
    	        	flex: 1,
    	        }
    		]
    	}
    });

  2. #2
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      0  

    Default

    Style works fine for me:

    Code:
    var container = Ext.create('Ext.Container', {
        layout: 'hbox',
        fullscreen: true,
        items: [
            {
                html: 'panel1view',
                flex: 1,
            },
            {
                xtype: 'spacer',
                style: 'background-color:red',
                width: 3,
            },
            {
                html: 'panel2view',
                flex: 1,
            }
        ]
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
      0  

    Default Breaks when style is listed after width

    I tried it and it didn't work until I moved style before width. Then it worked as expected.

    If style is listed after width, the spacer disappears for some reason.

    This works:

    {
    xtype: 'spacer',
    style: 'background-color:red',
    width: 3,
    },

    This doesn't:

    {
    xtype: 'spacer',
    width: 3,
    style: 'background-color:red',
    },

  4. #4
    Touch Premium Member
    Join Date
    Jan 2011
    Posts
    13
    Vote Rating
    0
      0  

    Default

    Does this still work for anyone? It seems to have broken for me around Beta 3...

Posting Permissions

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