1

I have following codes, but i want to add severel parent>child>chill>child>child (4 level inside) nodes with all check box options (for user choice) in the tree panel, in fact sum of all these (parent + child) will be of around 800 entry (like tree panel of http://map.rostmuseum.ru/) again i want to load childs to be loaded as a part of the grand parent of all subsequent parent and childs (i think i will do it by including cql parameter included url from my geoserevr , is not it will be the best way) as overlay.

    var mapPanel;
    Ext.onReady(function() {
    // create a map panel with some layers that we will show in our layer tree
    // below.
    mapPanel = new GeoExt.MapPanel({
    border: true,
    region: "center",
    // we do not want all overlays, to try the OverlayLayerContainer
    map: new OpenLayers.Map({allOverlays: false}),
    center: [90.04142, 23.77647],
    zoom: 7,
    layers: [
    new OpenLayers.Layer.WMS("Bangladesh",
    "http://localhost:8080/geoserver/cite/wms", {
    layers: "thana"
    }, {
    buffer: 0,
    visibility: false
    }
    ),
    /* new OpenLayers.Layer.WMS("Tasmania State Boundaries",
    "http://demo.opengeo.org/geoserver/wms", {
    layers: "topp:tasmania_state_boundaries"
    }, {
    buffer: 0
    }
    ),*/
    /* new OpenLayers.Layer.WMS("Water",
    "http://demo.opengeo.org/geoserver/wms", {
    layers: "topp:tasmania_water_bodies",
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer: false,
    buffer: 0
    }
    ),*/
    new OpenLayers.Layer.WMS("Rivers",
    "http://localhost:8080/geoserver/cite/wms", {
    layers: "cite:river",
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer:true,
    buffer: 0
    }
    ),
    new OpenLayers.Layer.WMS("Roads",
    "http://localhost:8080/geoserver/cite/wms", {
    layers: "cite:roadnetwork",
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer: false,
    buffer: 0
    }
    ),
    // create a group layer (with several layers in the "layers" param)
    // to show how the LayerParamLoader works
    new OpenLayers.Layer.WMS("Bangladesh (Boundaries)",
    "http://localhost:8080/geoserver/it.geosolutions/wms", {
    layers: [
    "internationalboundary",
    "divisionalboundary",
    "districtbounday",
    "thanaboundary"
    ],
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer: false,
    buffer: 0,
    // exclude this layer from layer container nodes
    displayInLayerSwitcher: false,
    visibility: false
    }
    )
    ]
    });

    // create our own layer node UI class, using the RadioButtonMixin
    var LayerNodeUI = Ext.extend(
    GeoExt.tree.LayerNodeUI, new GeoExt.tree.RadioButtonMixin()
    );

    // using OpenLayers.Format.JSON to create a nice formatted string of the
    // configuration for editing it in the UI
    var treeConfig = new OpenLayers.Format.JSON().write([{
    nodeType: "gx_baselayercontainer"
    }, {
    nodeType: "gx_overlaylayercontainer",
    expanded: true,
    // render the nodes inside this container with a radio button,
    // and assign them the group "foo".
    loader: {
    baseAttrs: {
    radioGroup: "foo",
    uiProvider: "use_radio"
    }
    }
    }, {
    nodeType: "gx_layer",
    layer: "Bangladesh (Boundaries)",
    isLeaf: false,
    // create subnodes for the layers in the LAYERS param. If we assign
    // a loader to a LayerNode and do not provide a loader class, a
    // LayerParamLoader will be assumed.
    loader: {
    param: "LAYERS"
    }
    }], true);

    // create the tree with the configuration from above
    var tree = new Ext.tree.TreePanel({
    border: true,
    region: "west",
    title: "Layers",
    width: 200,
    split: true,
    collapsible: true,
    collapseMode: "mini",
    autoScroll: true,
    loader: new Ext.tree.TreeLoader({
    // applyLoader has to be set to false to not interfer with loaders
    // of nodes further down the tree hierarchy
    applyLoader: false,
    uiProviders: {
    "use_radio": LayerNodeUI
    }
    }),
    root: {
    nodeType: "async",
    // the children property of an Ext.tree.AsyncTreeNode is used to
    // provide an initial set of layer nodes. We use the treeConfig
    // from above, that we created with OpenLayers.Format.JSON.write.


    //work 
    children: Ext.decode(treeConfig)


    },
    listeners: {
    "radiochange": function(node){
    alert(node.layer.name + " is now the the active layer.");
    }
    },
    rootVisible: false,
    lines: false,
    bbar: [{
    text: "Show/Edit Tree Config",
    handler: function() {
    treeConfigWin.show();
    Ext.getCmp("treeconfig").setValue(treeConfig);
    }
    }]
    });

    // dialog for editing the tree configuration
    var treeConfigWin = new Ext.Window({
    layout: "fit",
    hideBorders: true,
    closeAction: "hide",
    width: 300,
    height: 400,
    title: "Tree Configuration",
    items: [{
    xtype: "form",
    layout: "fit",
    items: [{
    id: "treeconfig",
    xtype: "textarea"
    }],
    buttons: [{
    text: "Save",
    handler: function() {
    var value = Ext.getCmp("treeconfig").getValue()
    try {
    var root = tree.getRootNode();
    root.attributes.children = Ext.decode(value);
    tree.getLoader().load(root);
    } catch(e) {
    alert("Invalid JSON");
    return;
    }
    treeConfig = value;
    treeConfigWin.hide();
    }
    }, {
    text: "Cancel",
    handler: function() {
    treeConfigWin.hide();
    }
    }]
    }]
    });

    new Ext.Viewport({
    layout: "fit",
    hideBorders: true,
    items: {
    layout: "border",
    deferredRender: false,
    items: [mapPanel, tree, {
    contentEl: "desc",
    region: "east",
    bodyStyle: {"padding": "5px"},
    collapsible: true,
    collapseMode: "mini",
    split: true,
    width: 200,
    title: "Catalog"
    }]
    }
    });
    });

Can you guide me?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.