玩转extjs5之extjs初识（一）

原文地址：http://www.goodym.cn/bbs/thread-13969-1-1.html

前言：目前extjs最新版本是extjs5.0.1,因此，本系列教程都用此版本。由于本人接触extjs也没有多久，难免会出现差错，如果读者看到有哪些地方说错了或者不全面，欢迎大家指正与指导

   下载地址： http://pan.baidu.com/s/1o6x9tIq
   api地址： http://docs.sencha.com/extjs/5.0/apidocs/

   一、简介
   extjs是使用javascript、css和html等技术实现的主要用于创建用户界面，且与后台技术无关的前端ajax框架。
extjs来源于yui，开发理念来源于传统的桌面软件开发。

   二、主要目录文件介绍
下载extjs5.0.1后，解压得到目录结构
            builds：是extjs压缩后的代码，体积更小，加载更快
            examples：官方示例
            licenses：许可说明
            overview：extjs的功能简述
            packages：extjs各部分功能的打包文件
            plugins：插件。
            src：未压缩过的代码目录
            bootstrap-data.js、bootstrap-files、bootstrap-manifest，extjs库的引导文件
            ext-all.js ：必须引入的核心库
            ext-all-debug.js：ext-all.js的调试版


三、引入哪些文件
               1）ext-theme-neptune-all.css，在ext-5.0.1\build\packages\ext-theme-neptune\build\resources目录下
               2）ext-all.js，在 ext-5.0.1\build目录下
               3）ext-theme-neptune.js，在 E:\软件\ext-5.0.1-trial\ext-5.0.1\build\packages\ext-theme-neptune\build目录下

四、从hello world 开始

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>extjs5.0.1简单示例</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="extjs/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="extjs/build/ext-all.js"></script>
    <script type="text/javascript" src="extjs/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
    
	<script type="text/javascript">
		Ext.onReady(function(){
		     Ext.MessageBox.alert('HelloWorld', 'Hello World!Hello World!Hello World!Hello World!');
		});
</script>
  </head>
  
  <body>
   
  </body>
</html>

运行结果：

玩转extjs5之extjs初识（一）

猜你喜欢