ExtJS学习笔记(十二) Ext 获取组件、获取DOM

select 和 query

Ext.query和Ext.select的作用是一致的，同是根据CSS选择符查找出一个或多个元素。区别在于返回类型上。
query方法返回的是JavaScript标准的数组类型；
select方法返回的是CompositeElement类型；
其用法和JQuery的选择器比较类似。
用法：

Ext.query("#xxx") // id为xxx
Ext.query(".xxx") // 包含xxx class
Ext.query("div")  // div
Ext.query("div.xxx") // 包含xxx class的div
Ext.query("[action=\"sss\"]") // 属性action等于sss的元素
Ext.query("input[value=\"2\"]") // 值为2的input元素
等等

up 和 down

up和down根据意思一个向上一个向下
this.up("xxx")获取当前组件的上层 xxx (grid/tree/panel/window 等) 组件
this.down("xxx")获取当前组件的子组件 xxx
具体解释如下：

up(String selector, [Number/Mixed maxDepth] ) : Ext.core.Element
    selector:必选，字符串形式，表示要匹配的组件。
    Maxdepth:可选，表示要匹配的最大深度。
    up方法的API解释为：通过简单的选择，获得相匹配的dom，使用up方法总是返回一个Ext.core.Element，也就是ext的组件。

down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.core.Element
    selector:必选，字符串形式，表示要匹配的组件，
    returnDom：可选，布尔类型，如果为true，则返回DOM节点，而不是Ext.core.Element。值默认为false。
    down方法的API解释，通过选择器,来获得任何深度的子组件，在down方法中，不应该包含组件的id，而应该是组件的xtype。

getCmp、getDom、Get

1、get

参数:id/name/object
返回类型是:Ext.Element的对象(Ext对DOM的封装)
取值方式:Ext.get('name/id').dom.value

// 三个方法都可以得到一个与 DOM 节点 EXTJS 对应的 Ext 元素
var e = new Ext.Element("EXTJS");
alert(Ext.get("EXTJS"));
alert(Ext.get(document.getElementById("EXTJS")));
alert(Ext.get(e));

2、getCmp

参数:id
返回类型是:Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象
取值方式:Ext.getCmp('id').getValue()

    // 在代码中，我们使用 Ext.getCmp("h2") 来得到 id 为 h2 的组件，并调用其 setTitle 方法来设置该面板的标题。
    Ext.onReady(function(){
       Ext.create("Ext.panel.Panel",{
            id:"h2",
            title:"",
            renderTo:"EXTJS",
            width:300,
            height:200
       });
       Ext.getCmp("h2").setTitle("新的标题");
    });

2、getDom

参数:DOM 节点的 id、DOM 节点对象或 DOM 节点对应的 Ext 元素(Element)等。
返回类型是:DOM 节点对象

// 三个语句返回都是同一个 DOM 节点对象。
var e = new Ext.Element("EXTJS");
Ext.getDom("EXTJS");
Ext.getDom(e);
Ext.getDom(e.dom);