extjs 4.2 教程 - 02 - Ext.onReady()及Ext.get()函数 - 2018
原创    xingfu2017    发表于:2018-01-04 15:56:53
  阅读 :69   收藏   编辑

上一节:extjs 4.2 教程 - 01 - Hello Extjs - 2018

Ext.onReady( fn, [scope], [options])

传入一个函数,当DOM和所需要的类都加载完毕后执行此函数
后两个参数通常不做使用,

如下:表示当所需的类,dom加载完成后执行“alert()”函数,类似于Jquery 中的$(function(){})函数

Ext.onReady(function(){

    alert('d');

});

Ext.get()

该函数用于获取html页面中ID的Ext.Element对象,其中Ext.Element是ext对DOM的封装

  • 如获取页面中ID为“btn”的button中的value值,
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css" />
    <script type="text/javascript" src="extjs/ext-all.js" ></script>
    <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
    <script>
        //所需dom加载完成后
        Ext.onReady(function(){
            alert(Ext.get('btn').dom.value);
        })
    </script>
    </head>
    <body>

        <input type="button" value="我是个按钮" id="btn"/>  
    </body>
</html>
  • 执行事件

    Ext.get(‘’).on(even,fn)

在ext中事件名称和原html是有区别的,要去的on,比如click相当于onClick,change相当于onChange

如执行页面中ID为“btn”的click事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css" />
    <script type="text/javascript" src="extjs/ext-all.js" ></script>
    <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
    <script>
        //所需dom加载完成后
        Ext.onReady(function(){
            Ext.get('btn').on('click',function(){
                alert('我被点击了')
            })
        })
    </script>
    </head>
    <body>

        <input type="button" value="我是个按钮" id="btn"/>  
    </body>
</html>
评论
条评论