Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Mixing HTML Button and Sencha Touch

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
      0  

    Default 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
    100
      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
      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
    100
      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
      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
      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
      -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
      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
      0  

    Default

    dataview listener

  11. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
      0  

    Default

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

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •