EXT使用小结一
作者:卢海
一、基本使用步骤:
1、 在web项目中的webRoot文件夹下,建立extjs 文件夹
i. 将ext 的文件解压,将ext-all.js 拷贝到此文件夹下
ii. 将\adapter\ext下的ext-base拷贝到此文件夹下
iii. 将\source\locale下的ext-lang-zh-CN.js拷贝到此文件夹下
iv. 将resources文件夹全部copy到此文件夹下
v. 将\resources\css 中的ext-all.css拷贝到此文件夹下
2、 配置ext的快捷方式:
i. 窗口-首选项-spket-javascriptprofiles-
ii. 新建ext 快捷方式并设置为默认
iii. 加入extJS库
iv. 将项目中extjs文件夹下的三个js核心文件导入
3、 建立html文件导入相应文件(注意顺序)
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="1.js"></script>
1. js 为自己定义的js文件
4、 实例
a) 弹出对话框实例
Ext.onReady(function(){
Ext.MessageBox.minWidth=400;
}
)
function aa(){
Ext.MessageBox.alert("biaoti","neirong");
Ext.Msg.alert("biaoti","neirong");
}
说明:ext的OnReady事件是在onload事件之后执行,相当于初始化操作,Ext.MessageBox.minWidth=400;是设置对话框的最小宽度值,避免出现对话框的大小不匹配的问题
Ext.MessageBox.alert("biaoti","neirong");
Ext.Msg.alert("biaoti","neirong");
以上两句代码意义相同可通用
b) 在EXT中添加事件实例
1、 在JS中新建类并添加该类的事件
Person =function (){
this.addEvents("talk","sleep");
}
Ext.extend(Person,Ext.util.Observable);
var person =new Person();
//person.addListener();
//与person.on(“”,””);的作用相同用哪个都可以
person.on("talk",talk);
//为事件添加执行的方法
person.on("sleep",sleep);
function talk(){
Ext.Msg.alert("talk","talk");
}
function sleep(){
Ext.Msg.alert("sleep","sleep");
}
注意:只有继承Ext.util. Observable类的类才能够添加事件
2、 为按钮添加事件
Ext.get("talkBtn").on("click",function(){person.fireEvent("talk")});
Ext.get("sleepBtn").on("click",function(){person.fireEvent("sleep")});
解析:person.fireEvent("sleep") 触发person的sleep事件
c) onkeyup事件
Ext.get("key").on("keyup",function(e){
if(e.keyCode==Ext.EventObject.SPACE){
person.fireEvent("sleep");
}
});
解析:当按空格键时触发person的sleep事件
d) 树型菜单实例
var tree=new Ext.tree.TreePanel(
{el:'tree',border:false}
);
\\ tree 是需要在html页面中显示树形菜单的位置可以是一个层
var root=new Ext.tree.TreeNode({text:'school'});
tree.setRootNode(root);
\\ 设置根节点
\\ school是节点名
var stu1=new Ext.tree.TreeNode({text:'stu1'});
var class1=new Ext.tree.TreeNode({text:'class1'});
class1.appendChild(stu1);
var class2=new Ext.tree.TreeNode({text:'class2'});
var class3=new Ext.tree.TreeNode({text:'class3'});
root.appendChild(class1);
root.appendChild(class2);
root.appendChild(class3);
tree.render();
\\以上是子节点的设置
}