1. #1
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    576
    Vote Rating
    9
    Dumas will become famous soon enough

      0  

    Default How to create links in templates?

    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
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    576
    Vote Rating
    9
    Dumas will become famous soon enough

      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
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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.

  5. #5
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    576
    Vote Rating
    9
    Dumas will become famous soon enough

      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
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Or you could put into in the # fragment of the href

  9. #9
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    576
    Vote Rating
    9
    Dumas will become famous soon enough

      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

Thread Participants: 2