[Users] Keeping Selected Layers When Replacing Child Nodes

IT Intern itintern12 at gmail.com
Thu Oct 21 22:55:20 CEST 2010


Ok this really has me stumped...I used the cascade method() and
TreePanel.getNodeById as Matt suggested, thank you very much for that by the
way.  They helped me a great deal ^.^

However, it seems cascade will only traverse leaf nodes if one of them is
checked.  If none of the leafs have been checked, cascade rudely ignores
them :(

I need some tips on how to force a cascade on leafs which have never been
switched on.  Thanks for your time and kind responses :)

Here is some code that I have wrote, I am sending the relevant snippet:

function checkHandler(item, checked) {
                    var tibetContainer, chineseContainer;

                    if(item.text == 'Tibetan'){

                        tibetContainer = new Ext.tree.TreeNode({
                            text: "Tibetan Labels",
                            expanded: true,
                            id: 'tibet'
                        });

                        tibetContainer.appendChild(new
GeoExt.tree.OverlayLayerContainer({
                            text: "Lands (Tibetan trans)",
                            layerStore: tibLands,
                            expanded: false,
                            loader: {param: "LAYERS"}
                        }));

                        tibetContainer.appendChild(new
GeoExt.tree.OverlayLayerContainer({
                            text: "Natural Selection (Tibetan trans)",
                            layerStore: tibNaturalLayers,
                            expanded: false,
                            loader: {param: "LAYERS"}
                        }));

                        tibetContainer.appendChild(new
GeoExt.tree.OverlayLayerContainer({
                            text: "Points of Interest (Tibetan trans)",
                            layerStore: tibPointOfInterest,
                            expanded: false,
                            loader: {param: "LAYERS"}
                        }));

                        if(layerRoot.lastChild.id != 'tibet'){
                            layerRoot.appendChild(tibetContainer);


if(layerRoot.getOwnerTree().getNodeById('chinese')){
                                var j = 0;
                                var selectedLayers = new Array();
                                var layersChecked = new Array();

while(layerRoot.getOwnerTree().getNodeById('chinese').hasChildNodes()){

layerRoot.getOwnerTree().getNodeById('chinese').firstChild.eachChild(function(node)
{
                                        if (node.isLeaf() &&
node.ui.isChecked()) {
                                            layersChecked[j] = node.text;
                                            node.ui.toggleCheck(false);
                                            j++;
                                        }//end if

                                        return layersChecked;
                                    });//end cascade


layerRoot.getOwnerTree().getNodeById('chinese').removeChild(layerRoot.getOwnerTree().getNodeById('chinese').firstChild);
                                }//end while

layerRoot.removeChild(layerRoot.getOwnerTree().getNodeById('chinese'));

                                selectedLayers = layersChecked;

if(layerRoot.getOwnerTree().getNodeById('tibet').hasChildNodes()){
                                    var i = 0;
                                    var children = new Array();
                                    for(var c = 0; c <
layerRoot.getOwnerTree().getNodeById('tibet').childNodes.length; c++){
                                        //children[c] =
layerRoot.getOwnerTree().getNodeById('tibet').childNodes[c].id;
                                        //alert(children[c]);
                                        children[c] =
layerRoot.getOwnerTree().getNodeById('tibet').childNodes[c].id;
                                        alert(children[c]);




layerRoot.getOwnerTree().getNodeById('tibet').childNodes[c].cascade(function(node)
{

alert(layerRoot.getOwnerTree().getNodeById('tibet').firstChild.text + " and
" + layerRoot.getOwnerTree().getNodeById('tibet').childNodes[c].text);
                                            alert(node.text);  //This is how
I know it is not traversing to the leafs :(
                                            if (node.isLeaf() &&
(node.ui.isChecked() == false)) {
                                                alert(node.text + "not
checked");
                                                if (node.text ==
selectedLayers[i]) {

node.ui.toggleCheck(true);

alert(selectedLayers[i]);
                                                    i++;
                                                }//end if
                                            }//end if

                                        });//end cascade
                                    }//end for
                                }//end if
                            }//end
if(layerRoot.getOwnerTree().getNodeById('chinese'))
                        }//end if(layerRoot.lastChild.id != 'tibet')
                    }//end if(item.text == 'Tibetan')




elshae




On Wed, Oct 20, 2010 at 2:29 PM, Matt Priour <mpriour at kestrelcomputer.com>wrote:

>  You are using some very fragile methods there.
> Rather than depending on lastChild & firstChild and the fact that they may
> or may not only contain leaf nodes, etc..., you should be using the standard
> ExtJS TreeNode walking functions.
>
> node.bubble
>
> http://dev.sencha.com/deploy/dev/docs/?class=Ext.tree.TreeNode#Ext.data.Node-bubble
>
> node.cascade
>
> http://dev.sencha.com/deploy/dev/docs/?class=Ext.tree.TreeNode#Ext.data.Node-cascade
>
> node.eachChild
>
> http://dev.sencha.com/deploy/dev/docs/?class=Ext.tree.TreeNode#Ext.data.Node-eachChild
>
> Bubble walks up the tree toward the root node, starting with the node it is
> called on
> Cascade walks down the tree (through each child branch as well) starting
> with the node it is called on
> EachChild iterates over ONLY the child nodes of the node it is called on.
> It will NOT continue any further down the child branches and will not
> include the node it is called on
>
> You should be able to use these functions to collect the information you
> need from your layer tree (node.getUI().isChecked(), etc..) and then reapply
> it to the tree formed with the different layer store.
>
> If you want to start at a certain node other than the Root Node, then
> assign that node an id and find it in the tree panel using the
> TreePanel.getNodeById function
>
> http://dev.sencha.com/deploy/dev/docs/?class=Ext.tree.TreePanel#Ext.data.Tree-getNodeById
>
> Matt Priour
> Kestrel Computer Consulting
>
>
>  *From:* IT Intern <itintern12 at gmail.com>
> *Sent:* Wednesday, October 20, 2010 12:02 PM
> *To:* users at geoext.org
> *Subject:* Re: [Users] Keeping Selected Layers When Replacing Child Nodes
>
> Ok so far I have been able to find a way to access the properties of
> nodes...now I am struggling to find out if there is anyway to access the
> properties of the node's leafs?  If anyone know please help me, I think if I
> have that I will be able to carry out the desired task :)
>
> Some code of my approach:
>
> var i;
>                             var j = 0;
>                             var selectedLayers = new Array();
>                             while(layerRoot.lastChild.hasChildNodes()){
>
> alert(layerRoot.lastChild.firstChild.childNodes.length); //This returns 0,
> but the childNodes here are leafs :(
>                                 for(i = 0; i <
> layerRoot.lastChild.firstChild.childNodes.length; i++){
>
> if(layerRoot.lastChild.firstChild.childNodes[i].isSelected()){
>                                         selectedLayers[j] =
> layerRoot.lastChild.firstChild.childNodes[i].attributes.text;
>                                         alert(selectedLayers[j]);
>                                         j++;
>                                     }
>                                 }
>
>
> layerRoot.lastChild.removeChild(layerRoot.lastChild.firstChild);
>                             }
>                             layerRoot.removeChild(layerRoot.lastChild);
>                         }
>
> Thanks for taking the time to consider my questions,
>
> elshae
>
> On Tue, Oct 19, 2010 at 4:17 PM, IT Intern <itintern12 at gmail.com> wrote:
>
>> Hello GeoExt Friends,
>>
>> So I have been using the GeoExt and Ext libraries to develop my map
>> browser and now there's a feature I'd like to have, but don't know how to go
>> about it :)
>>
>> So far everything is working.  What I have is a tree panel that when a
>> menu is clicked a parent node with layer containers is added to the tree.
>> The layers in these containers are in different languages, so as the user
>> toggles between the languages in the menu, it be nice if the layers in the
>> previous language correspond to the language that is currently selected.  I
>> hope you will understand what I am asking to do.  I guess a good starting
>> point would be, is there a way to "get" which layers are selected in a layer
>> container?  Thanks for your time, below is some relevant code:
>>
>> //So there are many layers, one each per language...
>>
>> var chn_townships = new OpenLayers.Layer.WMS(
>>                             "Townships (Chinese trans)", "
>> http://localhost:8080/geoserver/wms", {layers: 'cite:chn_townships',
>> transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true,
>> visibility: false}
>>                        );
>>
>>             var tib_townships = new OpenLayers.Layer.WMS(
>>                             "Townships (Tibetan trans)", "
>> http://localhost:8080/geoserver/wms", {layers: 'cite:tib_townships',
>> transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true,
>> visibility: true}
>>                        );
>>
>> //The layers are stored in layer stores...
>> var tibLands = new GeoExt.data.LayerStore({
>>                 map: map,
>>                 initDir: 0,
>>                 layers: [tib_villages, tib_townships, tib_farms,
>> tib_countys]
>>             });
>>
>>             var chnLands = new GeoExt.data.LayerStore({
>>                 map: map,
>>                 initDir: 0,
>>                 layers: [chn_villages, chn_townships, chn_farms,
>> chn_countys]
>>             });
>>
>> //Menu for users to select language
>> var languageMenu = new Ext.menu.Menu({
>>                 id: 'mainMenu',
>>                 style: {
>>                     overflow: 'visible'     // For the Combo popup
>>                 },
>>                 items: [
>>                     // A Field in a Menu
>>                     {
>>                         text: 'Chinese',
>>                         checked: false,
>>                         group: 'theme',
>>                         icon: './gif/cn.gif',
>>                            handler: checkHandler
>>                     },{
>>                         text: 'English',
>>                         checked: true,
>>                         group: 'theme',
>>                         handler: checkHandler
>>                     },{
>>                         text: 'Tibetan',
>>                         checked: false,
>>                         group: 'theme',
>>                         handler: checkHandler
>>                         }
>>                 ]
>>             });
>>
>> //The handler function that listens to the users selection on the menu
>> (This is where I want the magic to happen ;)
>> function checkHandler(item, checked) {
>>                     var tibetContainer, chineseContainer;
>>
>>                     if(item.text == 'Tibetan'){
>>                         if(layerRoot.lastChild.id == 'chinese'){
>>                             layerRoot.removeChild(layerRoot.lastChild);
>>
>>                         }
>>
>>                         tibetContainer = new Ext.tree.TreeNode({
>>                             text: "Tibetan Labels",
>>                             expanded: true,
>>                             id: 'tibet'
>>                         });
>>
>>                         tibetContainer.appendChild(new
>> GeoExt.tree.OverlayLayerContainer({
>>                             text: "Lands (Tibetan trans)",
>>                             layerStore: tibLands,
>>                             expanded: false,
>>                             loader: {param: "LAYERS"}
>>                         }));
>>
>>                         tibetContainer.appendChild(new
>> GeoExt.tree.OverlayLayerContainer({
>>                             text: "Natural Selection (Tibetan trans)",
>>                             layerStore: tibNaturalLayers,
>>                             expanded: false,
>>                             loader: {param: "LAYERS"}
>>                         }));
>>
>>                         tibetContainer.appendChild(new
>> GeoExt.tree.OverlayLayerContainer({
>>                             text: "Points of Interest (Tibetan trans)",
>>                             layerStore: tibPointOfInterest,
>>                             expanded: false,
>>                             loader: {param: "LAYERS"}
>>                         }));
>>
>>                         layerRoot.appendChild(tibetContainer);
>>
>>                     }
>>                     else if(item.text == 'Chinese'){
>>
>>                         chineseContainer = new Ext.tree.TreeNode({
>>                             text: "Chinese Labels",
>>                             expanded: true,
>>                             id: 'chinese'
>>                         });
>>
>>                         chineseContainer.appendChild(new
>> GeoExt.tree.OverlayLayerContainer({
>>                             text: "Lands (Chinese trans)",
>>                             layerStore: chnLands,
>>                             expanded: false,
>>                             loader: {param: "LAYERS"}
>>                         }));
>>
>>                         chineseContainer.appendChild(new
>> GeoExt.tree.OverlayLayerContainer({
>>                             text: "Natural Selection (Chinese trans)",
>>                             layerStore: chnNaturalLayers,
>>                             expanded: false,
>>                             loader: {param: "LAYERS"}
>>                         }));
>>
>>                         chineseContainer.appendChild(new
>> GeoExt.tree.OverlayLayerContainer({
>>                             text: "Points of Interest (Chinese trans)",
>>                             layerStore: chnPointOfInterest,
>>                             expanded: false,
>>                             loader: {param: "LAYERS"}
>>                         }));
>>
>>                         if(layerRoot.lastChild.id == 'tibet'){
>>
>> //layerRoot.removeChild(layerRoot.lastChild);
>>                             layerRoot.replaceChild(chineseContainer,
>> layerRoot.lastChild)  //thought this might have done it, this just replaces
>> the nodes but not the layers selected to the new ones :(
>>                         }else
>>                         {layerRoot.appendChild(chineseContainer);}
>>
>>                     }
>>
>
>  ------------------------------
>
> _______________________________________________
> Users mailing list
> Users at geoext.org
> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20101021/040b4ed3/attachment-0001.htm 


More information about the Users mailing list