[ExtJS2.1教程-1]HelloWorld

llying · 发表于 2013-2-7 19:20:50

ExtJS:一个很强大的ui库
创建一个漂亮的alert "helloworld"
Ext.onReady(function(){Ext.Msg.alert("hello");});
Ext.onReady 表示当全部资源加载之后再操作里面的内容。

当然好的程序离不开好的ide的支持
推荐使用 spket

当然一个alert远远不足以表达ext的优秀，我们再来一个helloPanel
<html> <head> <title>hello</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"> <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./ext/ext-all.js"></script><script>Ext.onReady(function(){var panel = new Ext.Panel({id:'panel_hello',title:'hellotitle',width:200,height:200}); //对那个id="hello"的div进行渲染panel.render("hello");});</script> </head> <body> This is my HTML page. <br> <div id="hello"></div> </body></html>

我们再看看简单的布局
<html> <head> <title>hello</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"> <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./ext/ext-all.js"></script><script>Ext.onReady(function(){var viewport = new Ext.Viewport({id:'desk',//布局类型，不熟悉的去看看GUI 类似的什么流式，网格 layout:'border',//中间自动填充items:[{region:'north',height:50},{region:'west',width:200},{region:'center'}]})});</script> </head> <body> This is my HTML page. <br> <div id="hello"></div> </body></html>
当使用布局之后发现无需渲染就直接分割了不过我们的This is my HTML page. 也不显示了
如果我们使用ie对进行打开将报错
解决办法实际上<body>中的This is my HTML page. <br>这句话在这里本身就不起作用我们删除之后ie下就可以正常显示了当然在其它页面也有可能发生，只需将类似的内容去掉就可以了

不过在第alert("hello")中在ie下还是会出现偏移的情况
Ext.Msg.alert("hello","helloworld000000000000000000000000");
第一个参数是title 第二参数是内容我们可以把内容用空格填充伸长，这应该算是ext的一个bug了吧

工具的安装 java -jar spket-1.6.11.jar

		自动登录	找回密码
密码			立即注册

[ExtJS2.1教程-1]HelloWorld

浏览过的版块