[76] | 1 | .. _ext-primer: |
---|
| 2 | |
---|
| 3 | ============= |
---|
| 4 | Primer: Ext |
---|
| 5 | ============= |
---|
| 6 | |
---|
| 7 | GeoExt extends `Ext JS <http://www.sencha.com/products/js/>`_, a rich library of web UI |
---|
| 8 | widgets and helper classes. Using GeoExt requires a working knowledge |
---|
| 9 | of Ext's idioms. This tutorial provides a quick overview of core Ext concepts. |
---|
| 10 | |
---|
| 11 | .. _ext-getting-started: |
---|
| 12 | |
---|
| 13 | Getting Started |
---|
| 14 | =============== |
---|
| 15 | |
---|
| 16 | To start using Ext, you will first have to `download |
---|
| 17 | <http://www.sencha.com/products/js/download.php>`_ it. |
---|
| 18 | For more complete instructions about how configure a web page to use |
---|
| 19 | Ext, you can check the :doc:`../tutorials/quickstart` tutorial. |
---|
| 20 | |
---|
| 21 | When 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 |
---|
| 24 | look at on-line for education and reference. |
---|
| 25 | |
---|
| 26 | In order to get Ext running on a page you will need to have something |
---|
| 27 | like the following in the ``<head>`` of an HTML page in a directory |
---|
| 28 | that 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 | |
---|
| 36 | This will load the code and styles for Ext. Change the paths |
---|
| 37 | according to where you have put the Ext files. |
---|
| 38 | |
---|
| 39 | When writing Ext code, most of what you will be doing is instantiating |
---|
| 40 | classes with constructors that takes a single object--its |
---|
| 41 | configuration object--as an argument. This snippet demonstrates this |
---|
| 42 | coding 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 | |
---|
| 56 | There 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 | |
---|
| 83 | Basic Layout |
---|
| 84 | ============ |
---|
| 85 | |
---|
| 86 | Ext makes it easy to separate out your UI into logical blocks. |
---|
| 87 | Most often you will be using one or more nested *Containers*. The |
---|
| 88 | ``Ext.Panel`` built above is the most common kind of container. You |
---|
| 89 | can 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 | |
---|
| 114 | This 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 | |
---|
| 129 | Ext provides a variety of other layouts, including a Tab layout and a |
---|
| 130 | Wizard layout. The best way to explore these layouts is using the `Ext |
---|
| 131 | Layout Browser |
---|
| 132 | <http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html>`_ |
---|
| 133 | , which demonstrates each layout and provides sample code. |
---|
| 134 | |
---|