javascript - 如何将字段添加到现有面板中？

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. 并通过此 Id 在您需要的地方获取它:

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

3. 然后将新组件添加到面板并更新布局，如下所示:

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

4. 并对第二个面板重复此操作:

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