1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default Answered: Mixing HTML Button and Sencha Touch

    Answered: Mixing HTML Button and Sencha Touch


    I have a DataView with an HTML template which includes an HTML button. When I click this button, I want to push a new page onto my NavigationView. I don't know how to do this; the code below works when I use a Sencha Touch button, but gives an "Uncaught TypeError: Object #<HTMLButtonElement> has no method 'up'" in Chrome Console when I click the HTML version.

    DataView to display HTML button:
    Code:
    Ext.define('MyApp.view.MyDataView', {
        extend: 'Ext.dataview.DataView',
    
        config: {
            itemTpl: [
                '<div>Some text</div>',
                '<button onclick="someJSFunction(this)">info</button><br />',
                '<div>More text here</div>'
            ]
        }
    
    });
    JS Resource for function call:
    Code:
    function someJSFunction(button) {
        Ext.Msg.alert('click');
        
        var venuePage = Ext.create('MyApp.view.Page_Venue', {
            title: 'Test'
        });
    
        button.up('navigationview').push(venuePage);
    }
    Handler for Sencha Button (this works):
    Code:
    xtype: 'button',
    handler: function(button, event) {
         var venuePage = Ext.create('MyApp.view.Page_Venue', {
            title: 'Venues'
        });
    
        button.up('navigationview').push(venuePage);
    }

  2. Quote Originally Posted by emprize View Post
    try something like this
    Code:
    listeners:{
    element : 'element',
    tap:function(e){
    var el = e.getTarget('button.mybutton');
    if(el){
    myaction();
    }
    }
    }
    You can make that even better:

    Code:
    listeners : {
        element  : 'element',
        delegate : 'button.mybutton',
        tap      : function() {
            //...
        }
    }
    The delegate event config can take a DOM selector and will then only fire the tap event when the tap happened on an element matching that selector

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Check this out. I think this is what you're looking for.
    http://docs.sencha.com/touch/2-0/#!/...view-section-4

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    Thanks jerome, that seems like it might be what I'm looing for but I'm having a bit of trouble understanding the documentation. If I use that method to make a button, where will I put the rest of the HTML (e.g. <div>Some text</div>)?

    It seems like calling a JS function would be much simpler, I just don't know which parameters to pass in.

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Yeah.. You just cant pass in a html button like that. My other suggestion is to look into this thread/post: http://www.sencha.com/forum/showthread.php?146821-button-in-itemTpl-impossible-to-handle&p=647779&viewfull=1#post647779

    Note that it may be outdated, but it could give you more ideas.

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    In the same thread, edspencer says that buttons in itemTpl are "baked into Sencha 2... anything and everything" http://www.sencha.com/forum/showthread.php?146821-button-in-itemTpl-impossible-to-handle&p=648406&viewfull=1#post648406

    He didn't provide any links to documentation, but it sounds like I shouldn't have to go to all this effort. If only I could find what he's referring to!

  7. #6
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    I am still having this issue, has anyone done this before with Sencha Touch 2?

  8. #7
    Sencha User
    Join Date
    May 2012
    Posts
    37
    Vote Rating
    1
    emprize is on a distinguished road

      -1  

    Default


    try something like this
    Code:
    listeners:{
    element : 'element',
    tap:function(e){
    var el = e.getTarget('button.mybutton');
    if(el){
    myaction();
    }
    }
    }

  9. #8
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    Thanks emprize. I think I understand the code, but where would I put it?

  10. #9
    Sencha User
    Join Date
    May 2012
    Posts
    37
    Vote Rating
    1
    emprize is on a distinguished road

      0  

    Default


    dataview listener

  11. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    Oh, of course. It wasn't listed there in Architect but I'll have to add it myself. Thanks again.

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..." hd porno faketaxi