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

}

 

说明:extOnReady事件是在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") 触发personsleep事件

c)          onkeyup事件

        Ext.get("key").on("keyup",function(e){

                   if(e.keyCode==Ext.EventObject.SPACE){

                            person.fireEvent("sleep");

                   }

         });

 

解析:当按空格键时触发personsleep事件

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

\\以上是子节点的设置

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值