[Commits] r688 - sandbox/docsrc/tutorials

Tue May 12 21:47:32 CEST 2009

Author: sbenthall
Date: 2009-05-12 21:47:32 +0200 (Tue, 12 May 2009)
New Revision: 688

Modified:
   sandbox/docsrc/tutorials/ext-primer.rst
Log:
some content for the ext primer


Modified: sandbox/docsrc/tutorials/ext-primer.rst
===================================================================

--- sandbox/docsrc/tutorials/ext-primer.rst	2009-05-12 19:30:49 UTC (rev 687)
+++ sandbox/docsrc/tutorials/ext-primer.rst	2009-05-12 19:47:32 UTC (rev 688)
@@ -4,20 +4,84 @@
  Primer: Ext
 =============
 
+GeoExt extends `Ext JS <http://extjs.com/>`_, a rich library of web UI
+widgets and helper classes.  Using GeoExt requires a working knowledge
+of Ext's idioms.  This tutorial provides a quick overview of core Ext concepts.
+
 .. _ext-getting-started:
 
 Getting Started
 ===============
 
+To start using Ext, you will first have to `download
+<http://www.extjs.com/products/extjs/download.php>`_ it.
+For more complete instructions about how configure a web page to use
+Ext, you can check the GeoExt :doc:`quickstart` tutorial.
 
+When you download Ext, you also get their excellent `Examples <http://www.extjs.com/deploy/dev/examples/>'_ and 'API
+Documentation <http://www.extjs.com/deploy/dev/docs/>`_, which you can also look at on-line for education and reference.
+
+In order to get Ext running on a page you will need to have something
+like the following in the ``<head>`` of an HTML page in a directory
+that is published by your web server.
+
+    .. code-block::
+       xml
+
+       <script src="ext-2.2/adapter/ext/ext-base.js" type="text/javascript"></script>
+       <script src="ext-2.2/ext-all.js"  type="text/javascript"></script>
+       <link rel="stylesheet" type="text/css" href="ext-2.2/resources/ext-all.css"></link>
+
+This will load the code and styles for Ext.  Change the paths
+according to where you have put the Ext files.
+
+When writing Ext code, most of what you will be doing is instantiating
+classes with constructors that takes a single object--its
+configuration object--as an argument.  This snippet demonstrates this
+coding pattern:
+
+    .. code-block::
+    html
+
+    Ext.onReady(function(){
+        var myPanel = new Ext.Panel({
+            title: 'Hello World!',
+            html: '<i>Hello World!</i> Please enjoy this primer on Ext!'
+            collapsible: true,
+            width:500,
+            renderTo: 'panelDiv',
+        });        
+    };
+
+This code uses Ext's ``onReady`` method to trigger the method when the
+document's body is ready.  (This is cleaner than using body's
+``onready`` event, and with ``Ext.onReady`` several functions can be
+queued for execution before the page loads.)
+
+When the page is ready, the ``Ext.Panel`` constructor is called with a
+single configuration object as argument.  The Panel's structure should
+be familiar from your desktop experience.  It has a ``title`` which
+runs across the top, and some content which in this case is ``html``
+provided in the configuration.
+
+Many configuration options (best explored in the Ext examples and API
+documention) are available.  Here, they are represented by the
+``collapsible`` property, which allows the user to collapse the panel
+much like you can minimize your browser's window, and the ``width`` of
+the panel specified in pixels.
+
+Lastly, this code assumes that somewhere in the DOM of the page is a
+``div`` with the id ``panelDiv``.  When the Panel is constructed, it
+will be automatically rendered in this div because of the ``renderTo``
+option.  (This option can be left out and panels rendered manually, if desired.)
+
 .. _ext-basic-layout:
 
 Basic Layout
 ============
 
-[putting panels in a viewport]
+Ext makes it easy to separate out your UI into logical blocks.  It 
 
-
 .. _ext-trees:
 
 Trees, Nodes, and Childnodes

