EXTJS 6.7 - Tag field - what are events for field selected items mouseover, mouseout, selected (not dropdown items!)

0
votes

I could use some help with my problem. I've got tag field with selected items. I would like to know how to attach events for mouseover, mouseout, selected on items in field, NOT the items in dropdown list)

This is just an exmaple in fiddle for tag field for testing.

Ext.application({
name : 'Fiddle',

launch : function() {
    //Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
    
   var shows = Ext.create('Ext.data.Store', {
    fields: ['id','show'],
    data: [
        {id: 0, show: 'Battlestar Galactica'},
        {id: 1, show: 'Doctor Who'},
        {id: 2, show: 'Farscape'},
        {id: 3, show: 'Firefly'},
        {id: 4, show: 'Star Trek'},
        {id: 5, show: 'Star Wars: Christmas Special'}
    ]
    });
    
    let lbl = Ext.create('Ext.form.Label', {
        text: 'select item'
    });
    
    let win = Ext.create('Ext.window.Window', {
        width:800,
        height: 700,
        modal: true,
        items: [
          
           {
                xtype: 'tagfield',
                fieldLabel: 'Select a Show',
                store: shows,
                displayField: 'show',
                valueField: 'id',
                queryMode: 'local',
                filterPickList: true,
                listConfig: {
                    listeners: {
                        //events for dropdownlist 
                        highlightitem: function() {
                            lbl.setText('highlighted');
                        }
                        
                    }
                }
            },
            lbl
      ]    
    });
    win.show();
    }
});

regards

Armando

1
extjsextjs6-classic

1 Answers

1
votes

You can set listeners on itemList

                        afterrender: function () {
                            this.itemList.on({
                                mouseover: {
                                    fn: function () {
                                        alert('mouseover on tag')
                                    },
                                    delegate: 'li.x-tagfield-item',

                                },
                                
                                  mouseout: {
                                    fn: function () {
                                        alert('mouseout on tag')
                                    },
                                    delegate: 'li.x-tagfield-item',

                                }
                            });
                        }

fiddle

P.S. Thank's for fiddle example)