Results 1 to 4 of 4

Thread: Event Delegation on Listitem receiving the record

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    597
    Answers
    35

    Default Event Delegation on Listitem receiving the record

    Hi there,

    is it possible to do event delegation on a list and forward the record of the list-item?

    So far I have the following code

    Code:
        {
            xtype: 'list',
            itemTpl: new Ext.XTemplate(
                '<div class="options-item">',
                    '<div class="html-btn">',              //  <<--- here
                        '<div class="title text">{optionName}</div>',
                    '</div>',
                '</div>',
            ),
            listeners: [
                {
                    event: 'tap',
                    fn: function(event, html){
                       console.log('show something with the record');
                    },
                    element: 'innerElement',
                    delegate: '.html-btn'
                }
             ]
         }
    I am using tap, as itemtap does not work on the innerElement or the element.
    Inside the function I receive 4 arguments, but none would be the record of the item from where I delegate.

    Any idea?

    My current workaround is to add an itemtap listener to the controller and set an interim var, so that I can grab that var from inside the tap event. But that's probably not the best way to go.
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    When you use an element listener, you will always just have the arguments for the event and target. The arguments from the itemtap are found programmatically. The itemtap event is a component event that Touch fires, element listeners are only the native events like tap and touchstart.

    You would need to get the row node (using e.up('...')) and then get the index of that node unless you are using infinite list.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    597
    Answers
    35

    Default

    Can you help me with e.up('').

    I know element.up() if element is a sencha element. But in this case the delegate function will return the event and the html snippet.

    None of them seems to have a sencha element, which in turn allows the up() method.

    If it is possible to simply use e.target.up('.'listitem') that would be perfect.

    Can you elaborate your comment a bit more?
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    597
    Answers
    35

    Default

    I still cannot figure out how and where to use the element.up('').
    The closest I am getting to is to ...

    * go up the dom structure
    * find the x-list-item class (which is the simplelistitem)
    * grab the id
    * from the list (which is the scope) query the id to get the listitem component
    * grab the record from the query result

    Code:
    {
        event: 'tap',
        fn: function(event, element){
            // scope is list
            console.log('start searching for tapped record');
            var childElement = element,
                hasFound = false,
                listItemDomId = null,
                record = null;
    
            while (!hasFound){
                var parentElement = childElement.parentElement;
                if (parentElement.className.indexOf('x-list-item') > -1){
                    hasFound = true;
                    listItemDomId = parentElement.id;
                } else {
                    childElement = childElement.parentElement;
                }
            }
    
    
            record = this.down('simplelistitem[id=' + listItemDomId + ']').getRecord().getData();
            console.dir(record);
        },
        element: 'innerElement',
        delegate: '.me-to-tap-event'
    },
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

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
  •