Using Both onItemDiscolsure and Itemtap events in the same List.

[MarwanT]

Hello all,

I am trying to make my list respond to onItemDiscolsure event and Itemtap at the same time , each event is handled differently.

Yet i only see the onItemTap that works.

This is my View's Code :

  Ext.define('myapp.view.listview', {    requires: [ 'myapp.model.listmodel'],
    extend: 'Ext.List',
    alias:'widget.listview',  
    id : 'listview',
    fullscreen: true,  
    config: {
            
        iconCls: 'list',


        title : 'List',
        onItemDisclosure : true,
                
        store:'ListView',  
        itemTpl:'{title}'   
       




    }
});

This is my Controller Code :

Ext.define('myapp.controller.Main', {    extend: 'Ext.app.Controller',
    views : ['listview'],
    config : {


        refs:{
          
            list:'#listview'


        },
        control :{


           
            listview:{
                itemtap:'display',
                onItemDisclosure : 'disclosure'
            }






        }
    },


    display:function(){
       alert('tap')
    },
   


    
    disclosure:function (){
        alert('disclosure');
    },

Any Idea how can i get both to work?

[isiphil]

We have implemented a similar situation in our application. Don't know if it is the most elegant or correct way in every situation, but it is working. Also, I don't know if it is applicable to your situation since we basically have two images in our list. We wanted a different icon for the "info button" and this allowed us to do it and act on it separately from the itemtap. Basically, we act on the itemtap event on the list and in that function add logic to determine if it is our info button. If it is, we display a different panel.
Here are some code snippets. If this is not what you are looking for then hopefully someone will have another solution.

In our controller we get a handle on the itemtap and put logic in the function to determine what to do based on the class we have defined for our info image in the itemTpl of the list.

        
this.control({            
               'graphList[selectorId=graphGraphList]': {
                itemtap: this.onGraphListItemTap                
            }
});


    onGraphListItemTap: function(list, index, target, record, evt, eOpts) {                
                    
        if(this.isInfoButton(evt))
        {                   
            //add disclosure logic here        
            return;
        }


        //add itemtap logic here  
    },   
    
    isInfoButton : function(evt)
    {
        return evt.target.className === 'info-image';
    },

Here is the itemTpl snippet from our Ext.dataview.List

        itemTpl : [
                   '<img width="92%" height="auto" src="{serviceURL}"/>',
                   '<img style="padding-bottom:20px;padding-right:0px" height="47px" width="47px" src="lib/touch/resources/themes/images/default/pictos/info.png" class="info-image">',
                  ]