Wie füge ich Felder in das existierende Panel ein?

Question

Ich habe ein Baummenü und eine Leiste mit dem Namen und der Beschreibung des Menüpunktes. Ich möchte dem Benutzer ermöglichen, eindeutige Namen und Beschreibungen für einige Menüelemente zu erstellen. Aber ich bin ein Neuling in extjs :(

Helfen Sie mir, bitte

// ExtJS 3.4 

Ext.onReady(function(){ 

    var store = {'lang' : { 
      'C#' : { 
       'title' : 'C#', 
       'desc' : 'love C#' }, 
      'C++' : { 
       'title' : 'C++', 
       'desc' : 'love C++' }, 
      'Java' : { 
       'title' : 'Java', 
       'desc' : 'love Java' } 
      } 
     }; 

    var menustore = { 
     text:"Languages", 
     expanded: true, 
     children: [{ 
     text: "C#", 
     leaf: true 
     },{ 
     text: "C++", 
     leaf: true 
     },{ 
     text: "Java", 
     leaf: true 
     },{ 
     text: "PHP", 
     leaf: true 
     }] 
    } 

    var treemenu = new Ext.tree.TreePanel({ 
     title: 'Languages', 
     root: menustore, 
     width: 170, 
     rootVisible: false, 
     region: 'west', 
     id: 'tree-panel', 
     listeners: { 

     'render': function(tp){ 
      tp.getSelectionModel().on('selectionchange', function(tree, node){ 

       var stage = 0 

       for (var key in store.lang) { 
        if (key == node.text) { 

         var lang = store.lang[key]; 

         titlePanel.update(lang.title); 
         descPanel.update(lang.desc); 
         stage = 1; 
        } 
       } 

       if (stage == 0) { 
        // How to add fields into titlePanel and descPanel? 
        console.log('no data'); 
       } 

      }); 
     }  
    } 
    }); 

    var titlePanel = new Ext.Panel({ 
     title: 'Name', 
     region: 'north', 
     padding: 10 
    }); 

    var descPanel = new Ext.Panel({ 
     title: 'Description', 
     region: 'center', 
     padding: 10 
    }); 

    var field = new Ext.form.Field({ 
     fieldLabel: 'example' 
    }); 

    var centerPanel = new Ext.Panel({ 
     region: 'center', 
     padding:10, 
     items : [titlePanel, descPanel] 
    }); 

    new Ext.Panel({ 
     layout : 'border', 
     width: 400, 
     height: 180, 
     padding:10, 
     items : [treemenu, centerPanel], 
     renderTo: Ext.getBody() 
    }); 
}); 

Answer 1

1. Sie Ids auf Ihre Komponenten setzen soll.

   var titlePanel = new Ext.Panel({ 
       id: 'titlePanel', 
   }); 
   
   var descPanel = new Ext.Panel({ 
       id: 'descPanel', 
   }); 
   

2. Und es durch diese erhalten Id, wo Sie brauchen:

   var tP = Ext.getCmp('titlePanel'); 
   

3. Sie dann Ihre neue Komponente Panel hinzufügen und das Layout aktualisiert, wie unten dargestellt:

   tP.add(new Ext.form.TextField({ 
       fieldLabel: 'example' 
   })) 
   tP.doLayout(); 
   

4. und wiederholen Sie diesen an der zweiten Platte:

   var dP = Ext.getCmp('descPanel'); 
   
   dP.add(new Ext.form.TextField({ 
       fieldLabel: 'example' 
   })) 
   dP.doLayout();