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();
\\以上是子节点的设置
}