Max Zueff Max Zueff - 2 months ago 16
Javascript Question

How to add fields into existing panel?

I have a tree menu and bar with the name and description of the menu item. I want to allow the user to make unique names and descriptions for some menu items. But I'm a newbie in extjs :(

Help me, please.

// 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. You should set Ids to your components:

    var titlePanel = new Ext.Panel({
         id: 'titlePanel',
    });
    
    var descPanel = new Ext.Panel({
        id: 'descPanel',
    });
    
  2. And get it by this Id where you need:

    var tP = Ext.getCmp('titlePanel');
    
  3. Then add your new component to panel and update the layout as shown below :

    tP.add(new Ext.form.TextField({
         fieldLabel: 'example'
    }))
    tP.doLayout();
    
  4. And repeat this to the second panel:

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