欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ExtJs使用总结(非常详细)

程序员文章站 2022-06-24 18:34:37
一、获取元素(getting elements) 1.ext.get var el = ext.get('myelementid');//获取元素,等同于document....
一、获取元素(getting elements)
1.ext.get
var el = ext.get('myelementid');//获取元素,等同于document.getelementbyid('myelementid');//会缓存
2. ext.fly
var el = ext.fly('myelementid')//不需要缓存。
注:享元模式(flyweight design pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。
3.ext.getdom
var eldom = ext.getdom('elid'); // 依据id来查dom节点
var eldom1 = ext.getdom(eldom); // 依据dom节点来查dom节点

二、css元素
4.addclass
ext.fly('elid').addclass('mycls'); // 加入元素的'mycls'的样式
5.radioclass
ext.fly('elid').radioclass('mycls');//添加一个或多个classname到这个元素,并移除其所有侧边(siblings)节点上的同名样式。
6.removeclass
ext.fly('elid').removeclass('mycls'); // 移除元素的样式
7.toggleclass
ext.fly('elid').toggleclass('mycls'); // 加入样式
ext.fly('elid').toggleclass('mycls'); // 移除样式
ext.fly('elid').toggleclass('mycls'); // 再加入样式
8.hasclass
if (ext.fly('elid').hasclass('mycls')) {//判断是否已加上这个样式
// 是有样式的……
}
10.replaceclass
ext.fly('elid').replaceclass('myclsa', 'myclsb');//替换样式
11.getstyle
var color = ext.fly('elid').getstyle('color');//返回该元素的统一化当前样式和计算样式。
var zindx = ext.fly('elid').getstyle('z-index');//返回该元素的统一化当前样式和计算样式。
12.setstyle
ext.fly('elid').setstyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'
});//设置元素的样式,也可以用一个对象参数包含多个样式。
13.getcolor
ext.fly('elid').getcolor('color');//为指定的css属性返回css颜色
14.setopacity

ext.fly('elid').setopacity(.45, true);//设置元素的透明度。
15.clearopacity
ext.fly('elid').clearopacity();//清除这个元素的透明度设置


三、dom游历
16.ext.fly('elid').select('li:nth-child(2n)').addclass('red');
17.is 测试当前元素是否与传入的选择符相符一致。
复制代码 代码如下:

var el = ext.get('elid');
if (el.is('p.mycls')) {
// 条件成立
}

18.findparent
定位于此节点,以此节点为起点,向外围搜索外层的父节点,搜索条件必须符合并匹配传入的简易选择符。
ext.fly('elid').findparent('div'); // 返回dom节点
ext.fly('elid').findparent('div', 4); // 查找4个节点
ext.fly('elid').findparent('div', null, true); // 返回ext.element
19.findparentnode
定位于此节点的“父节点”,以此节点的“父节点”为起点,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。
ext.fly('elid').findparentnode('div');
20.up
沿着dom,向外围搜索外层的“父父”节点,搜索条件必须符合并匹配传入的简易选择符。
ext.fly('elid').up('div');
ext.fly('elid').up('div', 5); // 限5层的内查找
21.select
传入一个css选择符的参数,然后依据该css选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个ext.compositeelement类型的组合元素的形式返回。如果以ext.select()调用表示从document可是搜索。
// 返回结果的compositeelement
ext.fly('elid').select('div:nth-child(2)');
// 返回数组
ext.fly('elid').select('div:nth-child(2)',
true);
// 整个document都会搜索
ext.select('div:nth-child(2)');
22.query
进行一次query的查询,返回dom 节点组成的数组。可选地第二参数设置为查询的起点,如不指定则为 document。
// 返回dom节点组成的数组
ext.query('div:nth-child(2)');
23.child
基于送入的选择符,不限定深度进行搜索,符合的话选取单个子节点。
ext.fly('elid').child('p.highlight'); // 返回的类型是ext.element
ext.fly('elid').child('p.highlight', true); // 返回dom节点
24.down
基于该选择符,"直接"选取单个子节点。
ext.fly('elid').down('span'); // 返回的类型是ext.element
ext.fly('elid').down('span', true); // 返回dom节点

25.parent
返回当前节点的那个父节点,可选地可送入一个期待的选择符。
// 返回父节点,类型是ext.element
ext.fly('elid').parent();
// 返回父节点,类型是html dom
ext.fly('elid').parent("", true);
// 返回父级节点,但一定要是div的,找到就返回,类型是ext.element
ext.fly('elid').parent("div");
26.next
获取下一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
// 返回下一个侧边节点,类型是ext.element
ext.fly('elid').next();
// 返回下一个侧边节点,类型是html dom
ext.fly('elid').next("", true);
// 返回下一个侧边节点,但一定要是div的,找到就返回,类型是ext.element
ext.fly('elid').next("div");
27.prev
获取上一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
// 返回上一个侧边节点,类型是ext.element
ext.fly('elid').prev();
// 返回上一个侧边节点,类型是html dom
ext.fly('elid').prev("", true);
// 返回上一个侧边节点,但一定要是div的,找到就返回,类型是ext.element
ext.fly('elid').prev("div");
28.first
获取第一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
// 返回第一个侧边节点,类型是ext.element
ext.fly('elid').first();
// 返回第一个侧边节点,类型是html dom
ext.fly('elid').first("", true);
// 返回第一个侧边节点,但一定要是div的,找到就返回,类型是ext.element
ext.fly('elid').first("div");
29.last
获取最后一个侧边节点,跳过文本节点。可选地可送入一个期待的选择符。
// 返回最后一个侧边节点,类型是ext.element
ext.fly('elid').last();
// 返回最后一个侧边节点,类型是html dom
ext.fly('elid').last("", true);
// 返回最后一个侧边节点,但一定要是div的,找到就返回,类型是ext.element
ext.fly('elid').last("div");

四、dom操控(dhtml常见的一项任务就是dom元素的增、删、改、查)
30.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'));
31.appendto
把这个元素添加到送入的元素里面。
var el = ext.get('elid1');
// 'elid'添加到'elid2'里面
ext.fly('elid').appendto('elid2');
ext.fly('elid').appendto(el); //
添加到ext.element el
32.insertbefore
传入一个元素的参数,将其放置在当前元素之前的位置。
var el = ext.get('elid1');
// dom节点在前面插入
ext.fly('elid').insertbefore('elid2');
//ext.element el在前面插入
ext.fly('elid').insertbefore(el);
33.insertafter
传入一个元素的参数,将其放置在当前元素之后的位置。
var el = ext.get('elid1');
// dom节点在后面插入
ext.fly('elid').insertafter('elid2');
// ext.element el在后面插入
ext.fly('elid').insertafter(el);
34.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'
});
35.replace
用于当前这个元素替换传入的元素。
var el = ext.get('elid1');
// 'elid'去替换'elid2'
ext.fly('elid').replace('elid2');
// 'elid'去替换'elid1'
ext.fly('elid').replace(el);
36.replacewith
用传入的元素替换这个元素。参数可以是新元素或是要创建的domhelper配置项对象。
var el = ext.get('elid1');
ext.fly('elid').replacewith('elid2'); // 'elid2'替换掉'elid'.
ext.fly('elid').replacewith(el); //
'elid1'替换掉'elid'
// 用domhelper配置项创建新节点,并用该节点换掉‘elid'。
ext.fly('elid').replacewith({
tag: 'p',
cls: 'mycls',
html: 'hi i have replaced elid'
});


五、domhelper配置项
37.createchild
传入一个domhelper配置项对象的参数,将其创建并加入到该元素。
var el = ext.get('elid');
var dhconfig = {
tag: 'p',
cls: 'mycls',
html: 'hi i have replaced elid'
};
// 创建新的节点,放到'elid'里面
el.createchild(dhconfig);
// 创建新的节点,居el第一个子元素之前
el.createchild(dhconfig, el.first());
38.wrap
创建一个新的元素,包裹在当前元素外面。
ext.fly('elid').wrap(); // div包着elid
// 用新建的一个元素来包着elid
ext.fly('elid').wrap({
tag: 'p',
cls: 'mycls',
html: 'hi i have replaced elid'
});

六、html片断
38.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
39.remove
从dom里面移除当前元素,并从缓存中删除。.
ext.fly('elid').remove(); //
elid在缓存和dom里面都没有
40.removenode
移除document的dom节点。如果是body节点的话会被忽略。
ext.removenode(node); // 从dom里面移除(htmlelement)


七、ajax
41.load
直接访问updater的ext.updater.update()方法(相同的参数)。参数与ext.updater.update()方法的一致。
ext.fly('elid').load({url: 'serverside.php'})
42.getupdater
获取这个元素的updatemanager。
var updr = ext.fly('elid').getupdater();
updr.update({
url: 'http://myserver.com/index.php',
params: {
param1: "foo",
param2: "bar"
}
});

八、事件控制event handling
43.addlistener/on
为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价,写代码时更省力。
var el = ext.get('elid');
el.on('click', function(e,t) {
// e是一个标准化的事件对象(ext.eventobject)
// t就是点击的目标元素,这是个ext.element.
// 对象指针this也指向t
});
44.removelistener/un
从这个元素上移除一个事件处理函数。un()是它的简写方式。
var el = ext.get('elid');
el.un('click', this.handlerfn);
// 或
el.removelistener('click', this.handlerfn);
45.ext.eventobject
eventobject呈现了统一各浏览器的这么一个事件模型,并尽量符合w3c的标准方法。
// e它不是一个标准的事件对象,而是ext.eventobject。
function handleclick(e){
e.preventdefault();
var target = e.gettarget();
...
}
var mydiv = ext.get('mydiv');
mydiv.on("click", handleclick);
// 或
ext.eventmanager.on('mydiv', 'click', handleclick);
ext.eventmanager.addlistener('mydiv', 'click', handleclick);

九、高级事件功能
46.委托delegation
要使用事件委托的方式代替,在容器身上登记一个事件处理器,按照依附的逻辑选择:
ext.fly('actions').on('click, function(e,t) {
switch(t.id) {
case ''btn-edit':
// 处理特定元素的事件具体过程
break;
case 'btn-delete':
// 处理特定元素的事件具体过程
break;
case 'btn-cancel':
// 处理特定元素的事件具体过程
break;
}
});

47.委托化delegate
你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符,用于过滤目标元素,或是往下一层查找目标的子孙。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
// 对子孙'clickable'有效
delegate: '.clickable'
});
48.翻转hover
这是一个ext的翻转菜单的实例:
// handles when the mouse enters the element
function enter(e,t){
t.toggleclass('red');
}
// handles when the mouse leaves the element
function leave(e,t){
t.toggleclass('red');
}
// subscribe to the hover
el.hover(over, out);
49.移除事件句柄removealllisteners
在该元素身上移除所有已加入的侦听器。
el.removealllisteners();
50.是否一次性触发single
你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
single: true // 触发一次后不会再执行事件了
});
51.缓冲buffer
你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到ext.util.delayedtask延时之后才执行。如果事件在那个事件再次触发,则原处理器句柄将不会被启用,但是新处理器句柄会安排在其位置。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
buffer: 1000 // 重复响应事件以一秒为时间间隔
});
52.延时delay
你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。
el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
// 延迟事件,响应事件后开始计时(这里一秒)
delay: 1000
});
53.目标target
你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素,你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。
复制代码 代码如下:

el.on('click', function(e,t) {
// 执行事件具体过程
}, this, {
// 遇到里头的第一个'div'才会触发事件
target: el.up('div')
});


十、尺寸&大小
54.getheight
返回元素的偏移(offset)高度。
var ht = ext.fly('elid').getheight();
55.getwidth
返回元素的偏移(offset)宽度。
var wd = ext.fly('elid').getwidth();
56.setheight
设置元素的高度。
ext.fly('elid').setheight();
57.setwidth
设置元素的宽度。
ext.fly('elid').setwidth();
58.getborderwidth
返回指定边(side(s))的padding宽度。
var bdr_wd = ext.fly('elid').getborderwidth('lr');
59.getpadding
可以是t, l, r, b或是任何组合。例如,传入lr的参数会得到(l)eft padding +(r)ight padding。
var padding = ext.fly('elid').getpadding('lr');
60.clip
保存当前的溢出(overflow),然后进行裁剪元素的溢出部分 - 使用unclip()来移除。
ext.fly('elid').clip();
61.unclip
在调用clip()之前,返回原始的裁剪部分(溢出的)。
ext.fly('elid').unclip();
62.isborderbox
测试不同的css规则/浏览器以确定该元素是否使用border box。
if (ext.isborderbox) {
//
}

十一、定位

63.getx
返回元素相对于页面坐标的x位置。元素必须是属于dom树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
var elx = ext.fly('elid').getx()
64.gety
返回元素相对于页面坐标的y位置。元素必须是属于dom树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
var ely = ext.fly('elid').gety()
65.getxy
返回元素当前页面坐标的位置。元素必须是属于dom树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
var elxy = ext.fly('elid').getxy() // elxy是数组
66.setx
返回元素相对于页面坐标的x位置。元素必须是属于dom树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
ext.fly('elid').setx(10)
67.sety
返回元素相对于页面坐标的y位置。元素必须是属于dom树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
ext.fly('elid').sety(10)
68.setxy
返回元素当前页面坐标的位置。元素必须是属于dom树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
ext.fly('elid').setxy([20,10])
69.getoffsetsto
返回当前元素与送入元素的距离。这两个元素都必须是属于dom树中的一部分才拥有正确的页面坐标(display:none或未加入的elements返回false)。
var eloffsets = ext.fly('elid').getoffsetsto(anotherel);
70.getleft
获取左边的x坐标。
var elleft = ext.fly('elid').getleft();
71.getright
获取元素右边的x坐标(元素x位置 + 元素宽度)。
var elright = ext.fly('elid').getright();
72.gettop
获取顶部y坐标。
var eltop = ext.fly('elid').gettop();
73.getbottom
获取元素的底部y坐标(元素y位置 + 元素宽度)。
var elbottom = ext.fly('elid').getbottom();
74.setleft
直接使用css样式(代替setx()),设定元素的left位置。
ext.fly('elid').setleft(25)
75.setright
设置元素css right的样式。
ext.fly('elid').setright(15)
76.settop
直接使用css样式(代替sety()),设定元素的top位置。
ext.fly('elid').settop(12)
77.setbottom
设置元素css bottom的样式。
ext.fly('elid').setbottom(15)
78.setlocation
无论这个元素如何定位,设置其在页面的坐标位置。元素必须是dom树中的一部分才拥有页面坐标(display:none或未加入的elements会当作无效而返回false)。
ext.fly('elid').setlocation(15,32)
79.moveto
无论这个元素如何定位,设置其在页面的坐标位置。元素必须是dom树中的一部分才拥有页面坐标(display:none或未加入的elements会当作无效而返回false)。
ext.fly('elid').moveto(12,17)
80.position
初始化元素的位置。如果未传入期待的位置,而又还没定位的话,将会设置当前元素为相对(relative)定位。
ext.fly('elid').position("relative")
81.clearpositioning
当文档加载后清除位置并复位到默认。
ext.fly('elid').clearpositioning()
ext.fly('elid').clearpositioning("top")
82.getpositioning
返回一个包含css定位信息的对象。有用的技巧:连同setpostioning一起,可在更新执行之前,先做一个快照(snapshot),之后便可恢复该元素。
var pos = ext.fly('elid').getpositioning()
83.setpositioning
由getpositioning()返回的对象去进行定位。
ext.fly('elid').setpositioning({
left: 'static',
right: 'auto'
})
84.translatepoints
送入一个页面坐标的参数,将其翻译到元素的css left/top值。
// {left:translx, top: transly}
var points = ext.fly('elid').translatepoints(15,18);