1 | /** |
---|
2 | * Copyright (c) 2008-2010 The Open Source Geospatial Foundation |
---|
3 | * |
---|
4 | * Published under the BSD license. |
---|
5 | * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text |
---|
6 | * of the license. |
---|
7 | */ |
---|
8 | |
---|
9 | /** api: example[toolbar] |
---|
10 | * Toolbar with Actions |
---|
11 | * -------------------- |
---|
12 | * Create a toolbar with GeoExt Actions. |
---|
13 | */ |
---|
14 | |
---|
15 | Ext.onReady(function() { |
---|
16 | Ext.QuickTips.init(); |
---|
17 | |
---|
18 | var map = new OpenLayers.Map(); |
---|
19 | var wms = new OpenLayers.Layer.WMS( |
---|
20 | "Global Imagery", |
---|
21 | "http://maps.opengeo.org/geowebcache/service/wms", |
---|
22 | {layers: "bluemarble"} |
---|
23 | ); |
---|
24 | var vector = new OpenLayers.Layer.Vector("vector"); |
---|
25 | map.addLayers([wms, vector]); |
---|
26 | |
---|
27 | var ctrl, toolbarItems = [], action, actions = {}; |
---|
28 | |
---|
29 | // ZoomToMaxExtent control, a "button" control |
---|
30 | action = new GeoExt.Action({ |
---|
31 | control: new OpenLayers.Control.ZoomToMaxExtent(), |
---|
32 | map: map, |
---|
33 | text: "max extent", |
---|
34 | tooltip: "zoom to max extent" |
---|
35 | }); |
---|
36 | actions["max_extent"] = action; |
---|
37 | toolbarItems.push(action); |
---|
38 | toolbarItems.push("-"); |
---|
39 | |
---|
40 | // Navigation control and DrawFeature controls |
---|
41 | // in the same toggle group |
---|
42 | action = new GeoExt.Action({ |
---|
43 | text: "nav", |
---|
44 | control: new OpenLayers.Control.Navigation(), |
---|
45 | map: map, |
---|
46 | // button options |
---|
47 | toggleGroup: "draw", |
---|
48 | allowDepress: false, |
---|
49 | pressed: true, |
---|
50 | tooltip: "navigate", |
---|
51 | // check item options |
---|
52 | group: "draw", |
---|
53 | checked: true |
---|
54 | }); |
---|
55 | actions["nav"] = action; |
---|
56 | toolbarItems.push(action); |
---|
57 | |
---|
58 | action = new GeoExt.Action({ |
---|
59 | text: "draw poly", |
---|
60 | control: new OpenLayers.Control.DrawFeature( |
---|
61 | vector, OpenLayers.Handler.Polygon |
---|
62 | ), |
---|
63 | map: map, |
---|
64 | // button options |
---|
65 | toggleGroup: "draw", |
---|
66 | allowDepress: false, |
---|
67 | tooltip: "draw polygon", |
---|
68 | // check item options |
---|
69 | group: "draw" |
---|
70 | }); |
---|
71 | actions["draw_poly"] = action; |
---|
72 | toolbarItems.push(action); |
---|
73 | |
---|
74 | action = new GeoExt.Action({ |
---|
75 | text: "draw line", |
---|
76 | control: new OpenLayers.Control.DrawFeature( |
---|
77 | vector, OpenLayers.Handler.Path |
---|
78 | ), |
---|
79 | map: map, |
---|
80 | // button options |
---|
81 | toggleGroup: "draw", |
---|
82 | allowDepress: false, |
---|
83 | tooltip: "draw line", |
---|
84 | // check item options |
---|
85 | group: "draw" |
---|
86 | }); |
---|
87 | actions["draw_line"] = action; |
---|
88 | toolbarItems.push(action); |
---|
89 | toolbarItems.push("-"); |
---|
90 | |
---|
91 | // SelectFeature control, a "toggle" control |
---|
92 | action = new GeoExt.Action({ |
---|
93 | text: "select", |
---|
94 | control: new OpenLayers.Control.SelectFeature(vector, { |
---|
95 | type: OpenLayers.Control.TYPE_TOGGLE, |
---|
96 | hover: true |
---|
97 | }), |
---|
98 | map: map, |
---|
99 | // button options |
---|
100 | enableToggle: true, |
---|
101 | tooltip: "select feature" |
---|
102 | }); |
---|
103 | actions["select"] = action; |
---|
104 | toolbarItems.push(action); |
---|
105 | toolbarItems.push("-"); |
---|
106 | |
---|
107 | // Navigation history - two "button" controls |
---|
108 | ctrl = new OpenLayers.Control.NavigationHistory(); |
---|
109 | map.addControl(ctrl); |
---|
110 | |
---|
111 | action = new GeoExt.Action({ |
---|
112 | text: "previous", |
---|
113 | control: ctrl.previous, |
---|
114 | disabled: true, |
---|
115 | tooltip: "previous in history" |
---|
116 | }); |
---|
117 | actions["previous"] = action; |
---|
118 | toolbarItems.push(action); |
---|
119 | |
---|
120 | action = new GeoExt.Action({ |
---|
121 | text: "next", |
---|
122 | control: ctrl.next, |
---|
123 | disabled: true, |
---|
124 | tooltip: "next in history" |
---|
125 | }); |
---|
126 | actions["next"] = action; |
---|
127 | toolbarItems.push(action); |
---|
128 | toolbarItems.push("->"); |
---|
129 | |
---|
130 | // Reuse the GeoExt.Action objects created above |
---|
131 | // as menu items |
---|
132 | toolbarItems.push({ |
---|
133 | text: "menu", |
---|
134 | menu: new Ext.menu.Menu({ |
---|
135 | items: [ |
---|
136 | // ZoomToMaxExtent |
---|
137 | actions["max_extent"], |
---|
138 | // Nav |
---|
139 | new Ext.menu.CheckItem(actions["nav"]), |
---|
140 | // Draw poly |
---|
141 | new Ext.menu.CheckItem(actions["draw_poly"]), |
---|
142 | // Draw line |
---|
143 | new Ext.menu.CheckItem(actions["draw_line"]), |
---|
144 | // Select control |
---|
145 | new Ext.menu.CheckItem(actions["select"]), |
---|
146 | // Navigation history control |
---|
147 | actions["previous"], |
---|
148 | actions["next"] |
---|
149 | ] |
---|
150 | }) |
---|
151 | }); |
---|
152 | |
---|
153 | var mapPanel = new GeoExt.MapPanel({ |
---|
154 | renderTo: "mappanel", |
---|
155 | height: 400, |
---|
156 | width: 600, |
---|
157 | map: map, |
---|
158 | center: new OpenLayers.LonLat(5, 45), |
---|
159 | zoom: 4, |
---|
160 | tbar: toolbarItems |
---|
161 | }); |
---|
162 | }); |
---|