[ExtJS2.1教程-1]HelloWorld

最新推荐文章于 2011-09-09 16:19:09 发布

iteye_194

最新推荐文章于 2011-09-09 16:19:09 发布

阅读量107

点赞数

分类专栏： ext 文章标签： EXT IE HTML UI IDE

本文链接：https://blog.csdn.net/iteye_194/article/details/81658078

版权

ext 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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

iteye_194

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[ExtJS2.1教程-1]HelloWorld

ExtJS:一个很强大的ui库创建一个漂亮的alert "helloworld"[code="js"]Ext.onReady(function(){ Ext.Msg.alert("hello");});[/code]Ext.onReady 表示当全部资源加载之后再操作里面的内容。当然好的程序离不开好的ide的支持推荐使用 spket当然一个alert...
复制链接

扫一扫