既存のパネルにフィールドを追加するにはどうすればいいですか？

Question

私はメニュー項目の名前と説明を持つツリーメニューとバーを持っています。私は、ユーザーがいくつかのメニュー項目に対して一意の名前と説明を作れるようにしたい。しかし、私は、

ヘルプ私:(ExtJSので初心者してくださいよ

// 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. あなたのコンポーネントにIDを設定する必要があり

   ：。

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

2. そして、これによってそれを得ますあなたが必要とする所在地：

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

3. は、その後、パネルに新しいコンポーネントを追加し、以下に示すように、レイアウトを更新します。

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

4. と第2パネルにこれを繰り返します。

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