Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / guide / components.html
1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
2 <style type="text/css">.head-band { display: none; }
3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
4 .doc-tab .members .member a.more { background-color: #efefef; }
5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
8
9     req = {
10         liveURL: '.',
11         standAloneMode: true,
12         origDocClass: 'undefined',
13         docClass: 'undefined',
14         docReq: 'undefined',
15         version: '4.0',
16         baseURL: '.',
17         baseDocURL: '.',
18         baseProdURL: '.'
19     };
20
21     clsInfo = {};
22
23
24
25 </script>
26
27 <script type="text/javascript" src="../search.js"></script>
28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
29 <script type="text/javascript" src="../class_tree.js"></script>
30 <script type="text/javascript" src="../class_doc.js"></script>
31 <div id="top-block" class="top-block"></div><div id="docContent"><div class="guide"><h1>Components</h1>
32
33 <hr></hr>
34
35 <p>All components in Ext JS 4 are rendered with a base div element which provides a unique id, and baseline component classes (cls, cmpCls, baseCls, and ui). If additional elements are needed to create a component, they are now handled with an XTemplate (renderTpl). Data for the XTemplate is read from a renderData object and Ext.Element references can be placed on the component instance via renderSelectors. The renderSelector is scoped from the base div element and uses standard css selectors. These Ext.Element references are part of the component lifecycle and removed automatically when the component is destroyed. The following example will help illustrate the creation of a custom component:</p>
36
37 <p>Simple custom icon component example:</p>
38
39 <pre class="prettyprint"><code>IconComponent = Ext.extend(Ext.Component, {
40    iconCls: &#8216;myIcon&#8217;,
41    renderTpl: &#8216;&lt;img alt="" src="{blank}" class="{iconCls}"/&gt;&#8216;,
42    onRender: function() {
43        Ext.applyIf(this.renderData, {
44            blank: Ext.BLANK_IMAGE_URL,
45            iconCls: this.iconCls
46        });
47        Ext.applyIf(this.renderSelectors, {
48            iconEl: &#8216;.&#8217; + this.iconCls
49        });
50        IconComponent.superclass.onRender.call(this);
51    },
52    changeIconCls: function(newIconCls) {
53        if (this.rendered) {
54            this.iconEl.replaceClass(this.iconCls, newIconCls);
55        }
56        this.iconCls = newIconCls;
57    }
58 });</code></pre>
59
60 <p>The renderTpl defines an XTemplate with "blank" and "iconCls" variables which are read from renderData at render time. In addition, an "iconEl" reference to the Ext.Element is applied to the instance at render time. The changeIconCls method can now use the iconEl as soon as the component has been rendered.</p>
61
62 <p><iframe src="http://player.vimeo.com/video/17905336?byline=0&amp;portrait=0" width="500" height="281" frameborder="0"></iframe></p>
63
64 <p><iframe src="http://player.vimeo.com/video/17920271?byline=0&amp;portrait=0" width="500" height="281" frameborder="0"></iframe></p>
65
66 <p><iframe src="http://player.vimeo.com/video/18777458?byline=0&amp;portrait=0" width="500" height="281" frameborder="0"></iframe></p>
67
68 <p>See also:</p>
69
70 <ul><li><a href="http://edspencer.net/2010/07/using-the-ext-js-pivotgrid.html">Using the Ext JS Pivot Grid</a></li></ul>
71
72 <h2>This guide is a work in progress.</h2>
73
74 <p>Please check back soon</p></div></div></div></div></body></html>