ext.get 方法介绍。

最新推荐文章于 2021-01-26 23:16:44 发布

fanpeii

最新推荐文章于 2021-01-26 23:16:44 发布

阅读量1.2k

点赞数

分类专栏： Ext 技术文章标签： function button stylesheet callback input class

本文链接：https://blog.csdn.net/fanpeii/article/details/7066973

版权

Ext 技术专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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>

fanpeii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext.get 方法介绍。

var myDiv = Ext.get('myDiv'); 获取ext元素 Ext.Element对象 myDiv.setWidth(50); 设置宽度myDiv.setOpacity(1); 设置透明度 1代表100%myDiv.removeClass("red"); 移除元素的red样式表myDiv.
复制链接

扫一扫

专栏目录