[Users] Layer node with comboBox, TreeNodeComponent

[SWEYKAM at telefonica.net]

Hi list members,

It took me quite a while to figure out how to add an additional comboBox to a tree layer node, so I thought I may share this with you.

Objective: to add an Ext.form.ComboBox to a layer node which allows the user to change a map variable (on other words: create lots of species distribution maps).

Plugin:  TreeNodeComponent

First step:  create your own layer node UI class 
var uiClass  = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin()); 
(This is the same node UI class as you can see in the ‘extra radio button – example’, an extention to the standard node type which provides only a checkbox OR a radio button) 

Second step: add the plugin and the uiProvider to the treePanel configuration:
treePanel = new Ext.tree.TreePanel({             
    root: treeRootNode,    
    loader: new Ext.tree.TreeLoader({
        applyLoader: false,
        uiProviders: {
                'layernodeui': uiClass
        }
    }),
    plugins: new GeoExt.plugins.TreeNodeComponent({
        listeners: { 
//optional: a ‘select’ listener function for the comboBox if the comboBox itself doesn’t do it already
        }
    }),
    rootVisible: false
});

The API example says ‘GeoExt.plugins.TreeNodeRadioButton’ – which I guess is a typo and should say ‘TreeNodeComponent’.


Last step: add the component to the layer node 
(This is a container which is then appended to the tree root. Corresponds to gx_layercontainer if you wish to add it directly to your treePanel configuration)

var container_spec = new GeoExt.tree.LayerContainer({      
    layerStore: …,
    loader:{
        baseAttrs: { 
            checked: false,
            listeners: … function for to enable/disable combo on checkchange.. 
            uiProvider: 'layernodeui',
            component: {
                    xtype: "box",
                    el: 'comboSPECinput'
                    }                        
        },
        filter:…        
    }
});

I haven’t found many references to the xtype (textarea also works, but box is probably the most generic). The el (element) is the div that you want to place here.

I found the an example with opacity-sliders in Eric Lemoines sandbox. The code is based on an earlier version, but it gave me the necessary inspiration:
http://dev.geoext.org/sandbox/elemoine/playground/geoext/examples/tree-tools.html
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20101230/660bfedf/attachment.htm