GeoExt.action to Ext.Button or Ext.Menu item

If you won to create toggle OpenLayers control with ext button, I recommend you to use GeoExt js lib. it allows you to toggle OpenLayers control with ext button and much more,
see the examples(http://geoext.org/examples.html). For this example I used GeoExt 1.1, OpenLayers 2.9 and Ext 3.2. :]

Here is a example where GeoExt.Action control is put in Ext.Button:
var exampleBtn = new Ext.Button(
                    new GeoExt.Action({
                    control: new OpenLayers.Control.DrawFeature(
                                    vectorLayer,
                                    OpenLayers.Handler.Polygon
                                ),
                    map: OLmap,
                    text:'Draw Polygon'
                    allowDepress: true,
                    enableToggle : true,
                    toggleGroup: "toolGroup-draw",
                    })
                );
You can also create button with menu:

        var actions = {};
        actions.m_line = new GeoExt.Action({
            text: 'mesure line',
            control : new OpenLayers.Control.Measure(
                            OpenLayers.Handler.Path,
                            {persist: true}
                     ),
            map: OLmap,
            group: "measure"
        });
     
        actions.m_poly = new GeoExt.Action({
            text: 'mesure Polygon',
            control : new OpenLayers.Control.Measure(
                            OpenLayers.Handler.Polygon,
                            {persist: true}
                     ),
            map: OLmap,
            group: "measure"
        });

        new Ext.Button({
            split: false,
            enableToggle: true,
            iconCls: 'mesure',
            allowDepress: false,
            pressed: false,
            tooltip: App.i18n('app.map.tbar.measure'),
            toggleGroup: "toolGroup" + this.id,
            menu: {
                items: [
                    new Ext.menu.CheckItem(actions.m_line),
                    new Ext.menu.CheckItem(actions.m_poly)
                ]
            },
            listeners: {
                toggle: function (btn, pressed) {
                    if (!pressed) {
                        var key;
                        for (key in actions) {
                            if (key) {
                                var control = actions[key].control;
                                if (control.active) {
                                    control.deactivate();
                                }
                            }
                         }
                    }
                },
                scope: this
            }
        });

Comments

  1. I am trying to create a FeatureInfo Tool on my application but nothing happens. I have tried placing breakpoints on my Firebug but still there is no output.

    This is the link, http://128.196.142.12/geo/test/test_new.html

    As you can see, I have created another tool BioClim Data (top - right corner), which works fine but the Feature Info tool does not return the desired output.

    Any clue where I am going wrong? Here is the code for the tool, http://dpaste.de/iOwSD/. I have tried to replicate the code in the recipe, http://128.196.142.12:8080/recipes/#basic/info

    ReplyDelete

Post a Comment

Popular Posts