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

      0  

    Default Unanswered: Clickable background

    Unanswered: Clickable background


    Hi there,

    I have an app with a login screen, built as follows: a background image and an floating black area, with Facebook login butttons etc. The background should be clickable, but the problem is that I've tried many many ways to achieve this, but nothing worked so far. I hope you guys can give me some tips.

    I've tried the following:
    - a panel with an item that contains a button and an item that contains the black floating area. The problem I have with this sollution is that I can't get the button fullscreen and the floating area won't float.
    - a container with one item: the floating black area (with centered: true), like so:/
    Code:
     var login = new Ext.Container({    
       xtype: 'container',
        id: 'logincontainer',
        html: '<p><a href="www.google.nl"><img class="backgroundimage" src=' + defaultBg.filename + '></a></p>',
        items: [{
              xtype: 'panel',
             id: 'centerpanel',
                cls: 'wowpanel',
                html: 'Login',
                centered: true
        }]
    });
    This way the black area doensn't float over the background either.

    Does somebody have any idea how to achieve this?

    Cheers.
    - Sammy

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default EDIT

    EDIT


    What I also tried, was a panel with a non-link and non-button background image, with one item: the black floating area. This did float, but I couldn't get a listener for a click or tab on the background image.

    Code:
    var login = new Ext.Container({    xtype: 'container',
        id: 'logincontainer',
        //html: '<p><a href="www.google.nl"><img class="backgroundimage" src=' + defaultBg.filename + '></a></p>',
        style: 'background: red;',
        items: [{
      	    xtype: 'panel',
                centered: true,
                html: 'Login',
        }],	
        listeners : {
             show: function() {
                 this.on('tap', function(e, t) {
                });
            }
        }
    });
    Since the centerpanel is a part of the whole login panel, a listener on a click on the login panel would also 'listen' to clicks in the centerpanel, but I don't want that. I want to "filter" the clicks on the background, from the clicks on the centerpanel.

  3. #3
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Answers
    24
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    not sure I understand fully what you're after, however:

    if you used a dataview, you could listen to the 'containertap' event for background taps, and item tap for items, then roll your own template for items inside.

    also could you provide a screenshot of what you've done/you're after?
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

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

      0  

    Default


    You're right, I'm sorry.
    The way I see it now, I have two options:
    - One is a panel with a background-image, and one item: the black floating area. How do I separate a click in the background, from a click in the black floating area. Since the floating area is an item of the panel, I don't know if this is possible. See code below.

    Code:
    /* Main panel. */var login = new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        id: 'background01',
        style: 'background: red;',
        items: [{
            cls: 'wowpanel',
                    html: 'Login'
        }],
        listeners : {
        }
    });
    - Or I can give the panel two items (see code below): one item with a background that's clickable, and one item with the floating black login area. But how do I add click/tab listeners to these items? I can't seem to get that working.

    Code:
    /* Main panel. */
    var login = new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        id: 'background01',
        items: [{
            id: 'foreground01',
            style: 'background: red;'
        }, {
            cls: 'wowpanel',
                    html: 'Login'
        }],
        listeners : {
        }
    });
    Also, I took a look at your Dataview suggestion, but that doesn't seem te be what I want. Am I correct that it's not that easy to create items with a CSS styling and include (clicable) images with a Dataview?
    Attached Images
    Last edited by SammyO; 8 Oct 2012 at 12:22 AM. Reason: Answer to Dataview suggestion

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Code:
    {
        cls:'wowpanel',
        html:'login',
        listeners: {
            initialize: function(clickableComponent){
                clickableComponent.element.on('tap',function(){
                    console.info('tap event');
                })
            }
        }
    }
    I write English by translator.

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default


    Thanks for your answer. However, I don't want a listener on the wowpanel, but on the background. The wowpanel contains links etc., so clicks are handled correctly there. I want to fire an action when the background is clicked.

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default


    Sorry, that was a stupid answer from me. Ofcourse I can add your listener to the 'foreground01' as well. That's what I tried, but I got the error:
    • [COLOR=red !important]Uncaught Attempting to create a component with an xtype that has not been registered: [object Object] sencha-touch.js:6[/COLOR]
    • [COLOR=red !important]Uncaught Trying to add a null item as a child of Container with itemId/id: ext-comp-1282 [/COLOR]

  8. #8
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Then move the 'listeners' to your background.
    I write English by translator.

  9. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
    SammyO is on a distinguished road

      0  

    Default


    What do you mean by moving the listener to the background? Like so?
    Code:
    var login = new Ext.Panel({	fullscreen: true,
    	layout: 'fit',
    	id: 'background01',
    	style: 'background: red;',
    	items: [{
    		id: 'foreground01',
    		style: 'background: red;'
    	}, {
        		cls:'wowpanel',
    		html:'login'
    	}],
    	listeners: {
    		initialize: function(clickableComponent){
    	    	            clickableComponent.element.on('tap',function(){
                			    console.info('tap event');
                			})
    		        }
        		}
    	}
    });
    Then I have the problem I began this thread with: how can I separate the clicks on the background from the clicks in the wowpanel? They are both part of the whole panel, so the tap event will be fired for clicks on both things, right?

  10. #10
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Two demos for you.
    http://www.senchafiddle.com/#Cvn14

    http://www.senchafiddle.com/#3bPBk

    Sorry,first one is console print.
    I write English by translator.

Thread Participants: 2

Tags for this Thread