zoukankan      html  css  js  c++  java
  • ExtJS 4.2 介绍

    本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点、MVC模式、4.2.1GPL版本资源的下载和说明以及4种主题的演示。

    目录

    1. 介绍

      1.1 说明

      1.2 特点

      1.3 使用协议

      1.3 MVC模式

    2. 资源

      2.1 资源地址

      2.2 资源目录说明

      2.3 docs/index.html

    3. 运行图

    1. 介绍

    1.1 说明

    ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前端Ajax框架。

    常用于企业内部管理系统、行政系统等SAP类型的应用。

    1.2 特点

    1) 提供了非常多的丰富、功能强大的组件。

    2) 面向组化件开发,区别于jQuery的面向Dom开发。

    3) 跨浏览器支持:IE、Chrome、Firefox、Safari、Opera。

    4) 框架体积庞大,适合编写内网项目。(ExtJS4.2.1的ext-all.js大小为1.46M)

    1.3 使用协议

    ExtJS提供2种使用协议:GPL3.0(免费) 和 商业协议(付费)。

    1.4 MVC模式 

    ExtJS是一个MVC模式的框架(在ExtJS 5中加入了MVVM模式)。

    MVC,全称为Model-View-Controller,即模型 - 视图 - 控制器,是一个用于编写软件的架构模式。它把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。此模式通过对复杂度的简化,使程序结构更加直观。

    ExtJS 4对各个部分定义的功能:

    Model(模型) :用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。一个数据字段的集合,可通过关联被链接到其他模型和通过代理链接到一个数据流。

    View(视图) 表示数据给用户。任何类型的组件,这些组件将信息输出到浏览器,如Form、Grid、Chart。

    Controller(控制器是MVC应用程序的逻辑部分。它处理事件并作出响应。“事件”包括用户的行为和数据 Model 上的改变。Ext.app.Controller为控制器的基类。

    引用来源:http://www.extjs-tutorial.com/extjs/extjs-4-mvc-architecture

    2. 资源

    2.1 资源地址

    这里以ExtJS 4.2.1为版本进行介绍。

    官方GPL协议版本下载 :http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip

    官方API :http://docs.sencha.com/extjs/4.2.1/#!/api

    官方实例 :http://docs.sencha.com/extjs/4.2.1/#!/example

    中文API(4.1.0版本) :http://extjs-doc-cn.github.io/ext4api/

    4.2.1 CDN :http://www.bootcdn.cn/extjs/4.2.1/

    2.2 资源目录说明

    http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip解压后截图:

    2.2.1 目录

    builds :ExtJS压缩后的代码,经过压缩的代码体积更小,加载更快。

    docs : ExtJS的文档目录,index.html可查看ExtJS的API、Guides、Examples。

    examples :Demo 目录,index.html可查看Demo列表。

    locale :多国语言资源目录,其中ext-lang-zh_CN.js为简体中文(此文件遗漏了RadioGroup的必填提示)。

    pkgs :ExtJS部分功能的打包文件。如:主题。

    plugins :ExtJS所需要的插件目录。如:flash。

    resources :ExtJS所用到的样式和图片等资源。包括4个主题:classic(经典:默认此主题)、access(稳重/黑色)、gray(灰色)、neptune(海王星)。

    src :各组件的源代码。

    welcome :访问页目录。

    2.2.2 文件

    bootstrap.js :引导文件,根据当前运行环境自动加载ext-all.js 或者 ext-all-dev.js文件。

    ext.js :已压缩Js代码;基本框架,动态加载扩展类。

    ext-all.js :已压缩Js代码;包括ExtJS整个框架。

    ext-all-debug.js :未压缩Js代码;包括ExtJS整个框架。

    ext-debug.js :未压缩Js代码;基本框架,动态加载扩展类。

    ext-all-rtl-debug.js :未压缩Js代码;包括ExtJS整个框架并支持从右到左阅读。

    ext-all-rtl-sandbox-debug.js :未压缩Js代码;包括ExtJS整个框架、支持从右到左阅读以及支持以沙盒方式使用其他版本的ExtJS。

    ext-all-rtl-sandbox.js :已压缩Js代码;包括ExtJS整个框架、支持从右到左阅读以及支持以沙盒方式使用其他版本的ExtJS。

    ext-all-rtl.js :已压缩Js代码;包括ExtJS整个框架并支持从右到左阅读。

    ext-all-sandbox-debug.js :未压缩Js代码;包括ExtJS整个框架并支持以沙盒方式使用其他版本的ExtJS。

    ext-all-sandbox.js :已压缩Js代码;包括ExtJS整个框架并支持以沙盒方式使用其他版本的ExtJS。

    2.3 docs/index.html 

    docs/index.html 页面可查看ExtJS的API、Guides、Videos、Examples。

    API 介绍ExtJS框架的全部API;包括:各组件、各工具类、ExtJS核心等API。

    Guides 介绍ExtJS的概述、概念、组件、指南等方面的知识。

    Videos 通过视频介绍ExtJS各方面。

    Examples ExtJS各组件的Demo。

    API和Examples方面的资料已经满足了日常开发的需求,若希望对ExtJS框架深入了解可以看Guides方面的资料。

    3. 运行图

    展示4个主题的运行图

    classic(经典:默认此主题)、access(稳重/黑色)、gray(灰色)、neptune(海王星)。

    3.1  classic 经典主题

    3.2 access 稳重/黑色主题

    3.3 gray 灰色主题

    3.4 neptune 海王星主题

  • 相关阅读:
    轻重搭配
    EF的优缺点
    使用bootstrap-select有时显示“Nothing selected”
    IIS发布 HTTP 错误 500.21
    js添加的元素无法触发click事件
    sql server查看表是否死锁
    sql server把一个库表的某个字段更新到另一张表的相同字段
    SQLSERVER排查CPU占用高的情况
    SQL server中如何按照某一字段中的分割符将记录拆成多条
    LINQ to Entities does not recognize the method 'System.DateTime AddDays(Double)' method, and this method cannot be translated into a store expression.
  • 原文地址:https://www.cnblogs.com/polk6/p/5713528.html
Copyright © 2011-2022 走看看