| 1 |
d2a8c3fd
|
Marc NICOLAS
|
# [](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 |
|
|
|