`

Ext el属性

 
阅读更多
这个是你要将你的组件渲染到哪个div
比如有个<div id = grid_test></div>
组件里el:grid_test,
就是把这个组件放到上面那个div里





el和contentEl、id这些属性的区别:el是生成的id;如果用了el,它会解析一下html里的元素。
contentEl是包含的内容;
id是给这个组件设置的id;如果只用id,它还是创建组件,最后让这个组件的id等于你设置的id而已。
el的步骤比id多一些,如果你没自己设置id,他就自动生成一个。要想做到真正的理解就要看源码了



在Ext中,组件渲染以后可以通过访问组件的el属性来得到组件对应的Element,通过访问Element的dom属性可以得到其下面的DOM对象。另外,我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如:
  var view=new Ext.Viewport();//创建了一个组件Component
  view.el.setOpacity(.5);//调用Element的setOpacity方法
  view.el.dom.innerHTML="Hello Ext";//通过Element的dom属性操作DOM对象
  再看下面的代码:
  var win=new Ext.Window({id:"win1",title:"我的窗口",width:200,height:200});
  win.show();
  var c=Ext.getCmp("win1");//得到组件win
  var e=Ext.get("win1");//根据id得到组件win相应的Element
  var dom=Ext.getDom("win1");//得到id为win1的DOM节点
分享到:
评论

相关推荐

    Ext-window属性

    【Ext.Window属性详解】 在Ext JS中,`Ext.Panel`是一个强大的组件,它可以用来创建各种复杂的用户界面。当Panel被用作窗口时,它通常会继承或包含`Ext.window.Window`的一些属性。以下是对`Ext.Panel` API中与`...

    Ext.get与Ext.fly的区别

    例如,在需要修改某个元素的位置、大小、可见性等多种属性时,使用`Ext.get`可以提高程序的运行效率。 - 如果只是需要对DOM元素进行一次性操作(如简单的显示或隐藏),则可以选择`Ext.fly`。这样可以在不增加额外...

    Ext中文版手册最新版

    通过`console.dir(el)`,可以在控制台查看`Ext.Element`实例的详细属性和方法,这对于了解库的功能和调试代码都非常有帮助。 #### 结论 ExtCore作为一款全面且强大的JavaScript库,不仅简化了Web前端开发,还提供...

    ExtJS2.2学习:再论el和contentEl的区别

    `el`属性是指定组件外部容器的ID,它会将组件渲染到这个预先存在的DOM元素内。在测试一中,我们看到当`el:'panel_el'`时,Panel只会将其自身结构渲染到`id='panel_el'`的div内,但不会包含这个div中原有的内容。这...

    Ext.Tree.Panel

    - `TreePanel`的构造函数接受一系列配置参数,如`el`用于指定容器元素,`region`定义其在布局中的位置,`title`显示面板标题,`width`和`minSize/maxSize`控制宽度范围,`split`允许面板调整大小,`autoHeight`控制...

    Ext2.0示例讲解

    el: 'grid', ds: ds, cm: cm }); grid.render(); ``` 扩展到更复杂的需求,例如在表格中添加CheckBox选中功能,可以创建一个CheckboxSelectionModel并将其添加到ColumnModel中: ```javascript var sm = new ...

    Ext JS高级程序设计

    var el = Ext.fly('id1'); Ext.fly('id2').hide(); el.hide(); // 这里实际上隐藏的是'id2'而不是'id1' ``` #### 内存优化:`Ext.fly` vs. `Ext.get` 在开发过程中,合理选择 `Ext.get` 或 `Ext.fly` 可以有效降低...

    Ext解析XML实例

    如果当前节点没有子节点,则设置`leaf`属性为`true`,表示这是一个叶子节点。此外,还会检查是否为空文本节点,如果是,则直接返回`null`以忽略该节点。 ### 总结 通过上述步骤,我们成功地使用ExtJS框架解析了XML...

    ext入门学习文档

    - **对象创建**:可以通过传统的JavaScript语法创建对象,然后利用`Ext.apply`方法添加额外的属性和方法。 ```javascript Ext.cc.Class1 = function() { this.aa = "cc"; this.t1 = function() { this.aa = "t1...

    Ext_Core手册.pdf

    通过上述方法,我们可以清晰地了解到 Ext.Element 对象的所有可用方法和属性,这对于理解和使用 ExtCore 非常有用。 #### 七、总结 ExtCore 是一个功能强大的轻量级 JavaScript 库,提供了丰富的工具和方法来简化 ...

    Ext常用方法录.docx

    * `Ext.id(el, prefix)`: 返回唯一的 ID 值,`el` 位元素,`prefix` 为前缀。 * `Ext.urlEncode(o, pre)`: 将 JSON 数据转换为 URL 参数串。 * `Ext.urlDecode(string, overwrite)`: 将 URL 参数列表转换为 JSON ...

    EXT核心API详解

    var el = Ext.fly('some-element', 'named'); // 获取带有ID "some-element" 的浮动元素 ``` ##### 11. `get(Mixed el):Element` - **功能**:获取一个Element对象。 - **参数**: - `el`:可以是ID、DOM节点或...

    Ext 登陆页面

    接着创建了一个`Window`对象,作为登录表单的容器,并且定义了窗口的一些基本属性如不可拖动、不可调整大小等。同时,在`Window`中包含了之前创建的`FormPanel`。 ```javascript var win = new Ext.Window({ el: '...

    ext 关于树目录开发使用

    el: 'tree', animate: true, autoScroll: true, loader: new Tree.TreeLoader({ dataUrl: 'group.do?action=getAllNodes' }), enableDD: true, containerScroll: true, rootVisible: false, dropConfig: { ...

    ext_core_中文手册

    使用Firebug工具的`console.dir`命令,可以查看`el`对象的所有属性和方法,进一步了解`Ext.Element`的细节。 #### 结论 ExtCore不仅提供了强大的DOM操作能力,还集成了Ajax、事件、动画等多种Web开发所需功能,...

    Ext常用方法录.pdf

    11. Ext.id(el, prefix):返回唯一的id值。 Ext.id(document.body, "my") =&gt; "my-1" 12. Ext.urlEncode(o, pre):将JSON数据转换为URL参数串。 Ext.urlEncode({a: 1, b: 2}) =&gt; "a=1&b=2" 13. Ext.urlDecode...

    ext生成树节点带链接

    el: 'tree', title: '控制面板', useArrows: true, autoScroll: true, animatr: true, rootVisible: true, useArrows: true, frame: true, loader: new Ext.tree.TreeLoader({ dataUrl: '()-&gt;request-&gt;...

    Ext2[1].0框架的Grid使用介绍

    `defaultSortable`属性设置为`true`意味着所有的列都可以被排序。 ##### 2. 定义Store Store是Grid数据的核心管理器。这里使用`MemoryProxy`和`ArrayReader`组合的方式来加载和解析数据。 ```javascript // 定义...

    Ext.js核心函数详解.docx

    10. `Ext.getDom( Mixed el )`: 根据提供的ID、DOM节点或`Ext.Element`对象,返回对应的DOM元素。 11. `Ext.getDoc()`和`Ext.getBody()`: 分别返回文档对象和Body对象,返回的是`Ext.Element`包装的对象,而不是...

Global site tag (gtag.js) - Google Analytics