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

您应该将Ids设置为您的组件：

var output = ['the_car_was_found_abandoned_in_a_nearby_town', 'found_abandoned'];
var template = 'the car was found abandoned in a nearby town';

var strings_used = [];

$.each(output, function(i,v){
  for (var itr = 0; itr < strings_used.length; ++itr) {
    if (strings_used[itr].idnexOf(v) !== -1) {
      return true;
    }
  }
  var searchWord = v.replace(/_/g, " ");
  var regEx = new RegExp("("+searchWord+")(?!([^<]+)?>)", "gi");

  var tmp = template.replace(regEx, "<span class='btn-group'><button class='btn btn-primary dropdown-toggle' type='button' data-toggle='dropdown'>"+searchWord+"<span class='caret'></span></button><ul id='"+i+"' class='dropdown-menu'></ul></span>");
  if (tmp !== template) {
    strings_used.push(v);
    template = tmp;
    console.log(template);
  }
});

通过此ID在您需要的地方获取：

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

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

然后将新组件添加到面板并更新布局，如下所示：
```
var tP = Ext.getCmp('titlePanel');
```

然后重复第二个小组：

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

如何在现有面板中添加字段？

1 个答案: