Ext.js 常用组件(Ext.Button、、、)

为了方便调试，在页面透引用了一个tool.js，gaixilie具体代码如下

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + " " + date.getHours() + seperator2 + date.getMinutes()
                + seperator2 + date.getSeconds();
        return currentdate;
    }
    function _v(v, msg) {
        if (v == "") {
            if (msg == undefined || msg == "") {
                alert("请填写完整的信息" + v);
            } else {
                alert(msg);
            }
            exit();
        }
        return v;
    }

    function v_i(id, msg) {
        var v = f_i(id);
        _v(v, msg);
        return v;
    }

    function v_r(id, msg) {
        var v = f_r(id);
        _v(v, msg);
        return v;
    }

    function f_i(id) {
        return document.getElementById(id).value;
    }

    function f_r(name) {
        var obj;
        obj = document.getElementsByName(name);
        if (obj != null) {
            var i;
            for (i = 0; i < obj.length; i++) {
                if (obj[i].checked) {
                    return obj[i].value;
                }
            }
        }
        return null;
    }

    function log_i(id) {
        console.log(id + "=>" + f_i(id));
        return f_i(id);
    }

    function log_r(name) {
        console.log(name + "=>" + f_r(name));
        return f_r(name);
    }
    function log_flag_0(text) {
        console.log(getNowFormatDate() + "=>" + text);
        return text;
    }
    function log_flag_1(text, flag) {
        console.log(getNowFormatDate() + "[" + flag + "]" + "=>" + text);
        return text;
    }
    function log(text, flag) {
        if (flag == undefined || flag == "") {
            log_flag_0(text);
        } else {
            log_flag_1(text, flag);
        }
        return text;
    }
 

Ext.Button

 Ext.onReady(function () {
          var bt=  new Ext.Button({
                renderTo: Ext.getBody(),
                text: "默认按钮",
              //1.handler为侦听默认事件的处理函数
                handler: function () {
                    log(this.text+"clicked")
                },
              //2.在对象初始化之前，设置想侦听的所有事件的处理函数(相对handler更好维护)
                listeners: {

                }
          });
            //3.在对象初始化之后，侦听指定事件并作出处理
          bt.on("click", function () {

          })
          log("正在设置按钮.." + bt.getText());
          bt.setText("我是按钮");       
        });
    </script>

Ext.form.TextField

(注意：该组件只能放在Ext.Panel组件下且只有layout为form的时候才能正常显示)

    <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = "/Include/EXT-JS/V3/resources/images/default/s.gif";
        Ext.onReady(function () {
            var panel = new Ext.Panel({
                renderTo: Ext.getBody(),
                //必须为form才能显示Ext.form.TextField
                layout: "form",
                //form中Label宽度
                labelWidth:30,
                listeners: {
                    //监听渲染(render)事件
                    //注意:
                    //1.function必须要带一个参数 如 function (a)
                    //2.不可在panel初始化后调用panel.add进行动态添加，因为ext.js采用事件驱动
                    "render": function (a) {
                        //动态添加组件
                        a.add(new Ext.form.TextField({
                            id:"tf_test",
                            fieldLabel:"姓名"
                        }));
                    }
                }
            });
            
        });
    </script>