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] )