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
    36,754
    Vote Rating
    827
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."