BlogJava-wufang5-文章分类-EXT

EXT-->文本框和面板的使用

懒虫 — Fri, 14 Nov 2008 01:42:00 GMT

只有注册用户登录后才能阅读该文。阅读全文

懒虫 2008-11-14 09:42 发表评论

EXT-->按钮的点击事件

懒虫 — Tue, 11 Nov 2008 12:25:00 GMT

对于按钮的点击事件这里有三种方法，用一个JSP页面把三种写法都表示出来了~~

<%@ page language="java" pageEncoding="UTF-8"%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>按钮的测试title>
    <link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
    <script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js">script>
    <script type="text/javascript" src="./scripts/ext/ext-all.js">script>

    <script type="text/javascript">

        Ext.onReady(function(){
            var _btn = new Ext.Button({
                    renderTo:Ext.getBody(),            /**这里的Ext.getBody() = document.body*/
                    text:"确定" ,
            //------------1)-----------handler------------------------------------------------
                    /**
                        * handler只能对click做出响应
                    handler:function(){
                        alert("Hello EXTJS");
                    }
                    */
        //----------------2)-------------listeners------------------------------------------
                    /**
                        *listeners可以对所有的事件做监听
                    listeners :{
                        "click":function(){
                            alert("Hello  EXTJS!");
                        }
                    }
                    */
            });

        //----------------3)-------------ON---------这个方法在onReady()外面---------------------------------
            _btn.on("click", function(){
                    alert("Hello EXTJS!!");
            });

        });
    script>
  head>

  <body>
  按钮的测试页面(点击事件的三个写法)
  body>
html>

renderTo:是把这个对象放到指定的对象中，这里产生的也是HTML代码

这里没有添加任何的JS文件，比较简单

懒虫 2008-11-11 20:25 发表评论

EXT--->事件Event

懒虫 — Tue, 11 Nov 2008 11:58:00 GMT

People里对name和age的改变做出了对应的事件

一个事件要符合三个步骤：定义、发布、订阅

1 Ext.namespace(Ext.dojochina);
2
3 Ext.dojochina.People = function() {
4     this.addEvents(                    /**事件的定义*/
5         "namechange",
6         "agechange"
7     );
8 };
9
10
11 Ext.extend(Ext.dojochina.People, Ext.util.Observable, {
12     name:"",
13     age:"",
14
15     setName:function(_name) {
16         if(this.name != _name) {
17             this.fireEvent("namechange", this, this.name, _name);                /**事件的发布*/
18             this.name = _name;
19         }
20     },
21
22     setAge: function(_age) {
23         if(this.age != _age) {
24             this.fireEvent("agechange",  this,  this.age,  _age);
25             this.age = _age;
26         }
27     }
28 });

JSP页面上（实现了事件的订阅）

1 <script type="text/javascript" src="./scripts/ext/demo/People.js">script>
2
3     <script type="text/javascript">
4         var _people = null;
5
6         //按钮点击触发的事件
7         button_click = function(){
8             _people.setName(prompt("请输入你的名字！", ""));
9             _people.setAge(prompt("请输入你的年龄！",""));
10         }
11
12         Ext.onReady(function(){
13             var txt_name = Ext.get("txt_name");
14             var txt_age = Ext.get("txt_age");
15
16             _people = new Ext.dojochina.People();
17             /**事件的订阅*/
18             _people.on("namechange", function(_people,  _old,  _new){
19                     txt_name.dom.value = _new;
20             });
21
22             _people.on("agechange", function(_people,  _old,  _new){
23                     txt_age.dom.value = _new;
24             });
25
26             /**事件的队列，同一个事件多次订阅*/
27             _people.on("namechange", function(_people,  _old,  _new){
28                     document.title = _new;
29             });
30         });
31
32     script>
33
34   head>
35
36   <body>
37     <h4><font color="blue">这是对事件调用的测试页面font>h4>
38     姓名：<input type="text" id="txt_name"> <br />
39     年龄：<input type="text" id="txt_age">
40     <input type="button" value="输入" onclick="button_click()">
41
42   body>

但是这个例子我一直没找到错误，使用谷歌浏览器的时候只能出现第一个输入框就什么效果也没有了，要是哪位大虾发现错误请及时告诉我啊~~谢谢喽~~自己刚发现了错误，我的代码是用MyEclipse生成的，JS文件是使用File新建的，命名的时候忘了写后缀了~~我可是活生生找了一下午啊~~可是记清楚了~~~！！

懒虫 2008-11-11 19:58 发表评论

Ext-->类的方法重写

懒虫 — Tue, 11 Nov 2008 11:43:00 GMT

只有注册用户登录后才能阅读该文。阅读全文

懒虫 2008-11-11 19:43 发表评论

Ext类的继承

懒虫 — Tue, 11 Nov 2008 01:35:00 GMT

Person类是父类：

1 Ext.namespace("Ext.dojochina");
2 //EXT的构造方法
3 Ext.dojochina.Person = function(_cfg) {
4     Ext.apply(this, _cfg);
5 };
6
7 //实例方法
8 Ext.apply(Ext.dojochina.Person.prototype, {
9         job:"无",
10         print:function(){
11             alert(String.format("姓名:{0}, 性别:{1},角色:{2}", this.name, this.sex, this.job));
12         }
13 });

Student类是继承自Person类的，只是job=Student

1 Ext.namespace("Ext.dojochina");
2 //构造函数
3 Ext.dojochina.Student = function(_cfg) {
4 Ext.apply(this, _cfg);
5 };
6 //继承的写法
7 Ext.extend(Ext.dojochina.Student,Ext.dojochina.Person,{
8 job:"学生"
9 });

JSP页面上的显示：

1 <%@ page language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
2
3 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
4 <html>
5   <head>
6
7     <title>Student类Teacher类继承自Person类title>
8
9     <link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
10     <script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js">script>
11     <script type="text/javascript" src="./scripts/ext/ext-all.js">script>
12

13     <script type="text/javascript" src="./scripts/ext/demo/Person.js">script>
14     <script type="text/javascript" src="./scripts/ext/demo/Student.js">script>
15     <script type="text/javascript" src="./scripts/ext/demo/Teacher.js">script>
16
17     <script type="text/javascript">
18         var _teacher = new Ext.dojochina.Teacher({name:"老杨",sex:"Man"});
19         _teacher.print();
20         var _student = new Ext.dojochina.Student({name:"Lily", sex:"Woman"});
21         _student.print();
22     script>
23
24   head>
25
26   <body>
27     测试类的继承 <br>
28    ---]  Student类Teacher类继承于Person类
29   body>
30 html>
31
32

懒虫 2008-11-11 09:35 发表评论