git.roojs.org Git - roojs1/blob - docs/symbols/Roo.Element.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2
   3
   4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   5
   6         <head>
   7                 <meta http-equiv="content-type" content="text/html; charset=undefined" />
   8                 <meta name="generator" content="JsDoc Toolkit" />
   9
  10
  11                 <title>JsDoc Reference - Roo.Element</title>
  12
  13
  14         <link rel="stylesheet" type="text/css" href="../../css/roojs.css" />
  15         <link rel="stylesheet" type="text/css" href="../default.css" />
  16
  17
  18         <script type="text/javascript" src="../page.js">
  19
  20         </script>
  21
  22
  23         </head>
  24
  25         <body onload="RooDocsPage.onload();">
  26
  27
  28 <div class="body-wrap">
  29
  30     <!-- ============================== links to methods. ================================= -->
  31
  32     <div class="top-tools">
  33     <!--
  34         <a class="inner-link" href="#Roo.Element-props"><img src="resources/s.gif" class="item-icon icon-prop">Properties</a>
  35         <a class="inner-link" href="#Roo.Element-methods"><img src="resources/s.gif" class="item-icon icon-method">Methods</a>
  36         <a class="inner-link" href="#Roo.Element-events"><img src="resources/s.gif" class="item-icon icon-event">Events</a>
  37         <a class="inner-link" href="#Roo.Element-configs"><img src="resources/s.gif" class="item-icon icon-config">Config Options</a>
  38         <a class="bookmark" href="NEED_TO_CREATE_DIRECT_LINK_HREF"><img src="resources/s.gif" class="item-icon icon-fav">Direct Link</a>
  39         -->
  40     </div>
  41
  42
  43 <!-- ============================== inheritance Block. ================================= -->
  44
  45 <!-- ============================== class title / details ============================ -->
  46
  47
  48     <h1 class="classTitle">
  49
  50                                 Class Roo.Element
  51                         </h1>
  52
  53     <table cellspacing="0" class="class-summary-table">
  54
  55                 <tr><td class="label">Package:</td><td class="hd-info">Roo</td></tr>
  56
  57         <tr><td class="label">Defined In:</td><td class="hd-info">
  58
  59                                         <a href="./src/Roo_Element.js.html">Roo/Element.js</a>.
  60
  61         </td></tr>
  62         <tr><td class="label">Class:</td><td class="hd-info">Element</td></tr>
  63
  64
  65
  66
  67     </table>
  68
  69
  70 <!-- ============================== class summary ========================== -->
  71     <div class="description">
  72         Represents an Element in the DOM.<br><br><br/>Usage:<br><br/><pre><code><br/>var el = Roo.get("my-div");<br/><br/>// or with getEl<br/>var el = getEl("my-div");<br/><br/>// or with a DOM element<br/>var el = Roo.get(myDivElement);<br/></code></pre><br/>Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object<br/>each call instead of constructing a new one.<br><br><br/><b>Animations</b><br /><br/>Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter<br/>should either be a boolean (true) or an object literal with animation options. The animation options are:<br/><pre><br/>Option    Default   Description<br/>--------- --------  ---------------------------------------------<br/>duration  .35       The duration of the animation in seconds<br/>easing    easeOut   The YUI easing method<br/>callback  none      A function to execute when the anim completes<br/>scope     this      The scope (this) of the callback function<br/></pre><br/>Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or<br/>manipulate the animation. Here's an example:<br/><pre><code><br/>var el = Roo.get("my-div");<br/><br/>// no animation<br/>el.setWidth(100);<br/><br/>// default animation<br/>el.setWidth(100, true);<br/><br/>// animation with some options set<br/>el.setWidth(100, {<br/>    duration: 1,<br/>    callback: this.foo,<br/>    scope: this<br/>});<br/><br/>// using the "anim" property to get the Anim object<br/>var opt = {<br/>    duration: 1,<br/>    callback: this.foo,<br/>    scope: this<br/>};<br/>el.setWidth(100, opt);<br/>...<br/>if(opt.anim.isAnimated()){<br/>    opt.anim.stop();<br/>}<br/></code></pre><br/><b> Composite (Collections of) Elements</b><br /><br/>For working with collections of Elements, see <a href="Roo.CompositeElement.html">Roo.CompositeElement</a>
  73     </div>
  74
  75
  76 <!-- ============================== Class comment block... ========================== -->
  77
  78 <div class="comments">
  79         <b>Class Comments / Notes</B> =>
  80         <u onclick="parent.CommentDialog.showCommentId = 'Roo.Element';">[Add Your comment/notes about this class]</u>
  81         <br/>
  82         <iframe frameborder="0"  id="comments-Roo" style="border: none;width:100%;"
  83                 src="/blog.php/GtkDjsComments/Roo.Element.html"></iframe>
  84 </div>
  85
  86
  87
  88 <!-- ============================== config options ========================== -->
  89
  90
  91
  92
  93     <div class="hr"></div>
  94     <a id="Roo.Element-configs"></a>
  95
  96
  97
  98      <table cellspacing="0" class="member-table">
  99       <caption class="Empty">Config Options - Has None</caption>
 100      </table>
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113   <!-- ============================== public properties ==================== -->
 114
 115
 116
 117     <a id="Roo.Element-props"></a>
 118
 119
 120
 121
 122
 123      <table cellspacing="0" class="member-table">
 124       <caption class="Empty">Public Properties - Has None</caption>
 125      </table>
 126
 127
 128
 129
 130   <!-- ============================== methods summary / details ======================== -->
 131
 132
 133   <a id="Roo.Element-methods"></a>
 134         <!-- constructor?? -->
 135
 136         <!-- static's first
 137
 138
 139         -->
 140
 141         <!-- then dynamics first -->
 142
 143
 144
 145
 146
 147
 148       <table cellspacing="0" class="member-table">
 149       <caption>Public Methods</caption>
 150         <tr>
 151             <th class="sig-header" colspan="2">Method</th>
 152             <th class="msource-header">Defined By</th>
 153
 154         </tr>
 155
 156
 157
 158
 159
 160
 161
 162           <tr class="method-row config-row-alt0 expandable notInherited">
 163             <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
 164
 165
 166             <td class="sig">
 167                 <a id="Roo-method-Element"   name=".Element"></a>
 168                 <div class="fixedFont">
 169                         <span class="attributes">new <B>Roo.</B></span><b class="itemname">Element</b>
 170
 171                                  (<a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement <B><i>element</i></B>, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a> <B><i>forceNew</i></B>)
 172
 173
 174
 175                 </div>
 176                 <div class="mdesc">
 177
 178
 179                         <div class="short">Create a new Roo.Element</div>
 180
 181
 182                     <div class="long">
 183
 184
 185
 186                                 Create a new Roo.Element
 187
 188
 189                                 <dl class="detailList">
 190                                 <dt class="heading">Parameters:</dt>
 191
 192                                         <dt>
 193                                                 <span class="fixedFont"><a href="./String.html#constructor" roo:cls="String.html#constructor">String</a>/HTMLElement</span>  <b>element</b>
 194
 195                                         </dt>
 196                                         <dd></dd>
 197
 198                                         <dt>
 199                                                 <span class="fixedFont"><a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Boolean">Boolean</a></span>  <b>forceNew</b>
 200
 201                                         </dt>
 202                                         <dd>(optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).</dd>
 203
 204                                 </dl>
 205
 206
 207
 208
 209
 210
 211
 212
 213
 214
 215
 216                     </div>
 217                 </div>
 218
 219             </td>
 220             <td class="msource">
 221                 &nbsp;
 222             </td>
 223         </tr>
 224
 225
 226     </table>
 227
 228
 229   <!-- ============================== events summary / details ======================== -->
 230
 231
 232   <a id="Roo.Element-events"></a>
 233
 234
 235
 236
 237
 238      <table cellspacing="0" class="member-table">
 239       <caption class="Empty">Events - Has None</caption>
 240      </table>
 241
 242
 243
 244
 245
 246
 247
 248
 249
 250 <!-- ============================== footer ================================= -->
 251                 <div class="fineprint" style="clear:both">
 252
 253                         Documentation generated by <a href="http://www.akbkhome.com" target="_blankt">Introspection Doc Generator</a>  on Fri Jul 16 2010 15:55:22 GMT+0800 (HKT)
 254                         Based on
 255                         <a href="http://www.jsdoctoolkit.org/" target="_blank">JsDoc Toolkit</a>
 256                 </div>
 257         </body>
 258 </html>