extjs开始使用extjs


备注

ExtJS是Sencha的JavaScript框架,用于构建富Internet应用程序。它拥有最大的预构建模块化UI组件库之一。

从5.0版开始,Sencha就提倡在其平台上使用Model-View-ViewModel(MVVM)架构。它还支持模型 - 视图 - 控制器(MVC)架构,这是4.x版支持的主要架构风格。

此外,Sencha专注于为ExtJS配备以移动为中心和响应式Web应用程序功能。它的前Sencha Touch框架自6.0版以来已与ExtJS集成,致力于整合客户群并在新的组合框架中整合冗余。

版本

发布日期
6.2 2016年6月14日
- 6.0 2015年8月28日
5 2014年6月2日
4 2011-04-26
3.0 2009-07-06
2.0 2007-12-04
1.1 2007-04-15

安装和设置

ExtJS的典型用法利用该框架构建单页富应用程序(RIA)。最简单的入门方法是使用Sencha Cmd ,这是一个CLI构建工具,涵盖部署生命周期中的大多数常见问题,主要是:

  • 包和依赖管理
  • 代码编译/捆绑和缩小
  • 管理不同目标和平台的构建策略

» 下载Sencha Cmd


第二步是下载SDK,ExtJS是商业产品 - 获取副本,其中之一:

下载SDK后,请确保在继续之前提取存档。


注意 :有关ExtJS项目的综合指南,请参阅官方入门文档。

安装Sencha Cmd后,可以通过打开控制台窗口并运行来验证其可用性:

> sencha help
 

我们现在拥有创建和部署ExtJS应用程序所需的工具,记下提取SDK的目录位置,因为在其他示例中将需要这些工具。

手动创建Hello World应用程序

让我们开始使用ExtJS来构建一个简单的Web应用程序。

我们将创建一个简单的Web应用程序,它只有一个物理页面(aspx / html)。每个ExtJS应用程序至少包含一个HTML和一个JavaScript文件 - 通常是index.html和app.js.

文件index.html或您的默认页面将包含对ExtJS的CSS和JavaScript代码的引用,以及包含应用程序代码的app.js文件(基本上是Web应用程序的起点)。

让我们创建一个使用ExtJS库组件的简单Web应用程序:

第1步:创建一个空的Web应用程序

如截图所示,我创建了一个空的Web应用程序。为简单起见,您可以在所选的编辑器或IDE中使用任何Web应用程序项目。 在此处输入图像描述

第2步:添加默认网页

如果您已经创建了一个空Web应用程序,那么我们需要包含一个网页,该网页将成为我们应用程序的起始页面。

在此处输入图像描述

第3步:将Ext Js引用添加到Default.aspx

此步骤显示了我们如何使用extJS库。如Default.aspx中的屏幕截图所示,我刚刚引用了3个文件:

  • EXT-all.js
  • EXT-all.css
  • app.js

Sencha与全球内容网络CacheFly合作,为ExtJS框架提供免费的CDN托管。在这个示例中,我使用了Ext的CDN库,但是我们可以在项目目录中使用相同的文件(ext-all.js和ext-all.css),或者在CDN不可用时使用备份。

通过引用app.js,它将被加载到浏览器中,它将成为我们应用程序的起点。

除了这些文件,我们还有一个占位符,用于呈现UI。在此示例中,我们有一个id为“whitespace”的div,稍后我们将使用它来呈现UI。

在此处输入图像描述

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 
 

第4步:在您的Web项目中添加app文件夹和app.js.

ExtJS为我们提供了一种管理MVC模式中的代码的方法。如截图所示,我们有一个ExtJS应用程序的容器文件夹,在本例中为“app”。此文件夹将包含拆分为各种文件夹的所有应用程序代码,即模型,视图,控制器,存储等。目前,它只有app.js文件。

在此处输入图像描述

第5步:在app.js中编写代码

App.js是我们申请的起点;对于此示例,我刚刚使用了启动应用程序所需的最低配置。

Ext.application代表一个ExtJS应用程序,它可以执行多项操作。它创建了名称配置中提供的全局变量“ SenchaApp ”,所有应用程序类(模型,视图,控制器,存储)都将驻留在单个命名空间中。 Launch是一个在所有应用程序准备好后自动调用的函数(所有类都正确加载)。

在此示例中,我们将创建一个具有一些配置的Panel,并将其呈现在我们在Default.aspx中提供的占位符上

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});
 

输出截图

使用Default.aspx作为启动页面运行此Web应用程序时,浏览器中将显示以下窗口。

在此处输入图像描述

创建Hello World应用程序 - 通过Sencha Cmd

此示例演示如何使用Sencha Cmd在ExtJS中创建基本应用程序来引导进程 - 此方法将自动为项目生成一些代码和框架结构。

打开控制台窗口并将工作目录更改为适当的工作空间。在同一窗口和目录中运行以下命令以生成新应用程序。

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 
 

注意: -sdk 标志指定从框架存档中提取的目录的位置。

在ExtJS 6+中,Sencha将ExtJS和Touch框架合并为一个代码库,分别由经典现代术语区分。为简单起见,如果您不希望定位移动设备,可以在命令中指定其他标志以减少工作区中的混乱。

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 
 

如果没有任何进一步的配置,功能齐全的演示应用程序现在应该驻留在本地目录中现在将工作目录更改为新的HelloWorld 项目目录并运行:

> sencha app watch
 

通过这样做,使用默认构建配置文件编译项目,并启动简单的HTTP服务器,允许通过Web浏览器在本地查看应用程序。默认情况下,端口1841