原文地址:http://www.goodym.cn/bbs/thread-13969-1-1.html
前言:目前extjs最新版本是extjs5.0.1,因此,本系列教程都用此版本。由于本人接触extjs也没有多久,难免会出现差错,如果读者看到有哪些地方说错了或者不全面,欢迎大家指正与指导
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>
运行结果: