Ext学习笔记3-事件及组件

10-EXT中的事件

--对于外界影响的反应,在EXT中还支持事件队列模式.由Ext.util.Observable类支持

Ext.namespace("Ext.wang"); //自定义命名空间
Ws = Ext.wang;  //命名空间别名

Ws.Person = function(_cfg){   //类构造方法
   Ext.apply(this, _cfg);
  
   this.addEvents(   //  一.定义事件
        "nameChange",
        "sexChange"
   )
};
PEN = Ws.Person; //类别名
//**********************************二.发布事件 fireEvent("EventName",若干参数)************************************
Ext.extend(PEN,Ext.util.Observable,{
               name:"",
               sex:"",
               setName:function(_name){
                    if(this.name != _name){
                        this.fireEvent("nameChange", this, this.name, _name);     //二.发布事件
                        alert("nameChange事件")
                        this.name = _name;
                    }
               },
               setSex:function(_sex){
                    if(this.sex != _sex){
                        this.fireEvent("sexChange", this, this.name, _sex);        //二.发布事件
                         alert("sexChange事件")
                    }
               }
          })
         
         
         
//*************************************三.订阅事件(Ext.get(element).on(Event,fun))*************************************

var _person = null;
Ext.onReady(function(){
  
    var txt_name = Ext.get("txt_name");
    var txt_sex = Ext.get("txt_sex");

    _person = new PEN();

    _person.on("nameChange",function(_person, _old, _new){             //订阅事件
                    txt_name.dom.value = _new;    
                });   
    _person.on("sexChange",function(_person, _old, _new){               //订阅事件
                    txt_sex.dom.value = _new;
                });
               
     //******************************************************
    
     Ext.get("btn_change").on("click",function(){
         _person.setName(prompt("请输入名字:",""));
         _person.setSex(prompt("请输入性别:",""));      
    });
       
})

<!--HTML代码-->

姓名:<input id="txt_name" /><br />
性别:<input id="txt_sex" /><br />
<input type="button" value="输入" id="btn_change"/>

11-Ext_button组件

* 构造参数: 
     - text : 按钮上的名称
     - handler : 指定一个函数句柄, 在默认事件触发时调用, 此时的默认事件为click
     - listeners : 这个是在对象初始化之前, 就将一系列事件进行定义的手段, 在进行组建化编程时,特别有用

* 属性:
     - text : 获得当前按钮上的名称
     - minWinWidth : 按钮的最小宽度
     - renderTo : 将当前对象所生成的HTML对象存放进指定的对象中

* 方法:
     - setText : 获得当前按钮上的名称

* 事件:
     - click, mouseover, mouseout 等

 

Ext.onReady(function(){
    var btn = new Ext.Button({
        renderTo:Ext.getBody(),      // 添加到该元素内如
        text:'点我啊',               //构造参数
        minWidth:100,
        handler:function(){          //添加事件处理  默认为click
            alert("你点我干吗?我叫"+this.text);
        },
        listeners:{                 //添加事件监听
            'mouseover':function(){
                this.setText("鼠标在上面!");
            },
            'mouseout':function(){
                this.setText("点我啊");
            }
        }
    });
})

12-Ext_form_TextField组件

* 属性:
     - fieldLabel : 文本框的标签名称

* 方法:
     - getValue() : 得到当前文本框的值

* 由Ext_form_TextField组建产生的引申话题
     - Ext.layout.FormLayout : 只有在次布局下才能正确现实文本框的标签名,
                                                 布局的宿主对象必须是Ext.Container或者Ext.Container的子类
     - 在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:'form' 即可
     - Ext.getCmp(string _id) : 得到id为_id的组建对象

示例代码1:

Ext.onReady(function(){
    var textField = new Ext.form.TextField({
        fieldLable:'文本框',   //此时并不显示
        renderTo:Ext.getBody()
    });
});

示例代码2:

Ext.onReady(function(){
    var _panel = new Ext.Panel({
        renderTo:Ext.getBody(),
        layout:'form',
        labelWidth:30,
        listeners:{
            'render' : function(_panel){                 //这里之所以在这里用这个render事件而不像下面注释掉的代码那样添加组建
                _panel.add(new Ext.form.TextField({     //,是因为那样的话很可能该组建还没有实例化完全,久像其中添加组建,很可能会出错!
                    fieldLabel:'姓名',    //有了布局,它就显示出来了
                    id:'txt_name'
                }))
            }
        }
    });
   
    //_panel.add(new Ext.form.TextField({
   //                fieldLabel:'姓名11',
  //                id:'txt_name1'
 //            }));
 
    new Ext.Button({
        text:"按钮",
        renderTo:Ext.getBody(),
        handler:function(){
            alert(Ext.getCmp('txt_name').getValue());
        }
    });
})