|
1
|
# [](http://geoext.github.io/geoext2/) [GeoExt 2](http://geoext.github.io/geoext2/)
|
|
2
|
|
|
3
|
JavaScript Toolkit for Rich Web Mapping Applications.
|
|
4
|
|
|
5
|
[](https://travis-ci.org/geoext/geoext2)
|
|
6
|
|
|
7
|
|
|
8
|
## What is GeoExt?
|
|
9
|
|
|
10
|
GeoExt is Open Source and enables building desktop-like GIS applications through
|
|
11
|
the web. It is a JavaScript framework that combines the GIS functionality of
|
|
12
|
[OpenLayers](http://openlayers.org) with the user interface savvy of the
|
|
13
|
[ExtJS](http://www.sencha.com/products/extjs/) library provided by
|
|
14
|
[Sencha](http://www.sencha.com/).
|
|
15
|
|
|
16
|
Version 2 of GeoExt is the successor to the
|
|
17
|
[GeoExt 1.x-series](http://geoext.org) and is built atop the newest official
|
|
18
|
installments of its base libraries; OpenLayers 2.13.1 and ExtJS 4.2.1.
|
|
19
|
|
|
20
|
|
|
21
|
## More information on GeoExt 2
|
|
22
|
|
|
23
|
Have a look at the official homepage: http://geoext.github.io/geoext2/
|
|
24
|
|
|
25
|
You will find examples, API documentation (with and without inherited
|
|
26
|
functionality from ExtJS), links to mailinglists and more over there.
|
|
27
|
|
|
28
|
What you see on http://geoext.github.io/geoext2/ are the contents of the
|
|
29
|
`gh-pages`-branch. If you encounter anything that should be fixed, please issue
|
|
30
|
a pull request against that branch and we will merge it as soon as possible.
|
|
31
|
|
|
32
|
|
|
33
|
## Ok, I want to use GeoExt now...
|
|
34
|
|
|
35
|
Hey that's a good decision, and it is very easy to get started on a page that
|
|
36
|
already includes ExtJS and OpenLayers:
|
|
37
|
|
|
38
|
```html
|
|
39
|
<!DOCTYPE html>
|
|
40
|
<html>
|
|
41
|
<head>
|
|
42
|
<title>Trying out GeoExt2</title>
|
|
43
|
<!-- Load the ExtJS stylesheet -->
|
|
44
|
<link rel="stylesheet" type="text/css"
|
|
45
|
href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">
|
|
46
|
<!-- Load ExtJS from their CDN, local versions work also -->
|
|
47
|
<script type="text/javascript"
|
|
48
|
src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-debug.js"></script>
|
|
49
|
<!-- Load OpenLayers, custom builds may even be better -->
|
|
50
|
<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
|
|
51
|
<script type="text/javascript" src="../loader.js"></script>
|
|
52
|
</head>
|
|
53
|
<body></body>
|
|
54
|
</html>
|
|
55
|
```
|
|
56
|
|
|
57
|
Next, we simply add a `<script>`-tag in which we tell ExtJS about GeoExt (and
|
|
58
|
also where to find the ExtJS source files):
|
|
59
|
|
|
60
|
```html
|
|
61
|
<script type="text/javascript">
|
|
62
|
Ext.Loader.setConfig({
|
|
63
|
enabled: true,
|
|
64
|
disableCaching: false,
|
|
65
|
paths: {
|
|
66
|
GeoExt: "path/to/src/GeoExt",
|
|
67
|
Ext: "http://cdn.sencha.com/ext/gpl/4.2.1/src"
|
|
68
|
}
|
|
69
|
});
|
|
70
|
</script>
|
|
71
|
```
|
|
72
|
|
|
73
|
That's it. Now you can e.g. create a very basic mappanel and let it reign over
|
|
74
|
the whole browser window:
|
|
75
|
|
|
76
|
```javascript
|
|
77
|
var mappanel = Ext.create('GeoExt.panel.Map', {
|
|
78
|
title: 'A sample Map',
|
|
79
|
map: {
|
|
80
|
// ...
|
|
81
|
// optional, can be either
|
|
82
|
// - a valid OpenLayers.Map configuration or
|
|
83
|
// - an instance of OpenLayers.Map
|
|
84
|
},
|
|
85
|
center: '12.31,51.48',
|
|
86
|
zoom: 6
|
|
87
|
});
|
|
88
|
|
|
89
|
Ext.create('Ext.container.Viewport', {
|
|
90
|
layout: 'fit',
|
|
91
|
items: [
|
|
92
|
mappanel // our variable from above
|
|
93
|
]
|
|
94
|
});
|
|
95
|
```
|
|
96
|
|
|
97
|
More information to get started can be grabbed
|
|
98
|
[on the main website](http://geoext.github.io/geoext2).
|
|
99
|
|
|
100
|
|
|
101
|
## Want to contribute? Yes, please!
|
|
102
|
|
|
103
|
We definitely want you to help us making GeoExt. We will happily accept pull
|
|
104
|
requests of any kind; be it documentation improvement, code refactoring or new
|
|
105
|
functionality.
|
|
106
|
|
|
107
|
Please sign the [contributor agreement](http://trac.geoext.org/browser/docs/contributor_agreements/geoext_agreement.pdf?format=raw)
|
|
108
|
and email it to the GeoExt Project Steering Committee (`psc [at] geoext.org`)
|
|
109
|
prior to submitting your changes. Thanks.
|
|
110
|
|
|
111
|
|
|
112
|
## To generate the jsduck documentation
|
|
113
|
|
|
114
|
* Install jsduck: https://github.com/senchalabs/jsduck
|
|
115
|
* Run `jsduck --config jsduck.json` in the root of the repository
|
|
116
|
* Optional: If you want the documentation for ExtJS to be linked, edit
|
|
117
|
`jsduck.json` to point to the proper source location (URLs will not work)
|
|
118
|
* Optional: To refresh screenshots in the example page run
|
|
119
|
`~$ . tools/screenshots.sh http://geoext.github.io/geoext2/examples/`
|
|
120
|
* Open the generated file `/path/to/your/geoext/docs/index.html` in your
|
|
121
|
favorite browser
|
|
122
|
* Enjoy!
|
|
123
|
|
|
124
|
|
|
125
|
## To run the test suite
|
|
126
|
|
|
127
|
* Serve the contents of a GeoExt 2 clone on a webserver, e.g.:
|
|
128
|
|
|
129
|
`user@machine:/src/geoext2 $ python -m SimpleHTTPServer 2222`
|
|
130
|
|
|
131
|
* Open the main test suite HTML file in a browser:
|
|
132
|
|
|
133
|
`http://localhost:2222/tests/run-tests.html`
|
|
134
|
|
|
135
|
* Click the button "run all"
|
|
136
|
|
|
137
|
## Headless tests with casperjs
|
|
138
|
|
|
139
|
You can also run the above tests headlessly through casperjs:
|
|
140
|
|
|
141
|
```bash
|
|
142
|
# Run the suite in the root of the repository
|
|
143
|
./tests/headless/casperjs-1.1-beta.1/bin/casperjs \
|
|
144
|
test \
|
|
145
|
tests/headless/run-testsuite.js
|
|
146
|
```
|
|
147
|
|
|
148
|
These tests are also run though [travis](https://travis-ci.org/geoext/geoext2).
|
|
149
|
|
|
150
|
|