- 浏览: 102221 次
- 性别:
- 来自: 成都
最新评论
-
王花蔡:
要加上 Ext.tip.QuickTipManager.in ...
EXTJS4中更改了ext:qtip的支持 -
王花蔡:
还是不行啊!
EXTJS4中更改了ext:qtip的支持 -
tmartin:
jackyrong 写道如果有个url ,是要保护的资源url ...
[转]spring基于url路径匹配用法讲解 -
jackyrong:
如果有个url ,是要保护的资源url,为/abc/abc.a ...
[转]spring基于url路径匹配用法讲解 -
wzwahl36:
<a href="http://redston ...
extjs如何操作panel的html
1.Ext.core.Element
API解释
他是组建和控件的基础
他对一个DOM对象的封装(Document Object Model)
1.1如何得到Element
Ext.core.Element.fly(String/HTMLElement el, [String named] ) : Element
<div id="div01"> 我事第一个div </div>
css:
.divC{color:red}
js:
var div01 = Ext.core.Element.fly("div01"); //1.鼠标滑过的时候增加一个样式滑出的时候移除样式 div01.addClsOnOver("divC");
Ext.get(Mixed el) : Element
Retrieves Ext.Element objects. get is an alias for Ext.Element.get.
This method does not retrieve Components. This method retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentManager.get.
Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM.
Parameters
el : String/HTMLElement/Ext.Element
The id of the node, a DOM Node or an existing Element.
Returns
Ext.Element
The Element object (or null if no matching element was found)
这个方法不检索组件,检索Ext.Element封装的DOM元素。用Ext.ComponentManager.get方法,根据ID查找。并且支持简单的缓存,防止重复查找。
//2.得到el的方法是Ext.get() var input01 = Ext.get("input01"); var fn1 = function(){ alert("单击B按钮调用这个函数"); };
1.2 Element 相关方法
addClsOnClick( String className ) : Ext.core.Element
addClsOnOver( String className ) : Ext.core.Element
addKeyMap( Object config ) : Ext.util.KeyMap
addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.util.KeyMap
input01.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn1,stope:input01}); input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){ alert("单击ctrl+x") },input01);
appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.core.Element
function createChild(){ var el = document.createElement("h5"); el.appendChild(document.createTextNode("我是被追加的")); return el; } Ext.get("div02").appendChild(createChild()); Ext.getBody().createChild({ tag:'li', id:'item1', html:'我是第一个个节点' });
createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.core.Element
function createChild(){ var el = document.createElement("h5"); el.appendChild(document.createTextNode("我是被追加的")); return el; } Ext.get("div02").appendChild(createChild()); Ext.getBody().createChild({ tag:'li', id:'item1', html:'我是第一个个节点' });
2.Ext.core.DomHelper
API解释
他可以很容易的操作页面的HTML.和DOM元素
append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.core.Element
追加一个孩子
//append( Mixed el, Object/String o, [Boolean returnElement] ) : var p = Ext.create("Ext.panel.Panel",{ width:400, height:300, html:"<p id='p1'>hello word</p>", id:'myp01', title:'my panel', renderTo:"myp" }); Ext.core.DomHelper.append(Ext.get("p1"),"<br><div id='d'>wo sho bei zhuijia de </div>");
applyStyles( String/HTMLElement el, String/Object/Function styles )
Ext.core.DomHelper.applyStyles(Ext.get("p1"),"color:red");
//下面两个是被当做兄弟追加的
insertAfter( Mixed el, Object o, [Boolean returnElement] ) :
insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) :
createDom( Object/String o ) : HTMLElement
Creates new DOM element(s) without inserting them to the document.
var html = Ext.core.DomHelper.createDom("<h1>hello</h1>"); alert(html)
overwrite( String/HTMLElement/Ext.Element el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
Creates new DOM element(s) and overwrites the contents of element with them.
3.Ext
//方法是执行在文件加载完之后,onload 和 image 加载之前
onReady( Function fn, Object scope, Boolean withDomReady, Object options ) : void
get()//不在多说
query( String path, [Node root] ) : Array
http://www.w3school.com.cn/xpath/xpath_axes.asp
语法看 Ext.DomQuery
//2.通过类似XML的选测方式来查询我们的节点 var arr = Ext.query("TR TD"); //alert(arr)
getCmp( String id ) : void
返回组建管理器管理的ID组建
isEmpty( Mixed value, [Boolean allowEmptyString] ) : Boolean
//4.isEmpty // alert(Ext.isEmpty({})); // alert(Ext.isEmpty('',true));//flase // alert(Ext.isEmpty('',false));//true
namespace( String namespace1, String namespace2, String etc ) : Object
创建名称空间用于局部变量和类,所以它们并不是全局的
//5.namespace Ext.namespace("COM.PCAT.MODE","COM.PCAT.CORE"); COM.PCAT.MODE.A = { name:'uspcat' }; COM.PCAT.CORE.A = function(){ alert("COM.PCAT.CORE.A"); };
each( Array/NodeList/Mixed iterable, Function fn, Object scope, Boolean reverse ) : Boolean
遍历
//6.each var array = [-1,23,43543,4,6,7,8]; Ext.each(array,function(i){ //alert(i) })
apply( Object object, Object config, Object defaults ) : Object
扩展函数
//7.apply var a = { name:'yfc' } Ext.apply(a,{getName:function(){ //this有时代表本类,有时代表调用本类的类 alert(this.name); }});
encode( Mixed o ) : String
将对象编码成json字符串。对象中的方法不行。
//8.encode( Mixed o ) : String //alert(Ext.encode(a));
htmlDecode( String value ) : String
转换HTML的转译符   ->空格
//9.htmlDecode //Ext.Msg.alert("hello",Ext.htmlDecode("<h1>hel>lo</h1>")); //10.select //var o1 = Ext.select("divC"); //alert(o1)
typeOf( Mixed value ) : String
判断对象类型
alert(Ext.typeOf({}));//object alert(Ext.typeOf(""));//string alert(Ext.typeOf(function(){}));//function
select( String/Array selector, [Boolean unique], [HTMLElement/String root] )
发表评论
-
Extjs学习笔记(二十一) form 上
2012-07-25 20:45 01.根类 Ext.form.Basic ... -
Extjs学习笔记(二十) tree加grid整合案例补充
2012-07-25 20:43 0预留 -
Extjs学习笔记(十九) tree加grid整合案例下
2012-07-25 20:43 0预留 -
Extjs学习笔记(十八) tree加grid整合案例上
2012-07-25 20:42 0预留 -
Extjs学习笔记(十七) tree 2
2012-07-25 20:41 0预留 -
Extjs学习笔记(十六) tree
2012-07-25 20:41 0预留 -
Extjs学习笔记(十五) 插件和其他相关知识
2012-07-25 20:40 0预留 -
Extjs 让panel填充整个页面
2012-07-06 14:06 1447new Ext.Viewport( { layout ... -
Extjs学习笔记(十二) gridpane MVC
2012-07-03 14:27 20421.extjs中创建应用用到的方法 MVC文件结构 ... -
Extjs学习笔记(十一) gridpanel
2012-07-03 11:06 22181.表格面板类Ext.grid.Panel 两个别名xtype ... -
Extjs学习笔记(十) 工具包util
2012-07-02 20:00 36341.Ext.util.CSS createSt ... -
Extjs学习笔记(八) Ajax
2012-07-02 11:06 3951Ext.Ajax 是 Ext.data.Connection的 ... -
Extjs学习笔记(七) 事件
2012-07-01 12:58 12991.传统事件绑定回顾 1.1第一种 < ... -
Extjs学习笔记(六) 数据集
2012-07-01 01:14 1032store是一个存储数据对象Model 的集合缓存,他可以为 ... -
Extjs学习笔记(五) 数据读写器
2012-07-01 00:08 1206结构: Modle中 结构图 ... -
Extjs学习笔记(四) 数据代理
2012-06-30 21:52 2193数据代理proxy是进行数据读写的主要途径 结构图: ... -
Extjs学习笔记(三) 数据模型model
2012-06-30 15:11 5372数据集MODEL 类层次图 ... -
Extjs学习笔记(二) 特性
2012-06-30 14:32 2723@JS 类的声明,和对象的创建 类的创建 ... -
Extjs学习笔记(一) 初步认识
2012-06-30 11:08 1275@只需要引入'bootstrap.js'即可 该JS ...
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
Extjs 5 学习笔记,在网上下载整理好的。
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态...ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
非常适合新手学习extjs的笔记,让你少走弯路
老师整理的extjs学习笔记,和大家共享
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
语言程序设计资料:ExtJs学习笔记-2积分.doc
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)