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)；