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/_sources/primers/ext-primer.txt @ 81

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

Ajout du répertoire web
  • Property svn:executable set to *
Line 
1.. _ext-primer:
2
3=============
4 Primer: Ext
5=============
6
7GeoExt extends `Ext JS <http://www.sencha.com/products/js/>`_, a rich library of web UI
8widgets and helper classes.  Using GeoExt requires a working knowledge
9of Ext's idioms.  This tutorial provides a quick overview of core Ext concepts.
10
11.. _ext-getting-started:
12
13Getting Started
14===============
15
16To start using Ext, you will first have to `download
17<http://www.sencha.com/products/js/download.php>`_ it.
18For more complete instructions about how configure a web page to use
19Ext, you can check the :doc:`../tutorials/quickstart` tutorial.
20
21When you download Ext, you also get their excellent
22`Examples <http://dev.sencha.com/deploy/dev/examples/>`_ and
23`API Documentation <http://dev.sencha.com/deploy/dev/docs/>`_, which you can also
24look at on-line for education and reference.
25
26In order to get Ext running on a page you will need to have something
27like the following in the ``<head>`` of an HTML page in a directory
28that is published by your web server.
29
30.. code-block:: html
31
32    <script src="ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
33    <script src="ext-3.2.1/ext-all.js"  type="text/javascript"></script>
34    <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css"></link>
35
36This will load the code and styles for Ext.  Change the paths
37according to where you have put the Ext files.
38
39When writing Ext code, most of what you will be doing is instantiating
40classes with constructors that takes a single object--its
41configuration object--as an argument.  This snippet demonstrates this
42coding pattern:
43
44.. code-block:: javascript
45
46    Ext.onReady(function(){
47        var myPanel = new Ext.Panel({
48            title: 'Hello World!',
49            html: '<i>Hello World!</i> Please enjoy this primer on Ext!',
50            collapsible: true,
51            width:300,
52            renderTo: 'panelDiv'
53        });       
54    });
55
56There are a few things to note about this example:
57
58* This code uses Ext's ``onReady`` method to trigger the method when the
59  document's body is ready. (This is cleaner than using body's ``onready``
60  event, and with ``Ext.onReady`` several functions can be queued for execution
61  before the page loads.)
62
63* When the page is ready, the ``Ext.Panel`` constructor is called with a
64  single configuration object as argument.  The Panel's structure should
65  be familiar from your desktop experience.  It has a ``title`` which
66  runs across the top, and some content which in this case is ``html``
67  provided in the configuration.
68
69* Many configuration options (best explored in the Ext examples and API
70  documention) are available.  Here, they are represented by the
71  ``collapsible`` property, which allows the user to collapse the panel
72  much like you can minimize your browser's window, and the ``width`` of
73  the panel specified in pixels.
74
75* Lastly, this code assumes that somewhere in the DOM of the page is a
76  ``div`` with the id ``panelDiv``.  When the Panel is constructed, it
77  will be automatically rendered in this div because of the ``renderTo``
78  option. (This option can be left out and panels rendered manually, if
79  desired.)
80
81.. _ext-basic-layout:
82
83Basic Layout
84============
85
86Ext makes it easy to separate out your UI into logical blocks.
87Most often you will be using one or more nested *Containers*.  The
88``Ext.Panel`` built above is the most common kind of container.  You
89can nest panels using the ``items`` property.  For example:
90
91.. code-block:: javascript
92
93    Ext.onReady(function(){
94        var myPanel = new Ext.Panel({
95            title: 'Top level',
96            layout: 'border',
97            items: [{
98                xtype:'panel',
99                title:'Sub1',
100                html:'Contents of sub panel 1',
101                region: 'east'
102            },{
103                xtype:'panel',
104                title: 'Sub2',
105                html:'Contents of sub panel 2',
106                region: 'center'
107            }],
108            width:300,
109            height:200,
110            renderTo:'panelDiv'
111        });       
112    });
113
114This code introduces some new concepts:
115
116* Each of the objects in the ``items`` array is a configuration
117  object for a panel like the one in the earlier example.
118
119* The ``Ext.Panel`` constructor is never called, however.  Instead,
120  the ``xtype`` option is used.  By setting the xtype, you tell Ext
121  what class the configuration is for, and Ext instantiates that class
122  when appropriate.
123
124* The ``layout`` property on the outer container determines the
125  position of the items within it.  Here, we have set the layout to be
126  a *border* layout, which requires that items be given a ``region``
127  property like "center", "north", "south", "east", or "west".
128
129Ext provides a variety of other layouts, including a Tab layout and a
130Wizard layout.  The best way to explore these layouts is using the `Ext
131Layout Browser
132<http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html>`_
133, which demonstrates each layout and provides sample code.
134
Note: See TracBrowser for help on using the repository browser.