- 浏览: 217156 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
henchong:
如果提示信息全是数字的话,是不会自动换行的,不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻:
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen:
楼主能解释下为啥要用air技术呢,是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren:
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子:
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
CartoonExt.js
//图片宽
var WIDTH=300;
//图片高
var HEIGHT=262;
function reset() ...{
//以Ext获得指定元素,并指定此元素左边距、上方边距、右边距、下方边距
Ext.get('target').highlight().setBounds(10,10,WIDTH+10,HEIGHT+10);
}
function act() ...{
//刷新
reset();
//在指定时间内移动到指定位置
Ext.get('target').setBounds(150,80,WIDTH+150,WIDTH+80,...{duration:1.0});
}
/**//**
* 播放连续动作
*/
function Anime()...{
Ext.get('target').highlight().fadeOut().fadeIn().pause(2).switchOff().puff();
//IE下不支持switchOn()方法,这是一个Ext的bug
}
/**//**
* 淡出
*/
function fadeout() ...{
//设定最后不透明度为0.0(完全透明),持续时间为1.0,方式为easeNone
Ext.get('target').setOpacity(0.0,...{ duration:1.0,easing:'easeNone'});
}
/**//**
* 淡入
*/
function fadein() ...{
Ext.get('target').setOpacity(1.0,...{duration:1.0,easing:'easeNone'});
}
function act2() ...{
reset();
var easingMethod=document.getElementById('easing').value;
Ext.get('target').setLocation(150,150,...{
duration:1.0,
easing:easingMethod
});
}
CartoonExt.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CartoonExt</title>
<!--加载ExtJs资源-->
<script type="text/javascript" src="adapter/ext/ext-base.js">...
</script>
<script type="text/javascript" src="ext-all.js">...
</script>
<!--我的js-->
<script type="text/javascript" src="CartoonExt.js">...
</script>
</head>
<body>
<div style="width:300px; height:450px;">
<!--被移动的元素-->
<img id="target" src="sprite1.jpg">
</div>
<div style="text-align: center;">
<input type="button" value="刷新" onclick="reset();">
<input type="button" value="逐渐放大" onclick="act();">
<input type="button" value="淡出" onclick="fadeout();">
<input type="button" value="淡入" onclick="fadein();">
<input type="button" value="连续动画" onclick="Anime();">
<BR>
<BR>
效果列表
<select id="easing">
<option value="easeNone">easeNone</option>
<option value="easeIn">easeIn</option>
<option value="easeOut">easeOut</option>
<option value="easeBoth">easeBoth</option>
<option value="easeInStrong">easeInStrong</option>
<option value="easeOutStrong">easeOutStrong</option>
<option value="easeBothStrong">easeBothStrong</option>
<option value="elasticIn">elasticIn</option>
<option value="elasticOut">elasticOut</option>
<option value="elasticBoth">elasticBoth</option>
<option value="backIn">backIn</option>
<option value="backOut">backOut</option>
<option value="backBoth">backBoth</option>
<option value="bounceIn">bounceIn</option>
<option value="bounceOut">bounceOut</option>
<option value="bounceBoth">bounceBoth</option>
</select>
<input type="button" value="执行" onclick="act2();">
</div>
</body>
</html>
部分参数如下:
fadeIn( [Object options] ) : Ext.Element 渐显 options参数有以下属性
callback:Function 完成后的回叫方法
scope:Object 目标
easing:String 行为方法 默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的
easeNone:匀速
easeIn:开始慢且加速
easeOut:开始快且减速
easeBoth:开始慢且减速
easeInStrong:开始慢且加速,t的四次方
easeOutStrong:开始快且减速,t的四次方
easeBothStrong:开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
afterCls:String 事件完成后元素的样式
duration:Number 事件完成时间(以秒为单位)
remove:Boolean 事件完成后元素销毁?
useDisplay:Boolean 隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function 事件完成后应用样式
block:Boolean 块状化
concurrent:Boolean 顺序还是同时执行
stopFx :Boolean 当前效果完成后随合的效果是否将停止和移除
fadeOut( [Object options] ) : Ext.Element 渐隐
fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
例:el.fadeIn({duration:5,endOpacity:0.7});
frame( [String color], [Number count], [Object options] ) : Ext.Element 边框变亮扩展然后渐隐
例:el.frame("ff0000", 10, { duration: 3 })
ghost( [String anchor], [Object options] ) : Ext.Element 渐渐滑出视图,anchor定义
tl 左上角(默认)
t 上居中
tr 右上角
l 左边界的中央
c 居中
r 右边界的中央
bl 左下角
b 下居中
br 右下角
例:
el.ghost('b', {
easing: 'easeOut',
duration: .5
remove: false,
useDisplay: false
});
hasActiveFx() : Boolean 指示元素是否当前有特效正在活动
hasFxBlock() : Boolean 是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element 高亮显示当前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element 暂停
puff( [Object options] ) : Ext.Element 元素渐大并隐没
例:el.puff({
easing: 'easeOut',
duration: .5,
remove: false,
useDisplay: false
});
scale( Number width, Number height, [Object options] ) : Ext.Element 缩放
例:el.scale(
[element's width],
[element's height], {
easing: 'easeOut',
duration: .35
});
sequenceFx() 特效序列
shift( Object options ) : Ext.Element 位移,并可重置大小,透明度等
例:
el.shift({
width: [element's width],
height: [element's height],
x: [element's x position],
y: [element's y position],
opacity: [element's opacity],
easing: 'easeOut',
duration: .35
});
slideIn( [String anchor], [Object options] ) : Ext.Element 淡入
slideOut( [String anchor], [Object options] ) : Ext.Element 淡出
例:el.slideIn('t', {
easing: 'easeOut',
duration: .5
});
stopFx() : Ext.Element 停止特效
switchOff( [Object options] ) : Ext.Element 收起并隐没
例:
el.switchOff({
easing: 'easeIn',
duration: .3,
remove: false,
useDisplay: false
});
syncFx() : Ext.Element 异步特效
发表评论
-
extjs+air开发
2009-06-24 21:41 3040一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1871该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 790当使用了ExtJs后,脚本documentElement.cl ... -
Ext.Ajax
2009-02-27 22:12 1198其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1662使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4595巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1583tab在ext里很常用,在点开N个tab后,是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3296<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1208ext树形菜单加上右键菜单是不是很酷,ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2584page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1578本实例将在带分页的表格基础上进行扩展,增加搜索功能。由于本实例 ... -
带分页的表格
2009-01-09 13:43 1045主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2591<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2904<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 843对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类,构建方便的grid操作
2009-01-09 13:13 1461在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1982<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1826ext提供的树本身就有拖 ... -
可直接编辑节点的tree
2009-01-09 12:03 1714其实代码并不是很复杂,只是在原有的树形添加一个TreeEdit ... -
Checkbox与RadioGroup的使用方法
2009-01-09 12:03 7105Ext提供的Checkbox与Radio, ...
相关推荐
1. **Ext Core**:这是EXT的基础库,提供了事件处理、DOM操作、动画效果等功能,是整个框架的基础。 2. **Widgets**:EXT的组件库,包括各种UI元素,如按钮、表单字段、面板等。每个组件都是一个独立的类,可以独立...
在Ext.fx中,Tween动画通常用于改变元素的颜色、大小、位置等属性。 2. **Animation**:Animation是对Tween的封装,它可以组合多个Tween,并控制它们的执行顺序、速度等。 二、Ext.fx的使用 1. **基本用法**:创建...
5. 动画和特效(Animations and Effects):EXT 3.3提供了丰富的动画效果,如淡入淡出、滑动等,以及如何添加自定义动画。 6. 工具栏和菜单(Toolbars and Menus):如何创建和使用工具栏、下拉菜单等交互元素。 7. ...
除此之外,EXT3.0还包括了布局管理、拖放功能、动画效果和Ajax交互等功能。布局管理允许开发者灵活地组织组件,实现响应式设计。拖放功能使得用户界面更加交互性,而Ajax交互则简化了与服务器的通信过程。 EXT3.0...
EXT的核心库包含了一系列基础功能和工具,如Element、Event对象、动画效果等,是EXT框架的基础。 总结: EXT中文手册是一个全面的参考资料,涵盖了EXT开发的各个层面,无论你是初学者还是经验丰富的开发者,都能...
它不仅涵盖了UI组件库、数据处理、MVC架构、事件处理和动画效果等方面的知识点,还提供了详尽的代码示例和最佳实践指导,帮助开发者快速上手并充分发挥Ext框架的强大功能。无论是初学者还是经验丰富的开发者,都可以...
Ext Core是一个轻量级的库,它提供了多种功能,包括DOM操作、Ajax交互、事件处理、动画效果以及模板和数据绑定机制。该库遵循MIT许可证,适合用于构建动态网页和简单的应用程序。 在开始使用Ext Core时,你可以从...
EXT中文教程旨在帮助开发者理解和应用EXT库,这是...EXT的核心库包含了最基础的组件和功能,如Element操作、事件处理、动画等。理解EXT的核心是掌握整个框架的关键,这将使你能够更高效地利用EXT的特性来构建Web应用。
在`EXT核心API详解(三)-Ext.Element.txt`中,你将了解到如何选择元素、添加和移除CSS类、处理事件、动画效果以及布局调整。 2. **Array, Date, Function, Number, String**: 在`EXT核心API详解(二)-Array Date ...
在"EXT页面波浪滚动效果"中,开发者可能利用了JS的定时器(setTimeout或requestAnimationFrame)来控制动画的帧率,以及数学函数(如sin、cos)来模拟波浪的起伏变化。此外,可能还涉及到CSS3的transform属性,用于...
在EXT框架中集成FusionCharts是一项常见的任务,用于在Web应用程序中展示动态、交互式的图表。EXT是一个强大的JavaScript库,用于构建数据驱动的富客户端应用,而FusionCharts则是一款功能丰富的图表组件,支持多种...
1. Ext.Element:基础元素对象,提供了DOM操作、事件处理、动画效果等方法。 2. Ext.util.Observable:观察者模式实现,用于事件监听和触发。 3. Ext.data.Store:数据存储,与数据源进行交互,支持远程数据加载和...
核心(Core)部分则涵盖了EXT的基本功能,包括DOM操作、事件处理、动画效果等,是EXT所有特性的基石。 总的来说,EXT中文手册是一份全面的EXT学习资源,无论你是初学者还是经验丰富的开发者,都能从中找到有价值的...
"EXT核心API详解(六)-Ext.Fx.txt"涉及的是Ext的动画效果和特效,如淡入淡出、滑动、缩放等,这些功能让应用程序的交互更加生动。 最后,"EXT核心API详解(七)-Ext.KeyNav KeyMap JSON Format DelayedTask TaskRunner...
"网络技术爱好者家园.url"、"优秀投稿动画奖励计划.url"、"红黑联盟 软件说明.url"、"网络技术速成.url"则可能是与EXT学习相关的网站链接,这些链接可能包含EXT的最新资讯、教程、社区讨论或者是网络技术的学习资源...
EXTJS 的核心库包含基础的 DOM 操作、事件处理、动画等功能,是所有组件和功能的基础。深入理解这部分内容能让你更好地掌控整个框架。 EXTJS 的学习是一个持续的过程,涉及到前端开发的各个方面,包括 HTML、CSS、...
Ext类是EXT API的基础,它定义了许多通用的方法和属性,如构造函数、事件处理、动画效果等。Ext对象还提供了一些全局函数,如Ext.util.Format用于字符串格式化,Ext.apply用于对象属性的复制,以及Ext.emptyFn作为空...
1. `ext-all.js`:这是EXT库的完整版本,包含了所有EXT组件、布局、数据处理、动画效果等功能。开发者通常在项目中引入这个文件,以便利用EXT提供的全部功能。然而,由于它较大,可能会增加页面加载时间,因此在对...