1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    16
    Vote Rating
    0
    CedDcode is on a distinguished road

      0  

    Default unmask when the background of a container is loaded.

    unmask when the background of a container is loaded.


    Hello
    sorry for my bad english.
    I desing an application with Sencha touch .
    Into my application , I have a container wich contains a big image as background.
    I would like to mask the viewport and unmask when the background is completly loaded but I dont understand how to do that.
    Thank you.

    Cédric

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    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

      0  

    Default


    You would need to load the image outside and then you can get a load event. Once it's loaded then you can set the background image to the image.
    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.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default How exactly?

    How exactly?


    Could you clarify a little bit? Would you load using Ext.Img first, then assign as a background image after?

    I am trying to do the same thing...

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    16
    Vote Rating
    0
    CedDcode is on a distinguished road

      0  

    Default


    No , in fact I would like to load a picture as background of a container. The picture is big and takes some time so I would like to mask de viewport while the picture is loading and unmask it when de image is loaded.

    Regards

    Cédric.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Me too...

    Me too...


    Hi yes I am trying to do the same thing....I meant can Mitchell clarify a little bit.

    When he says 'You would need to load the image outside and then you can get a load event. Once it's loaded then you can set the background image to the image.'

    What does he mean by 'load the image outside' does he mean load it perhaps at init before anything else has loaded? I am not sure how to do this.

    :-)

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    407
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    use Ext.img's load event which is fired when image is actually finished loading (check the docs)
    use a listener to catch this event and only then add the image to the viewport.

    Sencha guys, I think such a behavior (loading an image in the background and displaying a loading animation until it is loaded) is so common it could have been a part of the framework without waiting for extensions.

    also, you can take a look at mitchel's image loader https://github.com/mitchellsimoens/Ux.ImageLoader for ideas.its from 8 months ago so not written for 2.1 but worth the look.

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Thanks

    Thanks


    Great thanks, after reading your post I did some more searching for Ext.Img in Google and found this which explains it really well:

    http://senchaexamples.com/2012/02/29...encha-touch-2/

    Next I need to work out how to adapt this, as at the moment I am loading a background image into a panel vis CSS (baseCls I think?)....currently my graphic just loads on tabpanel click but I wonder if I can load this image then assign it as a background image somehow...

    I haven't had time yet to add it to my project, but if you get it working Cedric please post some hints here!


    :-)

  8. #8
    Sencha User
    Join Date
    Aug 2012
    Posts
    16
    Vote Rating
    0
    CedDcode is on a distinguished road

      0  

    Default


    Thanks for your answers , it works.
    Regards,

    Cédric

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    409
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default How are you adding it after?

    How are you adding it after?


    Hi Cedric,

    How are you adding the image after the load? Are you setting a panel as a background image? I'd be curious how you are doing it as at the moment I am setting a BaseCls.

    Are you setting the config (.e.g BaseCls) after load to set the background?

    Thanks

  10. #10
    Sencha User
    Join Date
    Aug 2012
    Posts
    16
    Vote Rating
    0
    CedDcode is on a distinguished road

      0  

    Default


    Yes , I have loaded the image into a Ext.img and when the event "loaded" is fire , I use "addCls" to apply a css class on my container ( the css class put the image previously loaded as background on my container)

    Cédric