Bienvenue sur PostGIS.fr

Bienvenue sur PostGIS.fr , le site de la communauté des utilisateurs francophones de PostGIS.

PostGIS ajoute le support d'objets géographique à la base de données PostgreSQL. En effet, PostGIS "spatialise" le serverur PostgreSQL, ce qui permet de l'utiliser comme une base de données SIG.

Maintenu à jour, en fonction de nos disponibilités et des diverses sorties des outils que nous testons, nous vous proposons l'ensemble de nos travaux publiés en langue française.

source: trunk/workshop-routing-foss4g/web/GeoExt/docs/primers/ext-primer.html @ 77

Revision 76, 14.4 KB checked in by djay, 13 years ago (diff)

Ajout du répertoire web
  • Property svn:executable set to *
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4<html xmlns="http://www.w3.org/1999/xhtml">
5  <head>
6    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7   
8    <title>Primer: Ext &mdash; GeoExt v1.0</title>
9    <link rel="stylesheet" href="../_static/geoext.css" type="text/css" />
10    <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
11    <script type="text/javascript">
12      var DOCUMENTATION_OPTIONS = {
13        URL_ROOT:    '../',
14        VERSION:     '1.0',
15        COLLAPSE_MODINDEX: false,
16        FILE_SUFFIX: '.html',
17        HAS_SOURCE:  true
18      };
19    </script>
20    <script type="text/javascript" src="../_static/jquery.js"></script>
21    <script type="text/javascript" src="../_static/doctools.js"></script>
22    <link rel="shortcut icon" href="../_static/favicon.ico"/>
23    <link rel="top" title="GeoExt v1.0" href="../index.html" />
24    <link rel="up" title="Core Concepts" href="index.html" />
25    <link rel="next" title="Primer: OpenLayers" href="openlayers-primer.html" />
26    <link rel="prev" title="Core Concepts" href="index.html" />
27   
28   
29   
30   
31   
32
33  </head>
34  <body>
35    <div class="header">
36        <div class="wrap">
37            <h1 id="logo"><a href="../index.html">GeoExt</a></h1>
38            <ul id="top-nav">
39                <li class="first"><a href="../docs.html">Documentation</a></li>
40                <li><a href="../examples.html">Examples</a></li>
41                <li><a href="../downloads.html">Download</a></li>
42                <li><a href="http://trac.geoext.org/">Development</a></li>
43            </ul>
44            <div id="searchbox">
45                <form class="search" action="../search.html" method="get">
46                    <input id="searchbox-query" type="text" name="q" size="25" value="Search &hellip;" tabindex="3" onblur="if(this.value=='') this.value='Search &hellip;';" onfocus="if(this.value=='Search &hellip;') this.value='';" />
47                    <input id="searchbox-submit" type="image" value="Search" src="../_static/img/search_icon_green.png" />
48                    <input type="hidden" name="check_keywords" value="yes" />
49                    <input type="hidden" name="area" value="default" />
50                </form>
51            </div>
52        </div>
53    </div>
54
55    <div class="related">
56      <h3>Navigation</h3>
57      <ul>
58        <li><a href="../index.html">GeoExt</a> &raquo;</li>
59          <li><a href="index.html" accesskey="U">Core Concepts</a> &raquo;</li>
60        <li><a href="#">Primer: Ext</a></li>
61      </ul>
62    </div>
63
64      <div class="sphinxsidebar">
65        <div class="sphinxsidebarwrapper">
66            <h3><a href="../index.html">Table Of Contents</a></h3>
67            <ul>
68<li><a class="reference external" href="#">Primer: Ext</a><ul>
69<li><a class="reference external" href="#getting-started">Getting Started</a></li>
70<li><a class="reference external" href="#basic-layout">Basic Layout</a></li>
71</ul>
72</li>
73</ul>
74
75            <h4>Previous topic</h4>
76            <p class="topless"><a href="index.html"
77                                  title="previous chapter">Core Concepts</a></p>
78            <h4>Next topic</h4>
79            <p class="topless"><a href="openlayers-primer.html"
80                                  title="next chapter">Primer: OpenLayers</a></p>
81        </div>
82      </div>
83
84
85    <div class="document">
86      <div class="documentwrapper">
87        <div class="bodywrapper">
88          <div class="body">
89           
90  <div class="section" id="primer-ext">
91<span id="ext-primer"></span><h1>Primer: Ext<a class="headerlink" href="#primer-ext" title="Permalink to this headline">¶</a></h1>
92<p>GeoExt extends <a class="reference external" href="http://www.sencha.com/products/js/">Ext JS</a>, a rich library of web UI
93widgets and helper classes.  Using GeoExt requires a working knowledge
94of Ext&#8217;s idioms.  This tutorial provides a quick overview of core Ext concepts.</p>
95<div class="section" id="getting-started">
96<span id="ext-getting-started"></span><h2>Getting Started<a class="headerlink" href="#getting-started" title="Permalink to this headline">¶</a></h2>
97<p>To start using Ext, you will first have to <a class="reference external" href="http://www.sencha.com/products/js/download.php">download</a> it.
98For more complete instructions about how configure a web page to use
99Ext, you can check the <a class="reference external" href="../tutorials/quickstart.html"><em>GeoExt QuickStart</em></a> tutorial.</p>
100<p>When you download Ext, you also get their excellent
101<a class="reference external" href="http://dev.sencha.com/deploy/dev/examples/">Examples</a> and
102<a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/">API Documentation</a>, which you can also
103look at on-line for education and reference.</p>
104<p>In order to get Ext running on a page you will need to have something
105like the following in the <tt class="docutils literal"><span class="pre">&lt;head&gt;</span></tt> of an HTML page in a directory
106that is published by your web server.</p>
107<div class="highlight-html"><div class="highlight"><pre><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.2.1/adapter/ext/ext-base.js&quot;</span> <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
108<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;ext-3.2.1/ext-all.js&quot;</span>  <span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
109<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;ext-3.2.1/resources/css/ext-all.css&quot;</span><span class="nt">&gt;&lt;/link&gt;</span>
110</pre></div>
111</div>
112<p>This will load the code and styles for Ext.  Change the paths
113according to where you have put the Ext files.</p>
114<p>When writing Ext code, most of what you will be doing is instantiating
115classes with constructors that takes a single object&#8211;its
116configuration object&#8211;as an argument.  This snippet demonstrates this
117coding pattern:</p>
118<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
119    <span class="kd">var</span> <span class="nx">myPanel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Panel</span><span class="p">({</span>
120        <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Hello World!&#39;</span><span class="p">,</span>
121        <span class="nx">html</span><span class="o">:</span> <span class="s1">&#39;&lt;i&gt;Hello World!&lt;/i&gt; Please enjoy this primer on Ext!&#39;</span><span class="p">,</span>
122        <span class="nx">collapsible</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
123        <span class="nx">width</span><span class="o">:</span><span class="mi">300</span><span class="p">,</span>
124        <span class="nx">renderTo</span><span class="o">:</span> <span class="s1">&#39;panelDiv&#39;</span>
125    <span class="p">});</span>
126<span class="p">});</span>
127</pre></div>
128</div>
129<p>There are a few things to note about this example:</p>
130<ul class="simple">
131<li>This code uses Ext&#8217;s <tt class="docutils literal"><span class="pre">onReady</span></tt> method to trigger the method when the
132document&#8217;s body is ready. (This is cleaner than using body&#8217;s <tt class="docutils literal"><span class="pre">onready</span></tt>
133event, and with <tt class="docutils literal"><span class="pre">Ext.onReady</span></tt> several functions can be queued for execution
134before the page loads.)</li>
135<li>When the page is ready, the <tt class="docutils literal"><span class="pre">Ext.Panel</span></tt> constructor is called with a
136single configuration object as argument.  The Panel&#8217;s structure should
137be familiar from your desktop experience.  It has a <tt class="docutils literal"><span class="pre">title</span></tt> which
138runs across the top, and some content which in this case is <tt class="docutils literal"><span class="pre">html</span></tt>
139provided in the configuration.</li>
140<li>Many configuration options (best explored in the Ext examples and API
141documention) are available.  Here, they are represented by the
142<tt class="docutils literal"><span class="pre">collapsible</span></tt> property, which allows the user to collapse the panel
143much like you can minimize your browser&#8217;s window, and the <tt class="docutils literal"><span class="pre">width</span></tt> of
144the panel specified in pixels.</li>
145<li>Lastly, this code assumes that somewhere in the DOM of the page is a
146<tt class="docutils literal"><span class="pre">div</span></tt> with the id <tt class="docutils literal"><span class="pre">panelDiv</span></tt>.  When the Panel is constructed, it
147will be automatically rendered in this div because of the <tt class="docutils literal"><span class="pre">renderTo</span></tt>
148option. (This option can be left out and panels rendered manually, if
149desired.)</li>
150</ul>
151</div>
152<div class="section" id="basic-layout">
153<span id="ext-basic-layout"></span><h2>Basic Layout<a class="headerlink" href="#basic-layout" title="Permalink to this headline">¶</a></h2>
154<p>Ext makes it easy to separate out your UI into logical blocks.
155Most often you will be using one or more nested <em>Containers</em>.  The
156<tt class="docutils literal"><span class="pre">Ext.Panel</span></tt> built above is the most common kind of container.  You
157can nest panels using the <tt class="docutils literal"><span class="pre">items</span></tt> property.  For example:</p>
158<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">Ext</span><span class="p">.</span><span class="nx">onReady</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
159    <span class="kd">var</span> <span class="nx">myPanel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Ext</span><span class="p">.</span><span class="nx">Panel</span><span class="p">({</span>
160        <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Top level&#39;</span><span class="p">,</span>
161        <span class="nx">layout</span><span class="o">:</span> <span class="s1">&#39;border&#39;</span><span class="p">,</span>
162        <span class="nx">items</span><span class="o">:</span> <span class="p">[{</span>
163            <span class="nx">xtype</span><span class="o">:</span><span class="s1">&#39;panel&#39;</span><span class="p">,</span>
164            <span class="nx">title</span><span class="o">:</span><span class="s1">&#39;Sub1&#39;</span><span class="p">,</span>
165            <span class="nx">html</span><span class="o">:</span><span class="s1">&#39;Contents of sub panel 1&#39;</span><span class="p">,</span>
166            <span class="nx">region</span><span class="o">:</span> <span class="s1">&#39;east&#39;</span>
167        <span class="p">},{</span>
168            <span class="nx">xtype</span><span class="o">:</span><span class="s1">&#39;panel&#39;</span><span class="p">,</span>
169            <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;Sub2&#39;</span><span class="p">,</span>
170            <span class="nx">html</span><span class="o">:</span><span class="s1">&#39;Contents of sub panel 2&#39;</span><span class="p">,</span>
171            <span class="nx">region</span><span class="o">:</span> <span class="s1">&#39;center&#39;</span>
172        <span class="p">}],</span>
173        <span class="nx">width</span><span class="o">:</span><span class="mi">300</span><span class="p">,</span>
174        <span class="nx">height</span><span class="o">:</span><span class="mi">200</span><span class="p">,</span>
175        <span class="nx">renderTo</span><span class="o">:</span><span class="s1">&#39;panelDiv&#39;</span>
176    <span class="p">});</span>
177<span class="p">});</span>
178</pre></div>
179</div>
180<p>This code introduces some new concepts:</p>
181<ul class="simple">
182<li>Each of the objects in the <tt class="docutils literal"><span class="pre">items</span></tt> array is a configuration
183object for a panel like the one in the earlier example.</li>
184<li>The <tt class="docutils literal"><span class="pre">Ext.Panel</span></tt> constructor is never called, however.  Instead,
185the <tt class="docutils literal"><span class="pre">xtype</span></tt> option is used.  By setting the xtype, you tell Ext
186what class the configuration is for, and Ext instantiates that class
187when appropriate.</li>
188<li>The <tt class="docutils literal"><span class="pre">layout</span></tt> property on the outer container determines the
189position of the items within it.  Here, we have set the layout to be
190a <em>border</em> layout, which requires that items be given a <tt class="docutils literal"><span class="pre">region</span></tt>
191property like &#8220;center&#8221;, &#8220;north&#8221;, &#8220;south&#8221;, &#8220;east&#8221;, or &#8220;west&#8221;.</li>
192</ul>
193<p>Ext provides a variety of other layouts, including a Tab layout and a
194Wizard layout.  The best way to explore these layouts is using the <a class="reference external" href="http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html">Ext
195Layout Browser</a>
196, which demonstrates each layout and provides sample code.</p>
197</div>
198</div>
199
200
201          </div>
202        </div>
203      </div>
204      <div class="clearer"></div>
205    </div>
206    <div class="related">
207      <h3>Navigation</h3>
208      <ul>
209            <li class="right" style="margin-right: 10px">
210              <a href="../genindex.html" title="General Index"
211                 accesskey="I">index</a></li>
212            <li class="right" >
213              <a href="../modindex.html" title="Global Module Index"
214                 accesskey="M">modules</a> |</li>
215            <li class="right" >
216              <a href="openlayers-primer.html" title="Primer: OpenLayers"
217                 accesskey="N">next</a> |</li>
218            <li class="right" >
219              <a href="index.html" title="Core Concepts"
220                 accesskey="P">previous</a> |</li>
221        <li><a href="../index.html">GeoExt</a> &raquo;</li>
222          <li><a href="index.html" >Core Concepts</a> &raquo;</li>
223        <li><a href="#">Primer: Ext</a></li>
224      </ul>
225    </div>
226
227    <div class="footer">
228      &copy; Copyright 2009-2010, GeoExt Community.
229    </div>
230  </body>
231</html>
Note: See TracBrowser for help on using the repository browser.