Add Single Click Action To A Node In A TreePanel

Details
Written by: Stanko Milosev
Category: ExtJS
Hits: 4909
    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        hideHeaders: true,
        rootVisible: false,
        viewConfig: {
            plugins: [{
                ptype: 'treeviewdragdrop'
            }]
        },
        height: 450,
        width: 400,
        title: 'InLabel server and databases',
        renderTo: 'tree-example',
        collapsible: true,
	listeners:{
		itemclick: function(view, record, item, index, event) {
			if (record.isLeaf()) {
				Ext.fly("yourdivid").update(record.data.text);
			} else {
				Ext.Ajax.request({
				    url: 'components/com_dcstree/detailed_info.php',
					method: 'GET',
				    params: {
					id: record.data.id
				    },
				    success: function(response){
					var text = response.responseText;
					Ext.fly("yourdivid").update(text);
					// process server response here
				    }
				});
			}
			//Ext.get("yourdivid").originalDisplay = "aaa";
			//dumpProps(view);
		}
	}
    });

So, most important thing is "listeners", and with record.isLeaf() I am checking if user clicked on node, or on leaf. Second part, Ext.Ajax.request,... is example of ExtJS Ajax, in this case I am loading detailed_info.php.