ext基础

一、获取元素（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);

 

 

 

Element实例方法：

child(selector, returnDom) //选择符合选择器条件的子节点(只传回一个！) 【后代】

down(selector, returnDom) //选择符合选择器条件的直接子节点(也就是只返回一个节点)【子元素】

first(selector, returnDom) //选择符合选择器条件的第一个子节点(只返回一个节点，自动跳过文字节点)

last(selector, returnDom) //选择符合选择器条件的最后一个子节点(只返回一个节点，自动跳过文字节点)

next(selector, returnDom) //选择符合选择器条件的子节点的下一个兄弟节点(只返回一个节点，自动跳过文字节点)

prev(selector, returnDom) //选择符合选择器条件的子节点的上一个兄弟节点(只返回一个节点)

 

parent(selector, returnDom) //选择符合选择器条件的子节点的父节点(只返回一个节点)

findParent/findParentNode(selector, maxDepth, returnEl) //查找符合条件的父节点，两者的差别在于  

// findParent找到的父节点会放入缓存表，findParentNode则不会。注意，父节点的兄弟节点不在查找范围之内(只返回  

一个)【特殊：两个默认返回HTMLElement，最特殊的是findParent居然还查找自己】

up(simpleSelector, maxDepth) //查找符合条件的父节点。注意，父节点的兄弟节点不在查找范围之内(只返回一个) 

 

 

Ext.DomQuery类方法:

最常用的DomQuery方法有is()、select()、filter()与compile()。

要注意一点，除了is()、compile()外，select()与filter()会返回符合条件的数组，

而数组中的元素是HTML元素而不是Element实例。

如果需要使用Element的方法，最好先用get()/fly()生成Element实例

 

is(el, selector)//如果el符合selector规则，就返回true；否则返回false

select(selector, root)//返回数组，其中包含所有符合selector规则的元素。

filter(el, selector, nonMatches) //用来过滤数组中符合或不符合选择器条件的元素。nonMatches为true时过滤掉符合条件的。

compile(selector)//编译常用的查找条件并返回函数，同时，函数会接收一个参数root，也就是要查找的节点，通过指定查找  

起点，可以让查找更有效率

 

Ext类中也提供了query()作为Ext.DomQuery.jsSelect()的简写，jsSelect()能够接收的所有参数query()也可以接收。

在Ext.query()或是Ext.DomQuery.jsSelect()返回符合条件的数组时，会经常在遍历每个元素时调用特定函数。

因此，ExtJS提供了像jQuery.each()一样的功能——Ext.each()，用来协助处理数组元素。

 

Ext.each(array, function, scope)//用来遍历数组元素 

对于function参数来说，每个function在调用时都会收到三个参数——item、index、allItems，

分别代表当前遍历到的元素、元素在数组中的索引值以及传入each()的数组。

scope提供了一种非常方便的方法，使得程序员能够修改在函数里执行的作用域。

如果不指定作用域，那么默认的作用域将是当前遍历到的元素，也就是元素。

如果有另外定义的函数要调用，就必须进行全局引用或是指定第三个参数为特定的作用域：

 

var applyStyles = function(el){  

el.applyStyles("border-bottom:1px solid #000;");  

}  

Ext.each(songs, function(item, index, items){  

applyStyles(Ext.fly(item));  

},this);// 或是指派window

 

applyStyles()定义在window的作用域下，如果不在调用Ext.each()时提供这个作用域，

那么在遍历时是没有办法调用的。所以，将window作用域指定给第三个参数，

就可以在遍历时调用applyStyles()。作用域在设计ExtJS时经常会用到，务必熟悉这个概念。

 

要使用Element的方法移除DOM元素并不容易，因为必须先找到删除的节点，然后再调用remvoe()。

这种方式需要程序员清楚地知道自己要删除的节点，以免造成错误的设计。

如果要删除大量节点，可以借助DomQuery，将符合条件的节点取出并存入数组，

再借助Ext.each()遍历数组，获取HTMLElement。

然后调用Ext.removeNode()进行移除或者先调用Ext.fly()获取Element，再调用Element的remove()方法。

直接把HTML元素传给Ext.removeNode()是最高效的，

因为Element.remove()底层也是通过调用Ext.removeNode()来移除元素。