`

Ext学习之3_类Element和Fx5

EXT 
阅读更多
Ext.namespace("com.deng");
/**
 * 除了Ext.Fx类之外,Ext.Element也提供了一些动画函数
 */
/**
 * setWidth(Number width, Boolean/Object animate)
 * 设置元素宽度
 * 参数:
 *    width:新宽度
 *    animate:是否以动画方式设置新的宽度,为true时有动画效果,也可以配置动画参数
 *  
 *  示例:
 *   以动画方式将div拉宽到500px
 */
/**
Ext.onReady(function(){
	Ext.get("a1").applyStyles({
		position: "absolute",
		left: 300,
		top: 100,
		width: 200,
		height: 200,
		backgroundColor: "red"
	}).setWidth(500,true);
});
*/
/**
 * setHeight(Number height, Boolean/Object animate)
 * 设置高度,意义同上
 */

/**
 * setSize(Number width,Number height,Boolean/Object animate)
 * 同时设置元素的宽度和高度,并设置是否以动画显示
 * 参数:
 *  width:新的宽度
 *  height:新的高度
 *  animate:是否带有动画效果,或者配置动画参数
 */
/**
Ext.onReady(function(){
	Ext.get("a1").applyStyles({
		position: "absolute",
		left: 300,
		top: 100,
		width: 200,
		height: 200,
		backgroundColor: "red"
	}).setSize(500,500,true);
});
*/
/**
 * setBounds(Number x, Number y, Number width, Number height, Boolean/Object animate)
 * 设置元素的位置和大小
 * 参数:
 *    x: 新的左上角x坐标
 *    y: 新的左上角y坐标
 *    width: 新的宽度
 *    height:新的高度
 */
/**
Ext.onReady(function(){
	Ext.get("a1").applyStyles({
		position: "absolute",
		left: 100,
		top: 100,
		width: 100,
		height: 100,
		backgroundColor: "red"
	}).setBounds(0,0,500,500,true);
});
*/
/**
 * show(Boolean/Object animate): 显示元素
 * hide(Boolean/Object animate): 隐藏元素
 */

 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics