首页 > 代码库 > ExtJS实例1

ExtJS实例1

2024-08-05 13:57:25   211人阅读

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.可以对被延迟执行的方法和执行的作用域进行控制,并传入制定参数(原话,还不太理解)

ExtJS实例1


联系
我们