2017-08-21 1 views
0

Pour une raison quelconque, l'événement de flou ne se déclenche pas lorsque le panneau flottant ci-dessous perd le focus. Cependant, lorsque j'écoute le 'el' du panneau pour l'événement de flou, il est enregistré comme indiqué dans la configuration de l'écouteur. Ce que je veux faire est de cacher le panneau quand l'événement de flou se produit. Comment puis-je avoir accès au panneau parent?Comment accéder au composant parent ExtJS?

Ext.define('NoteKeeper.view.tabs.AttachmentPanel',{ 
    extend : 'Ext.panel.Panel', 
    alias : 'widget.attachmentPanel', 
    itemId : 'attachmentPanel', 
    floating : true, 
    focusable : true, 
    width : 200, 
    height : 150, 
    layout : { 
     type : 'vbox' 
    }, 
    items : [ 
     { 
      xtype : 'grid', 
      store : null, 
      columns : [ 
       { 
        text : 'File Name', 
        dataIndex : 'fileName' 
       }, 
       { 
        dataIndex : 'remove' 
       } 
      ] 
     }, 
     { 
      xtype : 'button', 
      text : '+' 
     } 
    ], 
    listeners : { 
     el: { 
      blur: { 
       fn: function() 
       { 
        console.log(this); 
        //how do I access the 'attachmentPanel' from here 
        //so I can hide it ? 
       } 
      } 
     } 
    }, 
    noteId : null, 
    initComponent : function() 
    { 
     this.callParent(arguments); 
    } 
}); 

S'il vous plaît noter qu'il peut y avoir plusieurs instances de ces années » de attachmentPanel.

+0

Utilisez le 'focusleave' événement sur le composant: https://fiddle.sencha.com/#view/editor&fiddle/25d2 –

+0

@EvanTrimboli Malheureusement, ci-dessus ne fonctionne pas. Lorsque je clique sur le signe + et quelque part dans le panneau flottant, l'événement de flou est toujours déclenché. Apparemment, la mise au point est attachée au bouton à l'intérieur du panneau, et non le panneau lui-même. Attacher le flou à l'el fonctionne mieux mais en cliquant sur le bouton, l'el perd son focus. Connaissez-vous un moyen de contourner cela? – Pepria

Répondre

0

Ce qui suit semble bien fonctionner:

listeners : { 
     el: { 
      blur: { 
       fn: function() 
       { 
        console.log(this); 
        var elId = this.id; 
        var attachmentPanels = Ext.ComponentQuery.query('#attachmentPanel'); 
        Ext.Array.forEach(attachmentPanels, function(cmp){ 
         if(cmp.id == elId) 
         { 
          cmp.hide(); 
          return false; 
         } 
        }); 
       } 
      } 
     } 

S'il vous plaît laissez-moi savoir s'il y a une meilleure/solution plus efficace. Merci!

+1

vous pouvez utiliser la mise au point congé et obtenir le composant que vous voulez [cliquez] (https://fiddle.sencha.com/#view/editor&fiddle/25d7) –

0

Il est une référence de l'élément à la composante posséder, sous forme de la propriété component, donc du champ d'application de l'élément, vous pouvez accéder au panneau comme ceci:

var attachmentPanel = this.component;