(1)ExtJs4.2 HelloWorld

最新推荐文章于 2019-12-17 13:23:46 发布

pandajava

最新推荐文章于 2019-12-17 13:23:46 发布

阅读量826

点赞数

分类专栏： ExtJS

本文链接：https://blog.csdn.net/pandajava/article/details/41847943

版权

ExtJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>示例2-1 Hello World</title>
	
	<!-- 
	(1)使用ExtJs需要引入的文件  
	★ext-all.css样式文件。这里替换为其他的css样式文件 则程序的整体css风格就会随之改变。
	    改变主题的下来选择框。最终也是切换CSS样式文件
	★bootstrap.js自动根据实际情况来引入ext-all.js或者是ext-all-dev.js
	★ext-lang-zh_CN.js 实现ext的本地化。如提示框不引入此文件  按钮为 ok，添加之后为 确定。
	 -->
    <link rel="stylesheet" type="text/css" href="../js/ext4.2/resources/css/ext-all.css"/>    
    <script type="text/javascript" src="../js/ext4.2/bootstrap.js"></script>
    <script type="text/javascript" src="../js/ext4.2/locale/ext-lang-zh_CN.js"></script>
   
   
    <script type="text/javascript">
    	//★Ext.onReady在DOM模型加载完毕就会执行
    	Ext.onReady(function(){
   		  /*
   		              ★
   		     Ext.MessageBox.alert提示框  (title, content)
   		  	 Ext.MessageBox  == Ext.Msg
   		               两个框同时出现时仅仅像是最后面的一个 ，前面的被覆盖掉
   		  */
   		  //Ext.MessageBox.alert("ExtJs","Hello ExtJSAA");
   		  Ext.Msg.alert("ExtJs","Hello ExtJS Pjm");
   		
   		  
   		  
   		  /**定义一个viewPort 输出helloworld
   		         ★Ext中panel和viewPort的区别       
   		          一个页面只能有一个viewPort，相当于页面的框架结构，并且根据浏览器可视区域的大小
   		          自动调整并且管理窗口的大小变化，渲染在document的body标签上，panel加在viewport上面。
   		          当然，你页面上也可以只放panel
   		          
   		  */
   		  Ext.create("Ext.Viewport",{
   			  layout: 'fit',  //fit布局  
   			  items:[{
   					xtype:"panel",  //Viewport items中默认的就是 panel类型
   					title:"欢迎",
   				  	html:"<h1 style='text-align:center;font-size:60px;font-weight:blod'>Hello World!</h1>"
   			  	}]
   		  });
   	});
    </script>
</head>
<body>

</body>
</html>

资料参考：黄灯桥extjs权威指南，网上的一些博客，照着demo做的，顺便记录下来。

pandajava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(1)ExtJs4.2 HelloWorld

示例2-1 Hello World <!-- (1)使用ExtJs需要引入的文件 ★ext-all.css样式文件。这里替换为其他的css样式文件则程序的整体css风格就会随之改变。改变主题的下来选择框。最终也是切换CSS样式文件 ★bootstrap.js自动根据实际情况来引入ext-all.js或者是ext-all-dev.js ★ext-lang-zh_CN
复制链接

扫一扫

专栏目录