Extjs学习笔记(九) 核心包core

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

API 写道

get( String/HTMLElement/Ext.Element el ) : Ext.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的转译符  &nbsp ->空格

	//9.htmlDecode
	//Ext.Msg.alert("hello",Ext.htmlDecode("<h1>hel&gtlo</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] )