Results 1 to 10 of 14

Thread: Clickable background

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
      0  

    Default 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
      0  

    Default 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,093
    Answers
    25
    Vote Rating
    56
      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?
    Lead Trainer / Sencha Specialist
    Community And Learning Systems

    Lead Architect
    DigitalTickets.net

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Vote Rating
    0
      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 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
      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
      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.

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
  •