Ext小结1

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();

\\以上是子节点的设置

}