var myDiv = Ext.get('myDiv'); 获取ext元素 Ext.Element对象
myDiv.setWidth(50); 设置宽度
myDiv.setOpacity(1); 设置透明度 1代表100%
myDiv.removeClass("red"); 移除元素的red样式表
myDiv.moveTo(0,0); 移动到0,0这个位置。
myDiv.highlight(); 高亮显示,而且颜色渐渐的消退
myDiv.setWidth(100);设置宽度
myDiv.setWidth(100, true);设置宽度,扩展或者收缩的时候利用动画效果
myDiv.setWidth(100, {duration: 2, callback:callback:function(){alert('渐变完成')}, scope: this});设置宽度,按设置次数,进行收缩或者扩张。
2.getCmp 获取ext组件,是Ext.ComponentMgr.get()的简写形式,ext每一个组件,都会注册到ComponentMgr中,只要得到他的ID,就可以获得对应的组件。
<script type="text/javascript">
Ext.onReady(main)
function main()
{
var h=new Ext.Panel({
id:"h2",
title:"旧的标题",
renderTo:'hello',
width:300,
height:200,
});
Ext.getCmp("h2").setTitle("新的标题");
};
</script>
3.getDom 获取文档中的Dom结点
Ext.onReady(main)
function main()
{
var e=new Ext.Element("hello");
Ext.getDom('hello');
Ext.getDom(e);
Ext.getDom(e.dom);
};
以上3个命令,获取的命令都是一样的。
4.getBody 直接获得文档中与document.body这个DOM结点对应的EXT元素
Ext.onReady(main);
function main()
{
var h=new Ext.Panel({
title:'测试',
width:300,
height:300,
});
h.render(Ext.getBody());
};
5,query select
query 返回搜索到的元素数组,可以使用循环来处理每一个对象
select 返回的是一个 Ext.CompositeElement类型的对象。
<input type="button" value="select('p')" onClick="Ext.select('p').highlight();">
<input type="button" value="select('div.red')" onClick="Ext.select('div.red').highlight();">
<p>p1</p>
<br>
<div class="red">div.red1</div>
<br>
<p>p2</p>
<br>
<div class="red">div.red2</div>
<br>
<p>p3</p>
<br>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>11.util</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<style type="text/css">
.red {
background: red;
}
</style>
<script type="text/javascript">
function selectP() {
var array = Ext.query('p');
for (var i = 0; i < array.length; i++) {
Ext.get(array[i]).highlight();
}
}
function selectDiv() {
var array = Ext.query('div.red');
for (var i = 0; i < array.length; i++) {
Ext.get(array[i]).highlight();
}
}
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<input type="button" value="select('p')" onClick="selectP()">
<input type="button" value="select('div.red')" onClick="selectDiv()">
<p>p1</p>
<br>
<div class="red">div.red1</div>
<br>
<p>p2</p>
<br>
<div class="red">div.red2</div>
<br>
<p>p3</p>
<br>
</body>
</html>