Results 1 to 5 of 5

Thread: How to: Toolbar on top of another component?

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
      0  

    Default Unanswered: How to: Toolbar on top of another component?

    I have a main Panel class that contains a toolbar docked at bottom and a carousel above it. What I need to do is have the toolbar on top of of the carousel . So the carousel takes up 100% width and height and the toolbar is docked at bottom and is 100% width and on top of the carousel.

    Code:
    Ext.define('oracea.view.Main', {
    	extend: 'Ext.Panel',
    	config: {
    		itemId: 'main',
    		layout: 'fit',
    		items: [{
    			xtype: 'toolbar',
                            id: 'thetoolbar',
    			docked: 'bottom',
                            height: '104px',
                            width:  '2048px',
                            cls:'etl_nav_bkgrd'
                            
    		},
    		    theOnlyCarousel=Ext.create('oracea.view.Carousel')
    		]
    	},
             initialize: function(){  //add all the buttons dynamically - based on store config
                
                var main_panel = this;
                ...
                ...

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      0  

    Default

    You can use a child container inside a parent container with a vbox layout. The child container can have the bottom docked toolbar and then the carousel can be added to the parent container.

    I don't know if this is good practice, can you explain why you have it docked to the bottom but want it on the top? Do you have other components on the screen that force you to take this approach? I would say just dock the toolbar to the 'top' but I don't know the full story

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
      0  

    Default

    The reason I need to do this, and maybe this will help with a solution, is because the toolbar needs to be somewhat transparent so the carousel items which are images themselves show through the toolbar. What would be the best way to do this?

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      0  

    Default

    You can apply a transparency to the toolbar using CSS. Google it

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
      0  

    Default

    Yeah thx, thats what I'm trying to do now , I was able to set transparency for the toolbar but there is still a grey background (hbox?) left that I haven't been able to set a transparency for....I posted another question here dealing with that: http://www.sencha.com/forum/showthre...654#post860654

Tags for this Thread

Posting Permissions

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