Results 1 to 6 of 6

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100
    Answers
    1
    Vote Rating
    5
      0  

    Default 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
    Location
    Italy
    Posts
    1,395
    Answers
    148
    Vote Rating
    24
      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
      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
    115
    Answers
    2
    Vote Rating
    0
      0  

    Default 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
      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
    115
    Answers
    2
    Vote Rating
    0
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •