Clickable background

[SammyO]

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:/

 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

[SammyO]

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.

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.

[dawesi]

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?

[SammyO]

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.

/* 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.

/* 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?

[haduki]

{
    cls:'wowpanel',
    html:'login',
    listeners: {
        initialize: function(clickableComponent){
            clickableComponent.element.on('tap',function(){
                console.info('tap event');
            })
        }
    }
}

[SammyO]

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.

[SammyO]

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]

[haduki]

Then move the 'listeners' to your background.

[SammyO]

What do you mean by moving the listener to the background? Like so?

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?

[haduki]

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

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

Sorry,first one is console print.