EXTjs getEl() échoue avant de montrer l'élément

Question

Bonne journée à tous.

En EXTjs, probablement version 4.x, j'ai un menu avec quelques niveaux de sous-menus Je voudrais ajouter un attribut de données à certains de ces sous-menus et en fait je peux le faire avec pas de problèmes avec: Ext.getCmp ("notificationMenu"). getEl(). set ({"data-notifynumber": 4});

Pour tout autre élément du menu, je dois d'abord cliquer sur le menu pour afficher tout. le sous-menu et seulement à ce moment je peux utiliser la fonction getEl(), sinon cette erreur est affichée: Uncaught TypeError: Impossible de lire la propriété 'set' de undefined

Je comprends que je devrais .. . show? render? bien, "faire quelque chose" à ces sous-éléments afin de les avoir dans le dom correctement ... Je joins une partie du code:

cela fait partie du menu que je crée:

xtype: 'button', 
      id:"notificationMenu", 
      hidden: false,    
      reference: 'userType', 
      style: 'color: #ffffff;width:58px;height:58px;', 
      glyph: 0xf0f3, 
      menu:{ 
       border:0, 
       menuAlign: 'tr-br?', 
       bodyStyle: { 
        background: '#3e4752', 
       }, 
       items:[ 
       { 
        text:"TASKS", 
        disabled:true 
       }, 
       { 
        text:"Campaigns", 
        data_id:"me_campaigns", 
        glyph:0xf0c1, 
        id:"notification_me_campaigns_root", 
        hidden:true, 
        menu:{ 
         border:0, 
         menuAlign: 'tr-br?', 
         bodyStyle: { 
          background: '#3e4752', 
         }, 
         items:[ 
         { 
         text:"Approval",... 

dans cet exemple, si je fais après Render:

Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 10}) 

mais si j'utilise

Ext.getCmp("notification_me_campaigns_root").getEl().set({"data-notifynumber": 4}) 

l'erreur ci-dessus apparaît. S'il vous plaît avez-vous des conseils? puis-je appeler un "rendu de force" en quelque sorte?

Answer 1

Try to use afterrender to get dom element.

ExtJs getEl() l'élément Récupère haut niveau représentant ce composant, mais lorsque le travail dom est préparé sans dom création, elle renvoie null.

J'ai créé une démo de Sencha Fiddle qui vous aidera à atteindre votre exigence/solution.

var panel = new Ext.panel.Panel({ 
      renderTo: document.body, 
      title: 'A Panel', 
      width: 200, 
      tools: [{ 
       xtype: 'button', 
       text: 'Foo', 
       menu: { 
        defaults: { 
         handler: function() { 
          Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber')) 
         } 
        }, 
        items: [{ 
         text: 'Item 1' 
        }, { 
         text: 'Item 2', 
         menu: { 
          listeners: { 
           afterrender: function() { 
            this.getEl().set({ 
             "data-notifynumber": 20//only for example you can put as basis of your requirement 
            }); 
           } 
          }, 
          defaults: { 
           handler: function() { 
            Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber')) 
           } 
          }, 
          items: [{ 
           text: 'Sub Item 1', 

          }, { 
           text: 'Sub Item 2' 
          }] 
         } 
        }], 
        listeners: { 
         afterrender: function() { 
          this.getEl().set({ 
           "data-notifynumber": 10//only for example you can put as basis of your requirement 
          }); 
         } 
        } 
       } 
      }] 
     });