Ext.core包与Ext详解

来源：互联网发布：网络环境的现状编辑：程序博客网时间：2024/05/01 08:29

一、Ext.core.Element

概述：它是组件和控件的基础，它对一个DOM对象的封装(Document Object Model)

1、如果得到Element

Ext.core.Element.fly(String/HTMLElementel) :Element

Ext.get(Mixedel) : Element

2、Element 相关方法

addClsOnClick(StringclassName) 参数为一个css样式的一个类名触发的是当点击这个组件的时候变化

AddClsOnOver(StringclassName) 参数与上相同，当鼠标滑过时候触发，滑出时候移除

AddKeyMap(Objectconfig) 传入参数为一个配置的对象配置的属性是与Ext.util.KeyMap配置一样

AddKeyListener(Number/Array/Object/Stringkey,Function fn,[Object scope]) 参数第一个可以传入键盘上的值

或者一个数组，也可以讹传入一个配置对象，第二个参数为触发函数，第三个作用域

appendChild(String/HTMLElement/Array/Element/CompsiteElementel) 在此组件中追求一个还孩子的组件，参数可为元素对象

createChild(Objectconfig,[HTMLElement insertBefore],[Boolean returnDom]) 参数为一个dom的配置对象

代码实现：

//使用fly方法得到Element对象

vardiv01=Ext.core.Element.fly("div01");

//1.鼠标滑过的时候增加一个样式滑出的时候移除样式

div01.addClsOnOver("divC");

//2.得到el的方法是Ext.get()

varinput01=Ext.get("input01");

//3.定义函数并增加组件的添加注册事件

varfn1=function(){

alert("单机B触发的事件");

};

input01.addKeyMap({

key:Ext.EventObject.B,

ctrl:false,

fn:fn1,

scope:input01

});

input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){

alert("单机Ctrl+X");

},this);

//4.在当前组件中追加一个孩子元素

functioncreateChild(){

varel=document.createElement("h5");

el.appendChild(document.createTextNode("我是被追加的"));

returnel;

};

Ext.get("div02").appendChild(createChild());

//5.创建一个节点并添加到当前组件中

Ext.getBody().createChild({

tag:"li",

id:"item1",

html:"我是第一个节点"

});

二、Ext

主要方法：

1.onReady方法是执行在文件加载完和onload和image加载完之后

2.get()传入id值，它返回的是一个Ext.core.Element对象

3.query(Stringpath,[Node root]) ：返回的是Array

利用XML节点查询语法查看：http://www.w3school.com.cn/xpath/xpath_axes.asp

语法看Ext.DomQuery组件类

4.getCmp(Stringid) :返回组件管理器管理的ID组件用Ext的组件指定的id来获取

5.isEmpty(Mixedvalue,[Boolean allowEmptyString]) 判断是否为空，第二个参数指定为true的是当空串就返回为空

6.namespace(Stringnamespace1,String namespace2,String etc) Object 声明命名空间。可以实现多个类的重名，与java中分包相似

7.each(Array/NodeList/Mixediterable,function fn,Object scope,Boolean reverse) 遍历数组，第二个参数为回调函数

8.apply(Objectobject,Object config,Object defaults) 改造一个类，如果有以前的属性则不会替换 applyif 如果有就替换掉原来的属性或方法

9.encode(Mixedo) ：String 将对象编译成Json格式的字符串并返回，不能编译函数

10.Ext.Msg.alert() htmlDecode类弹出提示框它可以自动解析html的标签语言。输出内容不能有<>，如果用应该&gt来转义

11.typeOf(Mixedvalue) :返回为一个String 返回的是这个对象是什么类型

代码实现注释说明：

varonl=function(){

//alert("1、我是被body的onload事件调用的");

}

Ext.onReady(function(){

//1.onReady这个方法里面的第一个参数(function)他执行在页面文件加载完毕之后和onload完成之后

//alert("2.extjs");

//2.query方法查询到所有TR 下的 TD元素对象

vararr=Ext.query("TR TD");

//alert(arr);

//3.getCmp()方法，从组件管理器中用ID来查询到组件首先定义一个paenl，然后更改它的title属性

varpanel=Ext.create("Ext.panel.Panel",{

width:400,

height:300,

html:"<p>hellowword</p>",

id:"myp01",

title:"mypanel",

renderTo:"myp"

});

Ext.getCmp("myp01").setTitle("newpanel");

//4.isEmpty判断是否为空和是否判断空串是否返回为false

alert(Ext.isEmpty({}));

alert(Ext.isEmpty("",true));

alert(Ext.isEmpty("",false));

//5.each方法，遍历一个数组

vararray=[1,2,3,4,5,6,6];

Ext.each(array,function(o){

alert(o);

});

//6.apply扩展一个方法，改造。

vara={

name:"marico"

}

Ext.apply(a,{getName:function(){

alert(this.name);

}});

a.getName();

//7.namespace声明命名空间适合多人开发，组件层次感。

Ext.namespace("com.csdn.model","com.csdn.core");

com.csdn.model.A={

name:"marico"

};

com.csdn.core.A=function(){

alert("com.csdn.core.A");

};

//8.encode方法讲对象解析成Json格式的字符串返回一个string函数不可以被解析

alert(Ext.encode(a));

//9.Ext.Msg.alert() htmlDecode类弹出提示框它可以自动解析html的标签语言。输出内容不能有<>，如果用应该&gt来转义

Ext.Msg.alert("hello","<h2>mar&gtico</h2>");

//10.typeOf(Mixedvalue) :返回为一个String 返回的是这个对象是什么类型

alert(Ext.typeOf({}));//Object

alert(Ext.typeOf(""));//String

alert(Ext.typeOf(function(){}));//function

});

三、Ext.core.DomHelper

概述：可以很容易的操作页面的HTML和DOM元素

1.append方法追求数据，是在此组件中当作孩子的追加

2.applyStyless 第一个参数为组件对象，第二个参数为style样式的语句它会自动解析

3.insertAfter insertBefore 两个是被当作兄弟来追加的

4.createDom(Object/Stringo) 创建一个dom对象返回的是HTMLElement string为html中书写的语法它会自动解析成dom元素

代码：

//1.append方法追求数据，是在此组件中当作孩子的追加

varpanel=Ext.create("Ext.panel.Panel",{

width:400,

height:300,

html:"<pid='p1'>hellow word</p>",

id:"myp01",

title:"mypanel",

renderTo:"myp"

});

Ext.core.DomHelper.append(Ext.get("p1"),"<br>我是被追加的");

//2.applyStyless 第一个参数为组件对象，第二个参数为style样式的语句它会自动解析

Ext.core.DomHelper.applyStyles(Ext.get("p1"),"color:red");

//3.insertAfter insertBefore 两个是被当作兄弟来追加的

Ext.core.DomHelper.insertAfter(Ext.get("p1"),"<h3>我是兄弟2</h3>");

Ext.core.DomHelper.insertBefore(Ext.get("p1"),"<h3>我是兄弟1</h3>");

//4.createDom(Object/Stringo) 创建一个dom对象返回的是HTMLElement string为html中书写的语法它会自动解析成dom元素

varhtml=Ext.core.DomHelper.createDom("<h1>hello</h1>");

alert(html);