1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
    shri_iitk is on a distinguished road

      0  

    Default Answered: How to get 'overlay' effect without using 'overlay' config in titlebar?

    Answered: How to get 'overlay' effect without using 'overlay' config in titlebar?


    I want image title to be shown over the image and for that I used a docked titlebar on top of image and made it transparent using CSS. My problem is {overlay : true} because of which I am getting these warnings:

    [DEPRECATE][Ext.Panel#doAdd] 'overlay' config is deprecated on docked items, please set the top/left/right/bottom configurations instead.

    I tried playing with top/left/right configs but still not able to get effect similar to overlay, can someone tell me how to do the same without using overlay?
    I am using Sencha Touch 2.1

    Here is code for panel:

    Code:
        {
            xtype: 'panel',
            layout: 'vbox',
            items : [{
                    xtype : 'toolbar',
                    title : titleStr,
                    docked : 'top',
                    overlay : true,
                    cls : 'x-toolbar-transparent-top'
            },{
                    xtype: 'image',
                    layout: 'fit',
                    flex : 1,
                    rec : data,
                    src : data.imageURL,
                    width : Ext.Viewport.getWindowWidth()*3/4,
            }
            }]
        }

  2. Docked items won't use the top/left/etc. You can undock it and use top/left and width to see if that works for you.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Docked items won't use the top/left/etc. You can undock it and use top/left and width to see if that works for you.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
    shri_iitk is on a distinguished road

      0  

    Default


    Thanks Man!
    I did not know that docked items doesn't use top/left positioning
    It seems to be working fine
    Code:
                                   {
            				xtype : 'toolbar',
            				title : titleStr,
            				//docked : 'top',	// Docked removed because absolute positioning doesn't work with it and overlay is deprecated
            				top : 0,
            				left : 0,
            				width : Ext.Viewport.getWindowWidth()*3/4,
            				//overlay : true,
            				cls : 'x-toolbar-transparent-top'
            			}

Thread Participants: 1

Tags for this Thread