I
I
IvanRobot2016-09-21 14:37:36
ExtJS/Sencha
IvanRobot, 2016-09-21 14:37:36

How to add fields to an existing panel?

I have a tree menu and a panel with the name and description of the menu item. I want to enable users to create unique names and descriptions for some menu items. But I'm new to extjs :(
Help please.

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()
    });
});

codepen.io/IvanBot/pen/kkLAya

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question