博客

Ext.Button组件替代传统submit、reset、button控件

构造参数：

-text：按钮上的名称

属性：

-text：获取当前按钮上的名称

-minWidth:按钮的最小宽度

方法：

-setText:设置按钮名称

事件：

-click:点击

一、按钮定义、属性获取及属性设置

    <script type="text/javascript">
            Ext.onReady(function(){
            var button=new Ext.Button({
                renderTo:document.body,//将当前对象所生成的HTML对象存放到指定的对象中
                text:"确定",//按钮上的名称
                minWidth:100
            });
            alert(button.text);//获取按钮属性
            button.setText("取消");//setText设置按钮名称
        });
    </script>

二、click事件触发

1.使用handler

　　<script type="text/javascript">
        Ext.onReady(function(){
            var button=new Ext.Button({
                renderTo:document.body,
                text:"确定",
                minWidth:100,
                handler:function(){//handler指定一个函数句柄，在默认事件触发时调用，此时默认事件是click
                    alert("你好");
                }
            });
        });
    </script>

2.使用

listeners定义事件

　　<script type="text/javascript">
        Ext.onReady(function(){
            var button=new Ext.Button({
                renderTo:document.body,                text:"确定",
                minWidth:100,
                listeners:{//listeners在对象初始化之前，就将一系列时间进行定义
                    "click":function(){//click函数
                        alert("你好");
                    }
                }
            });
        });
    </script>

3.on

　　<script type="text/javascript">
        Ext.onReady(function(){
            var button=new Ext.Button({
                renderTo:document.body,                text:"确定",
                minWidth:100
            });
            button.on("click" , function(){
                alert("欢迎你学习EXTJS") ;
          }) ;
        });