1. #1
    Sencha User Dumas's Avatar
    Join Date
    Dec 2008
    Location
    Vienna, Austria
    Posts
    564
    Vote Rating
    8
    Dumas is on a distinguished road

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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
    564
    Vote Rating
    8
    Dumas is on a distinguished road

      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,483
    Vote Rating
    35
    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
    564
    Vote Rating
    8
    Dumas is on a distinguished road

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,483
    Vote Rating
    35
    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,483
    Vote Rating
    35
    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
    564
    Vote Rating
    8
    Dumas is on a distinguished road

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar