How to grab an html element built in xtemplate backed by dataview component

[shin0135]

Hi,

I have a DataView component which has a XTemplate like

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div>',
                    '<table width="100%" cellspacing="0" cellpadding="0">',
                        '<tr>
                            '<td style="width: 33%">',
                               '<b>{[values.Description]}</b>',
                            '</td>',
                            '<td style="width: 34%; vertical-align:top; text-align: center;">',
                               '<b>{[values.Item]}</b>',
                            '</td>',
                            '<td style="width: 33%; text-align: right;vertical-align: top;">',
                                '[<a href="#" id="edit_{[values.Key]}_link" style="font-weight: bold;">Edit</a>]',
                                '&nbsp;&nbsp;',
                                '[<a href="#" id="delete_{[values.Key]}_link" style="font-weight: bold;">Delete</a>]',
                            '</td>',
                        '</tr>',
                      '</table>','</div>');

and Store and DataView

        var dataStore = new Ext.data.Store({
            autoDestroy: true
            ,proxy: new Ext.data.HttpProxy({
                url: '../getData.asp?data=myTestData'
                ,method: "GET"
            })
            ,reader: new Ext.data.JsonReader({
                idProperty: 'Key'
                   ,root: 'MyTestData.Body.List'
                   ,totalProperty: 'MyTestData.Body.Total'
            }, [
                {name: 'Description'}
                ,{name: 'Item'}                
                ,{name: Key}
            ])
            ,remoteSort:true

        this.itemsDataView = new Ext.DataView({
            store: dataStore
            ,tpl: tpl
                         ....});

All above code is a part of extended Ext.Panel object

MyTestPanel = Ext.extend(Ext.Panel,{....});

What I would like to do is to grab an 'Edit' and 'Delete' htm element using Ext.get() when MyTestPanel.view() method is called. Here is my view looks like

,view: function(keys) {
        
        this.keys= keys;
        
        var xml = ''
        
        this.keys.each(function(key, i){
           xml += '<key>' + key+ '</key>' ;
        });
        
        this.itemsDataView.store.load({
            params: {
                'xml': xml
            }
            //,scope: this
           //,callback: this.addActionLink()});

        alert('after loading');
        this.keys.each(function(key, i){
            
            var k = key;
            
            var editLink = Ext.get('edit_' + k+ '_link');            
            editLink.removeAllListeners();
            editLink.addListener('click', function(e){
                 alert('Edit is clicked');
                 });
                 
            var deleteLink = Ext.get('delete_' + k+ '_link');
            deleteLink.removeAllListeners();
            deleteLink.addListener('click', function(e){
                 alert('Delete is clicked');});              
                    
        });

As you can see, when the view method is called, I'm reloading store and start adding a click event listener for each link so that when it's clicked an edit or delete message is displayed.

I could see the above code works fine if I keep alert('after loading'), but when I remove it, it fails grabbing links via Ext.get. I assumed it's because store load is a asynchronous process. So, what I did next is move alert('after loading') and this.keys.each(function(key, i){}); as a callback of store.load as you see on the code commented out above, but it still didn't work. When I look at the screen, I see there is no page xtemplate drawn when the alert is displayed. Here is my addActionLink() callback:

    ,addActionLink: function() {
        alert('after loading');
        this.keys.each(function(key, i){
            
            var k= key;
            
            var editLink = Ext.get('edit_' + k+ '_link');            
            editLink.removeAllListeners();
            editLink.addListener('click', function(e){
                 alert('Edit is clicked');
                 });
                 
            var deleteLink = Ext.get('delete_' + k+ '_link');
            deleteLink.removeAllListeners();
            deleteLink.addListener('click', function(e){
                 alert('Delete is clicked');
                 });                
                
        }, this);              
    }

What I need is XTemplate html is painted on the screen before my callback is invoked. Can anyone tell me what I'm missing here and how I could resolve this issue. I even tried adding listeners to DataView events like 'beforerender', 'render', 'show', etc.

FYI: I'm using ExtJS 3.2 currently.

I'll appreciate any of your comments!

Thanks,

[mitchellsimoens]

Why not just listen to the click event on the dataview and check if it's over an anchor tag

listeners : {
    click : function(dataview, index, node, e) {
        if (e.getTarget('a')) {
            //<a> clicked on
        }
    }
}

To differentiate between edit and delete, I'd add a class to both <a> elements and change the a in e.getTarget to have like a.edit if you added edit as a class.

[shin0135]

Great Idea! I've not tried this yet, but definitely a viable option I think. I'll let you know how this is working. Thanks for the great idea!