`

[ExtJS2.1教程-1]HelloWorld

    博客分类：
  • ext
EXTIEHTMLUIIDE 
阅读更多
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
分享到：
| 一些16*16的小图（gif）适合做系统托盘图 ...
评论
1 楼 JavaTestJava 2009-05-18  
最近在学这个，不错。能推荐个系统的书籍吗？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics