ExtJS之 操作DOM元素

选择器:

Ext.select()  //样式表选择器

 

Ext.Query()   //参数可以使 元素,属性,伪类,css样式

返回值 是 符合条件的节点的数组

alert(Ext.query("font")[0].id);

alert(Ext.query("#aaaa")[0].id);
          alert(Ext.query(".s")[0].id);
          alert(Ext.query("div font")[0].id);

 

Ext.getCmp(‘组件id’)   //获取组件对象

 

Ext.getDom() 通过制定的id,或DOm节点,或者Element元素,获取 HTMLElement(html元素)

 

Ext.core.DomHelper

添加元素:

Ext.core.DomHelper.append(Ext.get('aaaa'), "<font color=red>aaaa</font>");

-----------------------------------------

<img src="a.png" id="asd" style="height: 200px" />

Ext.core.DomHelper.applyStyles(Ext.get('asd'), "width:300px");

------------------------------------------

Ext.core.DomHelper.insertAfter(Ext.get('asd'), { tag: 'li', id: 'news', html: "<div id='asas'>ssss</div>" });

//Ext.core.DomHelper.insertBefore(Ext.get('asd'), { tag: 'li', id: 'news', html: "<div id='asas'>ssss</div>" });

//Ext.core.DomHelper.insertFirst(Ext.get('asd'), { tag: 'li', id: 'news', html: "<div id='asas'>ssss</div>" });

-------------------------------------------------

控制元素显隐.

var btn = new Ext.Button({
                text: 'show',
                Id: 'ss',
                height: 30, width: 100,
                renderTo: document.body,
                listeners: {
                    click: function () {

                        Ext.get('asd').show(true);
                    }
                }

            })
            var btn2 = new Ext.Button({
                text: 'hide',
                Id: 'ss',
                height: 30, width: 100,
                renderTo: document.body,
                listeners: {
                    click: function () {

                        Ext.get('asd').hide(true);
                    }
                }

            })

var btn3 = new Ext.Button({
               text: 'opacity',
               Id: 'ss',
               height: 30, width: 100,
               renderTo: document.body,
               listeners: {
                   click: function () {

                       Ext.get('asd').setOpacity(0.2);
                   }
               }

           })

 

Html –>    <img src="a.png" id="asd"  />

 

 

内容控制:

 

Ext.fly('s').update('123'); 改变 innerHTML属性

Ext.fly('s').load({ url: 'ajax.htm' });  载入 ajax.htm页面的内容(body内的)

 

常见的操作DOM方法:

Ext.fly('asd').parent()  获取父节点,返回的是Ext.Element

Ext.fly('asd').parent("div")   获取的父节点 必须是Div的元素.

Ext.fly('asd').parent("div").dom.id  获取 父元素的id

---------------------------------

html:   <font id="aaaa">
                       <img src="a.png" id="asd" style="height: 200px; width: 200px" />

             </font>

代码:

var config = { tag: 'p', html: 'ssssss' };
          var f = Ext.get('aaaa').createChild(config);

代码:

var config = { tag: 'p', html: 'ssssss' };
           var f = Ext.get('aaaa').createChild(config, Ext.get('aaaa').first());

转载于:https://www.cnblogs.com/Mr-Joe/archive/2012/03/02/2376948.html