1. #1
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100
    Vote Rating
    5
    Answers
    1
    epiphanydigital is on a distinguished road

      0  

    Default Unanswered: How to attach event listener to panel html link?

    Unanswered: How to attach event listener to panel html link?


    I have a standard link in the "html":"content area" of a standard panel and would like to prevent the default behavior for clicking, and adding my own behavior such as an Ext.Msg.alert() or other.

    I would like to do this unobtrusively of course, so please no answers like the following:

    Code:
    <a href="#" javascript="Ext.Msg.alert('hello');">My Link</a>
    twitter.com/epiphanydigital #sencha #drupal #jquery #craftbeer #guitar #photography

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    Answers
    148
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi.
    You can achieve that using event delegation.
    Take a look at the example that follow:

    Code:
    Ext.setup({
        onReady: function() {
            
    		var handleLink = function(){
    			alert('TAP');
    		};
    
    
            var form = new Ext.Panel({
                fullscreen: true,
    			html: '<a href="#">My Link</a>',
                dockedItems: [{
                    xtype: 'toolbar',
                    title: 'Example'
                }],
                listeners: {
    				body: {
    					tap: handleLink,
    					delegate: 'a'
    				}
    			}
            });
        }
        
    });
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    7
    Vote Rating
    0
    yann Offredi is on a distinguished road

      0  

    Default


    Hi,

    Well, after detected the event from HTML. How open an other panel (child) with a slide effect ?

    For exemple, We have this in the main .js

    Ext.setup({ onReady: function() { var handleLink = function(){ /* Something here to open a caroussel or panel with slide effect. And this carousseil/panel could be defined in another js or/and generated on the fly by a sql Query*/ }; var form = new Ext.Panel({ fullscreen: true, html: '<a href="#">My Link</a>', dockedItems: [{ xtype: 'toolbar', title: 'Example' }], listeners: { body: { tap: handleLink, delegate: 'a' } } }); } });
    Regards

  4. #4
    Sencha User Sameer Khan's Avatar
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    113
    Vote Rating
    0
    Answers
    2
    Sameer Khan is on a distinguished road

      0  

    Default It will work 100%

    It will work 100%


    {
    xtype:'component',
    html:'<a href="----">Content</a>',
    listeners: {click: {element: 'el',fn: function(){main.setActiveItem(panel object );}}}
    },
    Sameer Khan

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    7
    Vote Rating
    0
    yann Offredi is on a distinguished road

      0  

    Default


    Thanks, I think is that. But If I take the example in post #2. your "main" is like "form" ?

    And, if I add in your example some properties to 'href'
    Example :
    html : '<a href='foo.html' id='5'>Click on me </a>'.

    How get the content of 'href' and 'id' in function (function(){main.setActiveItem( new Ext.caroussel ( {html:'foo.html',pageActive : 5},'slide') ))

    regards

  6. #6
    Sencha User Sameer Khan's Avatar
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    113
    Vote Rating
    0
    Answers
    2
    Sameer Khan is on a distinguished road

      0  

    Default


    So, You maintain one global variable...but with my code control goes to other panel only...so to transfer your data from current panel to next activated panel ,maintain one gloabal variable... I think my idea is write or wrong ?
    Sameer Khan