提问一：啥是ext？
ext是一套JS框架，他可以创建RIA富客户端程序，可以像cs架构中的桌面应用那样，界面丰富多线夺目炫丽，ajax遍地都是，即点即改，提高用户体验,一个字---爽。
HelloWord程序
<html>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" /><!--解决中文乱码-->
<head>
<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>
<!-- 本地化的脚本引用在这里 -->
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert('EXT欢迎你', '为你开天辟地');
});
</script>
<title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
我们平时要获取一个HTMl文档里的节点, 该怎么做?
var myDiv = document.getElementById('myDiv');
没错, 这样会工作的很好, 而且现在大多数人也是这样来搞的, 但是这样在页面里一个两个可以, 多了就会很头疼, 于是乎YUI-Ext给我们想到了一个简单的方法.
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
简单吧(如果用Prototype.js里的语法更简单^_^).这样就可以得到一个id为myDiv的元素, 然后把他的引用赋值给变量myDiv, 这以后, 你就可以对这个div进行操作了, 比如:
myDiv.highlight();// 这个元素的背景色会从高亮的黄色渐渐淡出.
myDiv.addClass('red');// 加入一个自定义的CSS样式类 (在 ExtStart.css 里面定义)
myDiv.center();// 在浏览器里居中这个元素
myDiv.setOpacity(.25);// 给这个元素加上25%的半透明效果
现在我们知道怎样通过元素的ID来选择一个元素, 下面我们看看怎么选择一批元素.
Ext.select('p').highlight();
高亮所有标签为P的元素. 通过这个例子你就可以看到, 我们来选择页面上的一批元素有多么简单, Ext为我们提供了一个接口, 通过这个接口我们可以来获取一批想要的元素, 并为他们设置属性, 不用循环, 不用遍历每一个元素.仅仅这些, 还不够, Javascript是用事件来驱动的, 我们呢, 就来看看怎样响应一个事件
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
这样就为页面里ID为myButton的按钮加上了一个click事件, 触发这个时间以后会弹出一个提示框. 嘿嘿, 有没有发现, 我们不用再在页面里的元素上, 写上一个 onclick='showMessage', 然后在去JS里面, 写上一个showMessage函数了. 我们再来给所有的P标签都加上单击事件, 方法同上
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
通过上面两个例子, 我们可以看到, 我们可以把一个事件处理用很简单的方式定义在一行里, 不用给出函数名称, 只写上函数体, 就是所谓的匿名函数, 同样我们也可以在另外的地方写出一个函数, 然后把函数赋值给一个变量, 我们再在这里来使用它.
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
这次我们先实现了一个函数, 然后赋值给paragraphClicked, 在事件调用的时候我们把这个句柄传了进去, 这样也可以实现事件的相应^_^.我们再来看看他还能干什么.
Ext.onReady(function() {
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
在所有的P标签上单击的时候, 都会高亮这个段落, 然后在淡出, 酷吧..下面我们再来看看更酷的, 消息框的使用.我们在上面的高亮语句下面再加上几句
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});