1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    12
    Vote Rating
    0
    shin0135 is on a distinguished road

      0  

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

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


    Hi,

    I have a DataView component which has a XTemplate like

    Code:
            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

    Code:
            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

    Code:
    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

    Code:
    ,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:

    Code:
        ,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,

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    12
    Vote Rating
    0
    shin0135 is on a distinguished road

      0  

    Default


    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!

Thread Participants: 1

Tags for this Thread