extjs文档,extjs入门教程超级详细
ExtJs的使用总结(非常详细)。有需要的朋友可以参考下，获取元素。
1.外部获取
var El=ext . get( my elementid )；//获取元素，相当于document . getelementbyid( myElementID )；//它将被缓存
2.Ext.fly
var=ext . fly( myelementid )//不需要缓存。
注意：Flyweight设计模式是一种节省内存的模式。这种模式的一般原则是创建一个单一的整体对象，然后重复使用它。
3.Ext.getDom
var elDom=ext . getdom( elId )；//根据id检查dom节点
var elDom 1=ext . getdom(elDom)；//根据dom节点检查dom节点
第二，CSS元素
4.addClass
Ext.fly(elId )。add class( myCls )；//添加元素的“myCls”样式
5 .无线电玻璃
Ext.fly(elId )。radio class(“myCls”)；//向此元素添加一个或多个className，并移除其所有同级节点上同名的样式。
6 .删除类
Ext.fly(elId )。remove class( myCls )；//移除元素的样式
7.toggleClass
Ext.fly(elId )。toggle class(“myCls”)；//添加样式
Ext.fly(elId )。toggle class(“myCls”)；//删除样式
Ext.fly(elId )。toggle class(“myCls”)；//再次添加样式
8 .哈斯班
If (ext.fly (elid )。has class( mycls ){//确定是否添加了此样式。
//有风格.
}
10 .替换类
Ext.fly(elId )。replaceClass(myClsA ， my clsb )；//替换样式
getStyle
var color=Ext.fly(elId )。get style( color )；//返回该元素统一的当前样式和计算样式。
var zIndx=Ext.fly(elId )。get style( z-index )；//返回该元素统一的当前样式和计算样式。
setStyle
Ext.fly(elId )。setStyle({
显示：“阻止”，
溢出：“隐藏”，
光标：“指针”
});//设置元素的样式。也可以用一个对象参数包含多个样式。
getColor
Ext.fly(elId )。getColor( color )；//返回指定CSS属性的CSS颜色
14 .设定能力
Ext.fly(elId )。seto capacity(. 45，真)；//设置元素的透明度。
透明不透明
Ext.fly(elId )。clear opacity()；//清除此元素的透明度设置
第三，Dom旅行
16.Ext.fly(elId )。select( Li:n-child(2n))。add class(“red”)；
17.is测试当前元素是否与传入的选择器一致。
复制代码如下：
var El=ext . get( elId )；
if(El . is( p . mycls ){
//条件成立。
}
18 .寻找父母
定位这个节点，以这个节点为起点，向外围搜索外部父节点。搜索条件必须满足并匹配传入的简单选择器。
Ext.fly(elId )。find parent( div )；//返回dom节点
Ext.fly(elId )。findParent(div ，4)；//找到4个节点
Ext.fly(elId )。findParent(div ，null，true)；//返回Ext。元素
19.findParentNode
定位这个节点的“父节点”，从这个节点的“父节点”开始，搜索外围的“父节点”到外围。搜索条件必须满足并匹配传入的简单选择器。
Ext.fly(elId )。find parent node( div )；
20 .向上
沿着DOM，搜索外围的“父”节点。搜索标准必须符合并匹配传入的简单选择器。
Ext.fly(elId )。up( div )；
Ext.fly(elId )。up(div ，5)；//限于5层内部搜索
选择
传入一个CSS选择器的参数，然后根据CSS选择器从当前元素下面形成一组期望匹配的子节点，也就是“选择”的操作，最后作为Ext.CompositeElement类型的复合元素返回.如果调用Ext.select()表示可以从document中搜索，
//返回结果的CompositeElement
Ext.fly(elId )。select( div:n-child(2))；
//返回一个数组
Ext.fly(elId )。select( div:n-child(2)，
真)；
//将搜索整个文档
ext . select( div:n-child(2))；
查询
进行查询并返回一个DOM节点数组。可选的第二个参数被设置为查询的起点；如果未指定，则为文档。
//返回一个dom节点数组
ext . query( div:n-child(2))；
孩子
基于输入的选择器，执行搜索而不限制深度，如果匹配，则选择单个子节点。
Ext.fly(elId )。child( p . highlight )；//返回的类型是Ext。元素
Ext.fly(elId )。child(p.highlight ，true)；//返回dom节点
向下
基于此选择器，“直接”选择一个子节点。
Ext.fly(elId )。向下( span )；//返回的类型是Ext。元素
Ext.fly(elId )。down(span ，true)；//返回dom节点
父母
返回当前节点的父节点可以选择输入一个预期的选择器。
//返回父节点，类型为Ext。元素
Ext.fly(elId )。parent()；
//返回父节点，其类型为html dom
Ext.fly(elId )。parent( ，true)；
//返回父节点，但必须是div的。如果找到了，就会归还。类型是Ext。元素
Ext.fly(elId )。父级(“div”)；
下一个
获取下一个边节点，跳过文本节点。可选地，可以输入所需的选择器。
//返回ext类型的下一个边节点。元素
Ext.fly(elId )。next()；
//返回html dom类型的下一个侧节点
Ext.fly(elId )。下一个(，真)；
//返回下一个边节点，但必须是div的。如果找到了，就会归还。类型是Ext。元素
Ext.fly(elId )。next( div )；
27 .上一页
获取前一个边节点，跳过文本节点。可选地，可以输入所需的选择器。
//返回上一个端节点，类型为Ext。元素
Ext.fly(elId )。prev()；
//返回上一个侧节点，类型为html dom
Ext.fly(elId )。prev(，true)；
//返回上一个边节点，但必须是div的。如果找到了，就会归还。类型是Ext。元素
Ext.fly(elId )。prev( div )；
首先
获取第一个边节点，跳过文本节点。可选地，可以输入所需的选择器。
//返回Ext类型的第一个边节点。元素
Ext.fly(elId )。first()；
//返回html dom类型的第一个边节点
Ext.fly(elId )。第一(，真)；
//返回第一个边节点，但必须是div的。如果找到了，就会归还。类型是Ext。元素
Ext.fly(elId )。first( div )；
最后一次
获取最后一个边节点，跳过文本节点。可选地，可以输入所需的选择器。
//返回Ext类型的最后一个边节点。元素
Ext.fly(elId )。last()；
//返回html dom类型的最后一个边节点
Ext.fly(elId )。last(，true)；
//返回最后一个边节点，但必须是div的。如果找到了，就会归还。类型是Ext。元素
Ext.fly(elId )。last( div )；
4.DOM操作(DHTML的一个常见任务是添加、删除、更改和检查DOM元素)
30 .阑尾孩子
将input元素分类为该元素的子元素。
var El=ext . get( elid 1 )；
//用id指定
Ext.fly(elId )。appendChild( elid 2 )；
//Ext。元素添加
Ext.fly(elId )。appendChild(El)；
//组合添加选择器。
Ext.fly(elId )。appendChild([elId2 ， elid 3 ])；
//直接添加dom节点
Ext.fly(elId )。appendChild(El . DOM)；
//添加CompositeElement，一组div
Ext.fly(elId )。appendChild(ext . select( div ))；
附录
将此元素添加到输入元素中。
var El=ext . get( elid 1 )；
//“elId”被添加到“elId2”
Ext.fly(elId )。appendTo( elid 2 )；
Ext.fly(elId )。附录(El)；//
添加到Ext。元素el
32 .插入之前
传入元素的参数，并将其放在当前元素之前的位置。
var El=ext . get( elid 1 )；
//前面插入dom节点
Ext.fly(elId )。insert before( elid 2 )；
//Ext。元素E1被插入之前
Ext.fly(elId )。insert before(El)；
插入之后
传入元素的参数，并将其放在当前元素之后的位置。
var El=ext . get( elid 1 )；
//在后面插入dom节点
Ext.fly(elId )。insert after( elid 2 )；
//Ext。元素E1被插入在
Ext.fly(elId )。insert after(El)；
首先插入
您可以插入一个元素，也可以创建一个元素(如果您想要创建一个元素，请将“DomHelper配置项对象”作为参数传入)。简而言之，该元素显示为当前元素的第一个子元素。
var El=ext . get( elid 1 )；
//作为第一个元素插入的dom节点
Ext.fly(elId )。insert first( elid 2 )；
//插入分机。元素作为第一个元素
Ext.fly(elId )。insert first(El)；
//用DomHelper CI创建一个新节点，新节点将作为第一个子元素插入。
Ext.fly(elId )。insertFirst({
标签:“p”，
Cls:“我的cls”，
html:“嗨，我是新来的第一个孩子”
});
替换
用于当前元素替换传入元素。
var El=ext . get( elid 1 )；
//elId 替换 elId2
Ext.fly(elId )。替换( elid 2 )；
//elId 替换 elId1
Ext.fly(elId )。替换(El)；
替换为
用传入的元素替换此元素。参数可以是新元素或要创建的DomHelper CI对象。
var El=ext . get( elid 1 )；
Ext.fly(elId )。replace with( elid 2 )；//elId2 替换了 elId。
Ext.fly(elId )。replace with(El)；//
“ElId1”取代了“ElId”
//用DomHelper CI创建一个新节点，并用此节点替换“”elId。
Ext.fly(elId )。替换为({
标签:“p”，
Cls:“我的cls”，
html:嗨，我已经取代了elId
});
动词（verb的缩写）DomHelper配置项目
37 .创造孩子
传入DomHelper配置项对象的参数，创建它并将其添加到元素中。
var El=ext . get( elId )；
var dhConfig={
标签:“p”，
Cls:“我的cls”，
html:嗨，我已经取代了elId
};
//创建一个新节点并将其放入“elId”
El . create child(dhConfig)；
//在el的第一个子元素之前创建一个新节点
el.createChild(dhConfig，El . first())；
包装
创建一个新元素并将其环绕在当前元素周围。
Ext.fly(elId )。wrap()；//div用elId包装
//用新创建的元素包装elId
Ext.fly(elId )。换行({
标签:“p”，
Cls:“我的cls”，
html:嗨，我已经取代了elId
});
不及物动词Html片段
插入Html
在这个元素中插入一个HTML片段。至于要插入的html在元素中的位置，您可以指定before begin、before end、after begin和after end。第二个参数是插入一个HTML片段，第三个参数是决定是否返回Ext.Element类型的DOM对象。
Ext.fly(elId )。插入Html(
开始之前，
P a href=anotherpage.html 单击我/a /p
);//返回dom节点
Ext.fly(elId )。插入Html(
开始之前，
P a href=anotherpage.html 单击我/a /p ，
真实的
);//返回Ext。元素
移除
从DOM中移除当前元素，并将其从缓存中删除。
Ext.fly(elId )。移除()；//
ElId不在缓存或dom中。
40 .移除节点
移除文档的DOM节点。如果是body节点，将被忽略。
ext . remove node(node)；//从dom内部移除(HTMLElement)
七、阿贾克斯
装载
访问更新程序的扩展名。Updater.update()方法(相同的参数)。与参数Ext一致。Updater.update()方法。
Ext.fly(elId )。load({url: serverSide.php})
getUpdater
获取此元素的UpdateManager。
var updr=Ext.fly(elId )。get updater()；
updr.update({
URL: http://my server . com/index . PHP ，
参数：{
param 1:“foo”，
参数2:“酒吧”
}
});
八。事件控制事件处理
43.addListener/on
为此元素添加事件处理程序。On()是它的缩写。速记法相当，写代码时更省力。
var El=ext . get( elId )；
el.on(click ，function(e，t) {
//e是标准化的事件对象(Ext。事件对象)
//t是点击的目标元素，是Ext.Element。
//这个对象指针也指向t。
});
44.removeListener/un
从该元素中移除事件处理程序。Un()是它的缩写。
var El=ext . get( elId )；
el.un(click ，this . handler fn)；
//或者
el.removeListener(click ，this . handler fn)；
45.外部事件对象
Event提出了这样一个统一所有浏览器的事件模型，并试图符合W3C标准方法。
//e它不是标准的事件对象，而是Ext。事件对象
功能手柄点击(e){
e . prevent default()；
var target=e . get target()；
.
}
var my div=ext . get( my div )；
myDiv.on(click ，handle click)；
//或者
延伸文件系统EventManager.on(myDiv ， click ，handle click)；
延伸文件系统event manager . addlistener( my div ， click ，handle click)；
九。高级事件功能
46.委托授权
要使用事件委托，请在容器上注册一个事件处理程序，并根据附件的逻辑选择：
Ext.fly(操作)。on(click，function(e，t) {
开关(t.id) {
案例 btn-edit :
//处理特定元素的事件的特定过程
打破；
案例“btn-delete”:
//处理特定元素的事件的特定过程
打破；
案例“BTN-取消”:
//处理特定元素的事件的特定过程
打破；
}
});
47.一个代表团接一个代表团
您可以在注册事件处理程序时添加此选项。一个简单的选择器用于过滤目标元素或查找下一级目标的后代。
el.on(click ，function(e，t) {
//执行事件的具体过程
}，这个，{
//对后代有效可点击
委托人：。可点击
});
48.翻转悬停
这是Ext翻转菜单的一个例子：
//当鼠标进入元素时进行处理
函数enter(e，t){
t . toggle class( red )；
}
//当鼠标离开元素时进行处理
函数leave(e，t){
t . toggle class( red )；
}
//订阅悬停
el.hover(over，out)；
49.移除事件句柄removeAllListeners
移除此元素上的所有联接侦听器。
El . remove all listeners()；
50.是单次触发吗？
您可以在注册事件处理程序时添加此选项。True表示添加一个处理程序，该处理程序将在下次事件触发后移除自身。
el.on(click ，function(e，t) {
//执行事件的具体过程
}，这个，{
Single: true //一旦触发，该事件将不会再次执行。
});
51.缓冲区
您可以在注册事件处理程序时添加此选项。如果指定毫秒，处理函数将被安排在扩展后执行。util.delayedtask延迟。如果在该事件中再次触发该事件，将不会启用原始处理器句柄，但新的处理器句柄将被安排在它的位置。
el.on(click ，function(e，t) {
//执行事件的具体过程
}，这个，{
缓冲：1000 //重复响应事件以一秒为间隔。
});
52.延迟
您可以在注册事件处理程序时添加此选项。设置触发事件后处理功能的延迟时间。
el.on(click ，function(e，t) {
//执行事件的具体过程
}，这个，{
//延迟事件，响应事件后开始计时(此处为1秒)
延迟：1000
});
53.目标目标
您可以在注册事件处理程序时添加此选项。如果要指定另一个目标元素，可以在此配置项上设置它。这确保了在事件升级阶段遇到该元素之前，不会执行该处理功能。
复制代码如下：
el.on(click ，function(e，t) {
//执行事件的具体过程
}，这个，{
//内部的第一个“div”将触发事件。
目标：el.up(div )
});
X.大小
54 .身高
返回元素的偏移高度。
var ht=Ext.fly(elId )。getHeight()；
55 .获取宽度
返回元素的偏移宽度。
var wd=Ext.fly(elId )。getWidth()；
56 .设置高度
设置元素的高度。
Ext.fly(elId )。setHeight()；
57 .设置宽度
设置元素的宽度。
Ext.fly(elId )。setWidth()；
58.getBorderWidth
返回指定边的填充宽度。
var bdr_wd=Ext.fly(elId )。getBorderWidth( lr )；
59 .填充
可以是t，l，r，b或者任意组合。例如，传入lr的参数将获得(l)eft packing(r)right填充。
var padding=Ext.fly(elId )。get padding( lr )；
夹子
保存当前溢出，然后裁剪元素的溢出部分——使用“松开”()将其移除。
Ext.fly(elId )。clip()；
松开夹子
在调用clip()之前，返回原来裁剪的部分(溢出)。
Ext.fly(elId )。松开()；
62.isBorderBox
测试不同的CSS规则/浏览器，确定元素是否使用边框。
if (Ext.isBorderBox) {
//
}
XI。配置
63.getX
返回元素相对于页面坐标的x位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。
var elX=Ext.fly(elId )。getX()
64.getY
返回元素相对于页面坐标的y位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。
var elY=Ext.fly(elId )。getY()
65.getXY
返回元素当前页面坐标的位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。
Var elxy=ext.fly (elid )。Getxy ()//elxy是一个数组
66.setX
返回元素相对于页面坐标的x位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。
Ext.fly(elId )。setX(十)
67.setY
返回元素相对于页面坐标的y位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。
Ext.fly(elId )。塞提(10)
68.setXY
返回元素当前页面坐标的位置。元素必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。
Ext.fly(elId )。setXY([20，10])
getOffsetsTo
返回当前元素和引入元素之间的距离。这两个元素都必须是DOM树的一部分，才能具有正确的页面坐标(display:none或未合并的元素返回false)。
var elOffsets=Ext.fly(elId )。getOffsetsTo(another El)；
向左拐
得到左边的x坐标。
var elLeft=Ext.fly(elId )。get left()；
71 .正确
获取元素右边的x坐标(元素在x位置的宽度)。
var elRight=Ext.fly(elId )。getRight()；
getTop
获取顶部的y坐标。
var elTop=Ext.fly(elId )。getTop()；
getBottom
获取元素底部的y坐标(元素在其y位置的宽度)。
var elBottom=Ext.fly(elId )。getBottom()；
74 .设置左侧
直接用CSS style(而不是setX())来设置元素的左边位置。
Ext.fly(elId )。setLeft(25)
setRight
设置元素cssreight的样式。
Ext.fly(elId )。setRight(15)
76 .机顶盒
直接使用CSS样式(而不是setY())来设置元素的顶部位置。
Ext.fly(elId )。机顶盒(12)
77 .设置底部
设置CSS底部元素的样式。
Ext.fly(elId )。设置底部(15)
78 .设置位置
无论这个元素如何定位，都要设置它在页面上的坐标位置。元素必须是DOM树的一部分才能有页面坐标(显示：无或未添加的元素将返回false作为无效)。
Ext.fly(elId )。setLocation(15，32)
移动到
无论这个元素如何定位，都要设置它在页面上的坐标位置。元素必须是DOM树的一部分才能有页面坐标(显示：无或未添加的元素将返回false作为无效)。
Ext.fly(elId )。移动到(12，17)
位置
初始化元素的位置。如果没有传入预期的位置，并且它还没有被定位，则当前元素将被设置为相对位置。
Ext.fly(elId )。位置(“相对”)
81 .明确定位
加载文档时，清除该位置并重置为默认值。
Ext.fly(elId )。清晰定位()
Ext.fly(elId )。清晰定位(“顶部”)
82 .定位
返回包含CSS定位信息的对象。有用的提示：与setPostioning一起，您可以在执行更新之前拍摄快照，然后可以恢复元素。
var pos=Ext.fly(elId )。getPositioning()
83 .定位
getPositioning()返回的对象用于定位。
Ext.fly(elId )。设置位置({
左：“静态”，
右：“自动”
})
84 .翻译要点
输入页面坐标参数，并将其转换为元素的CSS left/top值。
//{left:translX，top: translY}
var points=Ext.fly(elId )。translatePoints(15，18)；
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。