日期:2014-05-16  浏览次数:20375 次

Extjs与js相关的方法
1.注册事件
a.listeners
listeners:{
click: function() {//方法
		this.doReset();//方法体
		}
          }

b.on
Ext.on(事件类型,方法,参数(可选));
c.handler
执行控制的默认事件

2.Ext中获取html
Ext.get(id).dom.innerHTML或Ext.get(id).getAttribute("innerHTML")

3.Ext.get

var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存

4. Ext.fly

var el = Ext.fly('myElementId')//不需要缓存。

注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。

5、CSS元素
a.addClass
Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式

b.removeClass

Ext.fly('elId').removeClass('myCls'); // 移除元素的样

c.replaceClass

Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式

d.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'

});//设置元素的样式,也可以用一个对象参数包含多个样式。

6.appendChild

把送入的元素归为这个元素的子元素。

var el = Ext.get('elId1');
// 用id指定
Ext.fly('elId').appendChild('elId2');
// Ext.Element添加
Ext.fly('elId').appendChild(el);
// 选择符组合地添加
Ext.fly('elId').appendChild(['elId2','elId3']);
// 直接添加dom节点
Ext.fly('elId').appendChild(el.dom);
// 添加CompositeElement,一组的div
Ext.fly('elId').appendChild(Ext.select('div'));
7.appendTo

把这个元素添加到送入的元素里面。

var el = Ext.get('elId1');
// 'elId'添加到'elId2'里面
Ext.fly('elId').appendTo('elId2');
Ext.fly('elId').appendTo(el);  //
    添加到Ext.Element el
8.insertBefore

传入一个元素的参数,将其放置在当前元素之前的位置。

var el = Ext.get('elId1');

// dom节点在前面插入
Ext.fly('elId').insertBefore('elId2');
//Ext.Element el在前面插入
Ext.fly('elId').insertBefore(el);
9.insertAfter

传入一个元素的参数,将其放置在当前元素之后的位置。


var el = Ext.get('elId1');

// dom节点在后面插入
Ext.fly('elId').insertAfter('elId2');
// Ext.Element el在后面插入

Ext.fly('elId').insertAfter(el);
10.insertFirst

可以是插入一个元素,也可以是创建一个元素(要创建的话请使用“DomHelper配置项对象”作为参数传入),总之,这个元素作为当前元素的第一个子元素出现。

var el = Ext.get('elId1');

// 插入的dom节点作为第一个元素
Ext.fly('elId').insertFirst('elId2');
// 插入的Ext.Element作为第一个元素
Ext.fly('elId').insertFirst(el);

// 用DomHelper配置项创建新节点,新节点会作为第一个子元素被插入。
Ext.fly('elId').insertFirst({
tag: 'p',
cls: 'myCls',
html: 'Hi I am the new first child'

});

11.insertHtml

插入HTML片断到这个元素。至于要插入的html放在元素的哪里,你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断,第三个参数是决定是否返回一个Ext.Element类型的DOM对象。

Ext.fly('elId').insertHtml(
'beforeBegin',
'<p><a href="anotherpage.html'>点击我</a></p>'

); // 返回dom节点
Ext.fly('elId').insertHtml(
'beforeBegin',
'<p><a href="anotherpage.html'>点击我</a></p>',
true

); // 返回Ext.Element
12.remove

从DOM里面移除当前元素,并从缓存中删除。.

Ext.fly('elId').remove(); //
                        elId在缓存和dom里面都没有
13.removeNode

移除document的DOM节点。如果是body节点的话会被忽略。

Ext.removeNode(node); // 从dom里面移除(HTMLElement)

14..hasClass
if (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式
// 是有样式的……
}
15.getStyle
var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。
16.根据id取值
Ext.get(id).dom.value;