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