Ext.onReady(function () {

    Ext.create('Ext.panel.Panel', {

        title: '我的面板',

        width: '100%',

        height: 400,

        renderTo: Ext.getBody(),

        html: '<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div><input id=inp value=123 /><form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form>'

    });

    //查询系最常用的方法:

    //Ext.dom.Element   get  fly   getDom

    var d1 = Ext.get('d1');

    var sp = Ext.get('sp');

    //查询系方法：

    //1: contains：判断元素是否包含另一个元素

    alert(d1.contains(sp));

    alert(d1.contains('sp'));

    //2: child：从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素，并不能返回数组) ,2个参数 第二个参数是可选的 如果为true表示取得的是原生的HTMLElement元素

        var ch1 = d1.child('span');    //Ext.dom.Element

        alert(ch.dom.innerHTML);

        var ch2 = d1.child('span',true);    //HTMLElement

        alert(ch.innerHTML);

    //3: down：选择与选择符匹配的元素的子元素//findParentNode、up：查找与简单选择符匹配的元素的父元素

        var ch1 = d1.down('#d2');

        alert(ch1.dom.innerHTML);

    //4: first：选择元素第一个子元素 //last：选择元素的最后一个子元素

        var f1 = d1.first('div');

        alert(f1.dom.innerHTML);

    //5: findParent：查找与简单选择符匹配的元素的父元素 //parent：返回元素的父元素

        var parent =  sp.findParent('div');

        alert(parent.innerHTML);

    //6: is：判断元素是否匹配选择符

        alert(d1.is('div'));

    //7: next：选择元素同层的下一个元素 //prew：选择元素同层的上一个元素

        var next = sp.next();

        alert(next.dom.nodeName);

    //8: Ext.query：根据选择符获取元素  (Ext.dom.Element.query)

        var arr = Ext.query('span','d1');    //HTMLElement[]

        Ext.Array.each(arr , function(item){

            alert(item.innerHTML);

        });

    //9: Ext.select/Ext.dom.Element.select：根据选择符获取元素集合

    // 返回的都是元素集合: Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element)

    // 参数说明： 3个参数 ，

    //    1：selector 选择器  (不要使用id选择器)

    //  2：返回的集合对象（boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement）

    //  3: 指定的根节点开始查找

        var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite

        Ext.Array.each(list1.elements,function(el){

                alert(el.innerHTML);

        });

        var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement

        Ext.Array.each(list2.elements,function(el){

                alert(el.dom.innerHTML);

        });    

    //操作dom系的方法：

    //1:appendTo：将当前元素追加到指定元素中（这2个元素都必须存在document里）

    sp.appendTo(Ext.get('d2'));

    sp.appendTo('d2');

    //2:appendChild：在当前元素中追加元素

    sp.appendChild('d2');

    //3:createChild：在元素中插入由DomHelper对象创建的元素

        sp.createChild({

            tag:'ol' ,        //orderlist  unorderlist

            children:[

                {tag:'li' ,html:'item1'},

                {tag:'li' ,html:'item2'}

            ]

        });

    //4:inertAfter：将元素插入到指定元素之后

    //5:inertBefore：将元素插入到指定元素之前

    //6:inertSibling：在当前元素前或后插入（或创建）元素（同层）。

    //7:insertHtml：在当前元素内插入HTML代码

    //8:replace：使用当前元素替换指定元素

    //9:replaceWith：使用创建的元素替换当前的元素    

    //10:remove：移除当前元素

    sp.remove();

    //11:wrap：创建一个元素，并将当前元素包裹起来。

    sp.wrap('<h1></h1>');

    //操作样式系的方法：

    //1：addCls：增加CSS样式到元素，重复的样式会自动过滤

    sp.addCls('red');

    //2:applyStyles：设置元素的style属性

    sp.applyStyles('backgroundColor:blue');

    sp.applyStyles({backgroundColor:'yellow'});

    //3:setStyle：为元素设置样式

    sp.setStyle('backgroundColor','green');

    sp.setStyle('fontSize','40px');

    //4:getStyle：返回元素的当前样式和计算样式

    alert(sp.getStyle('fontSize'));

    alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));

    //5:getStyleSize：返回元素的样式尺寸

    alert(Ext.encode(sp.getStyleSize()));

    //6:setOpacity：设置不透明度

        var d2 = Ext.get('d2');

        d2.setStyle('backgroundColor','red');

        d2.setStyle('width','200px');

        d2.setStyle('height','200px');

        d2.setOpacity(.3);    // 0~1

    //7:addClsOnClick添加样式当点击该元素的时候

        var d2 = Ext.get('d2');

        d2.addClsOnClick('red');

    //8:addClsOnOver添加样式当鼠标移动到元素上的时候

        var d2 = Ext.get('d2');

        d2.addClsOnOver('red');

    //9:getMargin：返回值具有top、left、right、bottom属性的对象，属性值为响应的元素margin值。

        var d2 = Ext.get('d2');

        alert(d2.getMargin('b')); //r l t b

        alert(Ext.encode(d2.getMargin()));

    //10:removeCls：删除元素的样式

        var d2 = Ext.get('d2');

        d2.addCls('red');            //String/String[] className

        d2.removeCls('red');        //String/String[] className

    //11:尺寸、定位

        var d2 = Ext.get('d2');

        alert(Ext.encode(d2.getSize()));

        alert(d2.getX());

        alert(Ext.encode(d2.getXY()));

        sp.moveTo(100,100);

    //一：为元素添加事件

    //1 : addKepMap：为元素创建一个KeyMap对象

        var inp = Ext.get('inp');

        inp.addKeyMap({        //Ext.util.KeyMap ====>Class

            key:Ext.EventObject.A ,            //Ext.EventObject

            ctrl:true ,

            fn:function(){

                alert('按ctrl+A ，执行!!');

            } ,

            scope:this

        });

    //2 : addKeyListener：为KeyMap绑定事件

    //参数说明： String/Number/Number[]/Object key, Function fn, [Object scope]

    //    var inp = Ext.get('inp');

        inp.addKeyListener({

            key:Ext.EventObject.X ,

            ctrl:false

        },

        function(){

            alert('x执行了..');

        },

        this);

    //二：元素绑定常用事件

        var inp　= Ext.get('inp');

        inp.on('click',function(){

            alert('执行了...');

        });

        inp.un('click');

        inp.focus();

    //三:其他重要且常用的方法：

    var inp = Ext.get('inp');

    var sp = Ext.get('sp');

    //1: center：使元素居中

    inp.center('d1');

    //2: clean：清理空白的文本节点

    //3: createShim：为元素创建一个iframe垫片保证选择或其他对象跨域时可见

    //4: getLoader：返回ElementLoader对象//11: load：直接调用ElementLoader的load方法为元素加载内容

        var loader = inp.getLoader(); //ElementLoader

        loader.load({

            url:'base/004_base06_dom2_loader.jsp' ,

            renderer:function(loader ,response){

                //把对象转换成字符串表示形式：Ext.encode

                //把一个字符串转换成javascript对象： Ext.decode

                var obj = Ext.decode(response.responseText);

                Ext.getDom('inp').value = obj.name ;

            }

        });

    //5: highlight 高亮显示特效

        sp.highlight();

    //6: show 、hide显示隐藏元素      //fadeIn、fadeOout淡入淡出

        var d2 = Ext.get('d2');

        d2.setStyle('width','100px');

        d2.setStyle('height','100px');

        d2.setStyle('backgroundColor','red');

        d2.show({duration: 2000});

        d2.hide({duration: 2000});

    //7: ghost  元素移动特效

        d2.ghost('b', { duration: 2000 }); // r/b/l/t

    //8: slideIn、slideOut向上向下滑动

    d2.slideIn('b',{duration: 2000});

    d2.slideOut('r',{duration: 2000});

    //9: getValue：如果元素有value属性，返回其值

    alert(inp.getValue());

    //10: normalize：将CSS属性中的连接符号去掉，例如将“font-size”转为fontSize这样。

    //11 :mask：遮罩当前元素，屏蔽用户操作。 unmask：移除遮罩

        Ext.getBody().mask('请稍等..');

        //    window.setTimeout(function(){

        //        Ext.getBody().unmask();

        //    },2000);

        Ext.defer(function(){

            Ext.getBody().unmask();

        },2000);

    //12: repaint：强迫浏览器重新绘画元素

    //13: serializeForm：序列化为URL编码的字符串

    alert(Ext.dom.Element.serializeForm('f1'));

    //14: update：更新元素的innerHTML属性

    //15: unselectable：禁用文本选择

    inp.unselectable();

});