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("請輸入性別:",""));
    });

})

姓名:<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());
        }
    });
})

Ext學習筆記3-事件及元件

相關文章