Ext学习之3_种Element和Fx5

Ext学习之3_类Element和Fx5

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): 隐藏元素
 */