ExtJS实例1

1.创建一个Extjs的Window,用ajax请求HTML文件,并执行HTML的代码和脚本

窗体中文字是从一个HTML中获取,并且HTML中执行脚本使窗体高亮1秒

wind

主页面:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../../extjslib/resources/css/ext-all.css" >    extjs样式
        <script type="text/javascript" src="../../extjslib/adapter/ext/ext-base-debug.js"></script> extjs基础库
        <script type="text/javascript" src="../../extjslib/ext-all-debug-w-comments.js"></script> extjs组件库
        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = "../../extjslib/resources/images/default/s.gif"; //占位图片,应在应用代码执行前指定
        </script>
        <script type="text/javascript" src="autoload.js"></script>
    </head>
</html>

这个里注意js加载顺序,要是基础要先加载,别写反了,造成js报错,对于想一窥究竟的人,每个js库都有对应的debug脚步

autoload.js

function buildWindow(){
    var win = new Ext.Window({//创建一个窗口实例
        id:'myWindow',//实例id,通过Ext.getCmp方法可以查询
        title:'Window Demo AutoLoad',
        width:300,
        height:150,
        layout:'fit',//布局为使窗体内容填满窗口
        autoLoad:{//自动加载
            url:'sayHi.html',//加载页面url,这里只会显示html片段
            scripts:true//执行加载页面脚本,但是执行块和行级脚本
        }
    });
    win.show();//显示窗口
}
Ext.onReady(buildWindow);//onReady方法是在DOM就绪后加载图片之前执行

sayHi.html

<div>Hello from the <b> world</b> of Ajax</div>
<script type="text/javascript">
    function highlightWindow(){
        var win = Ext.getCmp('myWindow');//获取窗口实例
        var winBody = win.body;//
        winBody.highlight();
    }

    highlightWindow.defer(1000);//1秒以后执行
</script>

这里的亮点在于defer,它比setTimeout方便原因在于

1.更简单,任何一个function都可以这样做,只要传一个时间

2.可以对被延迟执行的方法和执行的作用域进行控制,并传入制定参数(原话,还不太理解)

posted @ 2014-12-01 22:55  huchaolan  阅读(213)  评论(0)  编辑  收藏  举报