Results 1 to 9 of 9

Thread: How to create links in templates?

  1. #1
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589
    Vote Rating
    10
      0  

    Default How to create links in templates?

    Hi!

    I want to have an template with an link in it. But how can I do that with the right scoping?
    I would have something like to have an template like: '{name} <a onclick="this.remove({id})">deleteMe</a>'

    thx
    Dumas

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    123
      0  

    Default

    I would strongly advise AGAINST using onclick to handle events.

    Is this a template for a DataView or a ListView? In that case you should be using the 'click' event and check if the event target was the <a> element.

  3. #3
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589
    Vote Rating
    10
      0  

    Default

    Ah, ok.

    I have a panel where I apply the tmp to the body: myTpl.overwrite(panel.body,record.data);
    But the Panel doesn't has an event link 'click' or 'bodyclick'. Do I have to listen for on the whole panel.getEl() or is there an better way?


    thx
    Dumas

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    54
      0  

    Default

    Listen on the Panel's body, but use the addListener's delegate option to receive events only from the elements you are interested in.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  5. #5
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589
    Vote Rating
    10
      0  

    Default

    So is this code right:
    Code:
    tplMarkup =  '{name} <a href="#" record_id="{id}">deleteMe</a>';
    // ...
    // when the body is cretae add an listener for delete clicks
    panel.on('afterrender',function() {
        panel.body.on('click', function(event, htmlEl, config) {
            // store is defined in the outer scope above
            var recordId = Number(htmlEl.getAttribute('record_id')),
                  record = store.getById(recordId);
            store.remove(record);
            // set the panels text to empty text
            panel.body.dom.innerHTML = 'Please select a record from  above...';
        }, this, {
            delegate: 'a'
        });
    });
    thx
    Roland

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    123
      0  

    Default

    Yes, although I would store the id somewhere in the Panel and not in the <a> tag (you are creating invalid XHTML).

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    54
      0  

    Default

    OK, if that is going to be the only <a> there. You don't need to add any other narrowing identifiers like class.

    Not sure about the invalid DOM attribute "record_id" though.

    How about using a generated ID?

    Code:
    tplMarkup =  '{name} <a href="#" id="x-item-link-{id}">deleteMe</a>';
    // ...
    // when the body is cretae add an listener for delete clicks
    panel.on('afterrender',function() {
        panel.body.on('click', function(event, htmlEl, config) {
            // store is defined in the outer scope above
            var recordId = htmlEl.id.substr(12),
                  record = store.getById(recordId);
            store.remove(record);
            // set the panels text to empty text
            panel.body.dom.innerHTML = 'Please select a record from  above...';
        }, this, {
            delegate: 'a'
        });
    });
    Where "x-item-link-" could be made more descriptive as to what it "links" to.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    54
      0  

    Default

    Or you could put into in the # fragment of the href
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  9. #9
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    589
    Vote Rating
    10
      0  

    Default

    thanks guys!

    I will hold a reference to the record in the panel, seems like the cleanest way to me.

    regards,
    Roland

Similar Threads

  1. How do I create a a simple list of links?
    By kohalza in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 9 Aug 2012, 2:12 AM
  2. Replies: 0
    Last Post: 15 Jul 2009, 12:46 AM
  3. howto create a tabpanel with links dynamically
    By Mario Minati in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Jul 2008, 7:42 AM
  4. How to create menu items like the "Quick Links" above?
    By pnfsjp in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 25 Sep 2007, 8:18 PM

Posting Permissions

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