这个是你要将你的组件渲染到哪个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节点
比如有个<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节点
发表评论
-
一个故事讲清楚NIO(转载)
2015-10-22 11:32 658假设某银行只有10个职 ... -
js一些菜单例子
2012-12-03 15:21 833JS树 录结构菜单 演示地址: http://vip.5d. ... -
Servlet.service() for servlet jsp threw exception,NullPointerException
2012-10-09 17:07 11632011-7-28 2:09:33 org.apache.ca ... -
如何远程连接db2数据库
2012-09-18 10:10 960在DB2数据库中,编目(catal ... -
[转]DB2行列转换
2012-09-13 13:15 873行转列 给出下面的数据: CREATE TABLE Sales ... -
存储过程 入门
2012-09-07 09:49 898示例说明:先创建一个临时表,并插入数据,然后查询临时表,返回游 ... -
ue使用的一些小技巧
2012-09-05 11:36 12621. UE里面替换tab键为空格 解决使用UE编辑好 ... -
ext tree 更改图标
2012-04-16 23:11 1699如果在Java代码中树的Node不设置cls的话,Extjs ... -
Ext.data.Store使用示例
2012-04-16 20:34 1294Ext.data.Store是EXT中用来 ... -
js六种数据类型和var
2012-04-13 14:32 1254JavaScript 有六种数据类 ... -
ExtJs 控制复选框disabled
2012-04-13 14:12 2930var csm2 = new Ext.grid.Checkbo ... -
JS 四舍五入
2012-04-10 23:36 960写法巨强的四舍五入的转换函数,如下: function ro ... -
getOutputStream() has already been called for this response
2012-04-06 17:33 983getOutputStream() has al ... -
修改TOMCAT(5.5版本前)内存的方法
2012-03-30 11:34 1106Tomcat默认可以使用的内 ... -
oracle 常用sql
2012-03-27 10:49 854--创建用户 CREATE USER &q ... -
两台windows服务器----SVN的迁移
2012-03-26 17:27 1157两台服务器,进行SVN的迁移: 系统平台:windows se ... -
hibernate 延迟加载
2012-03-23 18:06 784延迟加载机制是为了避 ... -
分享一个ldap验证链接的方法
2012-03-22 12:07 1144public String auth(String userN ... -
poi 操作excel
2012-03-19 21:52 1173本篇面向对象为Java的初 ... -
Oracle Minus关键字
2012-03-06 15:56 1150//--一句话 去同存异,留第一个sql里面的结果。 //创建 ...
相关推荐
【Ext.Window属性详解】 在Ext JS中,`Ext.Panel`是一个强大的组件,它可以用来创建各种复杂的用户界面。当Panel被用作窗口时,它通常会继承或包含`Ext.window.Window`的一些属性。以下是对`Ext.Panel` API中与`...
例如,在需要修改某个元素的位置、大小、可见性等多种属性时,使用`Ext.get`可以提高程序的运行效率。 - 如果只是需要对DOM元素进行一次性操作(如简单的显示或隐藏),则可以选择`Ext.fly`。这样可以在不增加额外...
通过`console.dir(el)`,可以在控制台查看`Ext.Element`实例的详细属性和方法,这对于了解库的功能和调试代码都非常有帮助。 #### 结论 ExtCore作为一款全面且强大的JavaScript库,不仅简化了Web前端开发,还提供...
`el`属性是指定组件外部容器的ID,它会将组件渲染到这个预先存在的DOM元素内。在测试一中,我们看到当`el:'panel_el'`时,Panel只会将其自身结构渲染到`id='panel_el'`的div内,但不会包含这个div中原有的内容。这...
- `TreePanel`的构造函数接受一系列配置参数,如`el`用于指定容器元素,`region`定义其在布局中的位置,`title`显示面板标题,`width`和`minSize/maxSize`控制宽度范围,`split`允许面板调整大小,`autoHeight`控制...
el: 'grid', ds: ds, cm: cm }); grid.render(); ``` 扩展到更复杂的需求,例如在表格中添加CheckBox选中功能,可以创建一个CheckboxSelectionModel并将其添加到ColumnModel中: ```javascript var sm = new ...
var el = Ext.fly('id1'); Ext.fly('id2').hide(); el.hide(); // 这里实际上隐藏的是'id2'而不是'id1' ``` #### 内存优化:`Ext.fly` vs. `Ext.get` 在开发过程中,合理选择 `Ext.get` 或 `Ext.fly` 可以有效降低...
如果当前节点没有子节点,则设置`leaf`属性为`true`,表示这是一个叶子节点。此外,还会检查是否为空文本节点,如果是,则直接返回`null`以忽略该节点。 ### 总结 通过上述步骤,我们成功地使用ExtJS框架解析了XML...
- **对象创建**:可以通过传统的JavaScript语法创建对象,然后利用`Ext.apply`方法添加额外的属性和方法。 ```javascript Ext.cc.Class1 = function() { this.aa = "cc"; this.t1 = function() { this.aa = "t1...
通过上述方法,我们可以清晰地了解到 Ext.Element 对象的所有可用方法和属性,这对于理解和使用 ExtCore 非常有用。 #### 七、总结 ExtCore 是一个功能强大的轻量级 JavaScript 库,提供了丰富的工具和方法来简化 ...
* `Ext.id(el, prefix)`: 返回唯一的 ID 值,`el` 位元素,`prefix` 为前缀。 * `Ext.urlEncode(o, pre)`: 将 JSON 数据转换为 URL 参数串。 * `Ext.urlDecode(string, overwrite)`: 将 URL 参数列表转换为 JSON ...
var el = Ext.fly('some-element', 'named'); // 获取带有ID "some-element" 的浮动元素 ``` ##### 11. `get(Mixed el):Element` - **功能**:获取一个Element对象。 - **参数**: - `el`:可以是ID、DOM节点或...
接着创建了一个`Window`对象,作为登录表单的容器,并且定义了窗口的一些基本属性如不可拖动、不可调整大小等。同时,在`Window`中包含了之前创建的`FormPanel`。 ```javascript var win = new Ext.Window({ el: '...
el: 'tree', animate: true, autoScroll: true, loader: new Tree.TreeLoader({ dataUrl: 'group.do?action=getAllNodes' }), enableDD: true, containerScroll: true, rootVisible: false, dropConfig: { ...
使用Firebug工具的`console.dir`命令,可以查看`el`对象的所有属性和方法,进一步了解`Ext.Element`的细节。 #### 结论 ExtCore不仅提供了强大的DOM操作能力,还集成了Ajax、事件、动画等多种Web开发所需功能,...
11. Ext.id(el, prefix):返回唯一的id值。 Ext.id(document.body, "my") => "my-1" 12. Ext.urlEncode(o, pre):将JSON数据转换为URL参数串。 Ext.urlEncode({a: 1, b: 2}) => "a=1&b=2" 13. Ext.urlDecode...
el: 'tree', title: '控制面板', useArrows: true, autoScroll: true, animatr: true, rootVisible: true, useArrows: true, frame: true, loader: new Ext.tree.TreeLoader({ dataUrl: '()->request->...
`defaultSortable`属性设置为`true`意味着所有的列都可以被排序。 ##### 2. 定义Store Store是Grid数据的核心管理器。这里使用`MemoryProxy`和`ArrayReader`组合的方式来加载和解析数据。 ```javascript // 定义...
10. `Ext.getDom( Mixed el )`: 根据提供的ID、DOM节点或`Ext.Element`对象,返回对应的DOM元素。 11. `Ext.getDoc()`和`Ext.getBody()`: 分别返回文档对象和Body对象,返回的是`Ext.Element`包装的对象,而不是...