• ExtJS-介绍(Introduction to Ext JS)

    ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

    ExtJS介绍(Introduction to Ext JS)

    ExtJS是什么

    Web前端富Internet应用程序(Rich Internet Applications)框架。

    ExtJS优点(使用ExtJS的优势)

    1.丰富的UI组件(Rich UI components)，比如：Grids, pivot grids, forms, charts, trees。
    2.开发效率高、降低了开发成本。
    3.JavaScript优先，所有的UI组件都是通过JavaScript定义的，而不是HTML+CSS
    预定义了多种主题，并且可以自定义化主题。
    4.跨平台(Cross-browser support)。
    5.支持MVC/MVVM 开发模式，支持双向绑定(Two-way binding)。
    6.代码向后兼容性(compatibility)好，代码升级改动小。
    7.软件文档详细(和微软类似)。
    8.有完善的商业支持。
    9.支持客户端路由(Client-Side Routing)。

    ExtJS缺点

    1.商业使用收费。
    2.入门门槛高。

    ExtJS的历史版本

    Ext JS 7
    增加新的UI主题

    Ext JS 6
    将Ext JS和Sencha Touch合并

    Ext JS 5.0
    第五个版本在2014年发布
    添加了MVVM 开发模式，支持双向绑定
    添加了对触屏设备的支持
    支持响应式布局

    Ext JS 4.0
    第四个版本在2011年发布
    进行了重构，添加了MVC开发模式，优化了速度

    Ext JS 3.0
    第三个版本在2009年完成
    这个版本添加了图表和列表组件，但性能损耗增加
    这个版本与前版本实现了先后兼容

    Ext JS 2.0
    第二个版本在2007年完成
    这个版本添加了许多新的API用于有限的桌面应用开发
    这个版本没有与前版本向后兼容

    Ext JS 1.1
    第一个版本由Jack Slocum在2006年完成
    基于YUI进行扩展完成，主要包含一些实用的类
    当时叫做YUI-ext

    Ext JS框架的组成(主要功能)

    概述

    image

    ExtJS核心(Ext JS core)
    UI组件(UI components)
    拖放与拖拽(Drag and drop)
    图形图表(Draw and charts)
    数据服务(Data services)
    通用工具集(General utilities)
    Web远程调用(Web remoting)

    ExtJS核心(Ext JS core)

    Ext JS 核心主要包括：底层基本架构 和 基本功能
    比如：事件、组件、DOM操作、Ajax通信

    其他部分功能都依赖于框架的核心，但核心并不依赖于任何部分

    UI组件(UI components)

    UI组件包含所有与用户有交互的部件

    拖放与拖拽(Drag and drop)

    为Ext JS组件或者任何HTML 元素赋予拖放功能

    图形图表(Draw and charts)

    跨浏览器绘图引擎，支持各种图形绘制

    数据服务(Data services)

    主要包含数据模型、数据通信、数据解析

    通用工具集(General utilities)

    某些常用任务的工具类

    Web远程调用(Web remoting)

    Web远程调用是用JavaScript远程执行在服务器上所定义和暴露的方法的一种手段
    这些方法调用通常称为远程过程调用(Remote Procedure Call，RPC)
    Web远程调用包称为Ext. Direct

    ExtJS授权类型

    官方说明：http://www.sencha.com/products/extjs/licensing

    1. 开源协议授权(The open source license)
      开发开源软件可以免费使用
      协议类型为GNU GPL license v3 (http://www.gnu.org/copyleft/gpl.html)
    2. 商业授权(The commercial license)
      闭源商业软件必须购买商业授权
    3. 商业OEM协议授权(The commercial OEM)
      基于ExtJS开发商业使用的SDK
      基于ExtJS开发web应用程序生成器(web application builder)
      开发界面用于嵌入式设备
      自定义协商授权

    ExtJS相关工具(Tools)

    Sencha CMD

    使用ExtJS框架时整个软件生命周期的命令行辅助工具。

    IDE插件(Sencha IDE Plugins)

    Sencha IDE 插件支持 Visual Studio、Visual Studio Code、IntelliJ、WebStorm等IDE
    主要作用是：
    提高生产力(Improving Productivity)
    代码智能提示(Code Completion)
    代码检查(Code Inspection)
    代码导航(Code Navigation)
    代码生成(Code Generation)
    代码重构(Code Refactoring)
    模板生成(Template Creation)
    拼写检查(Spell-checking)

    Sencha调试工具(Sencha Inspector)

    Sencha Inspector是一个调试工具(debugging tool)
    用于开发阶段调试(debugger)程序使用

    Sencha Architect

    可视化开发工具，拖着完成界面或者根据数据生成界面。

    Sencha Test

    测试工具

    Sencha Themer

    主题定制工具

    WebTestIt

    UI测试工具

    ExtJS版本更新助手(upgradeadviser)

    https://www.sencha.com/products/extjs/upgradeadviser/

    ExtJS应用模板类型介绍

    应用模板类型

    经典(Classic)应用 就是原先的ExtJS模板。
    现代(Modern)应用 就是原先的Sencha Touch模板。
    通用(Universal)应用 就是将经典应用和现代应用进行整合后的模板。

    通过URL设定访问的Toolkit类型

    访问Modernhttp://127.0.0.1:1841/?modern

    访问Classichttp://127.0.0.1:1841/?classic

    设置默认的模板类型

    在index.html中修改profile值。

    下载ExtJS(download ExtJS)

    开源版本下载地址

    https://www.sencha.com/legal/GPL/

    ExtJS4到ExtJS5目录变化

    1.builds文件夹撤除，改为build文件夹。
    2.locale文件夹移动到packages/ext-locale文件夹。
    3.resources文件夹撤除,使用packages 文件夹代替。
    4.jsbuilder文件夹撤除，使用Sencha Cmd来构建和压缩源代码。
    5.ext-dev.js文件撤除，使用ext-debug.js代替。
    6.docs文件夹撤除，使用官方文档代替。

    基本安装使用-使用Sencha CMD(Creating our application with Sencha Cmd)

    安装Sencha CMD

    默认路径安装在：C:\Users\Administrator\bin\Sencha\Cmd。

    使用Sencha CMD初始化应用

    进入应用目录(或者自己新建)：

    cd D:/www

    生成应用：

    sencha generate app modern -ext MyApp ./MyApp

    应用目录将出现这些文件：

    1. app
    2. build
    3. ext
    4. resources
    5. .gitignore
    6. app.js
    7. app.json
    8. bootstrap.css
    9. bootstrap.js
    10. bootstrap.json
    11. bootstrap.jsonp
    12. build.xml
    13. index.html
    14. Readme.md
    15. workspace.json

    现在启动应用

    在应用目录下执行：sencha CMD将进行自动编译生成应用

    sencha app watch

    自动编译完成：显示以下信息表示编译完成

    [INF] Waiting for changes...

    进入网址查看：

    127.0.0.1:1841

    应用代码改变时，Sencha CMD会自动编译生成新代码
    都可以直接反应在浏览器上，当显示Waiting for changes…表示编译完成

    代码结构介绍

    Extjs框架是JavaScript优先的框架
    Ext JS应用程序的起点是app.js(在app.json中指定)

    配置ExtJS SDKs库文件

    1.进入senchaCMD的同级路径
    2.建立sencha-sdks目录，解压extjs库文件到该目录下
    3.设置CMD关联ExtJS库文件
    进入Sencha目录下，或将sencha.exe添加到path路径中
    转移目录：

    cd C:\Users\Administrator\bin\Sencha\Cmd

    配置SDK路径：

    sencha config --prop sencha.sdk.path=C:..\sencha-sdks --save

    以后ExtJS库文件直接放在该目录下就可以关联Sencha CMD

    基本安装使用-直接引入JS和CSS

    解压下载的ExtJS包

    提示：也可以使用公共CDN的ExtJS文件：http://cdn.bytedance.com/?query=extjs&version=6.2.0

    image

    进入Web目录下，将build文件夹复制到你的Web目录下image

    新建index.html文件

    image

    编辑index.html文件并引入CSS和JS文件
    注意：生产环境中，使用非debug版本的css和js文件
    注意：根据自己需要，引入对应风格的CSS文件和JS文件

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <!-- 引入主题 -->
    7.     <link rel="stylesheet" href="/classic/theme-material/resources/theme-material-all-debug.css">
    8.     <title>ExtJS73</title>
    9. </head>
    10. <body>
    11.     <!-- 引入ExtJS -->
    12.     <script src="/ext-all-debug.js"></script>
    13.     <!-- 引入翻译文件 -->
    14.     <script src="/classic/locale/locale-zh_CN-debug.js"></script>
    15.     <!-- 引入主题额外的js文件 -->
    16.     <script src="/classic/theme-material/theme-material-debug.js"></script>
    17.     <script>
    18.         Ext.onReady(function(){
    19.   
    20.         });
    21.      </script>
    22. </body>
    23. </html>

    写入代码到index.html中进行测试1

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <!-- 引入主题 -->
    7.     <link rel="stylesheet" href="/classic/theme-material/resources/theme-material-all-debug.css">
    8.     <title>ExtJS73</title>
    9. </head>
    10. <body>
    11.     <!-- 引入ExtJS -->
    12.     <script src="/ext-all-debug.js"></script>
    13.     <!-- 引入翻译文件 -->
    14.     <script src="/classic/locale/locale-zh_CN-debug.js"></script>
    15.     <!-- 引入主题额外的js文件 -->
    16.     <script src="/classic/theme-material/theme-material-debug.js"></script>
    17.     <script>
    18.         Ext.onReady(function(){
    19.             Ext.create('Ext.panel.Panel', {
    20.                renderTo: Ext.getBody(),
    21.                height: 200,
    22.                width: 500,
    23.                closable: true,
    24.                draggable: true,
    25.                closeAction: 'hide',
    26.                title: 'This Is Title',
    27.                html: 'This is Context'
    28.             });
    29.         });
    30.     </script>
    31. </body>
    32. </html>

    代码说明：
    Ext.onReady()方法将会在ExtJS开始渲染元素时执行
    Ext.create() 方法用于创建ExtJS对象，这里创建了Ext.panel.Panel对象
    Ext.panel.Panel 是ExtJS的预定义类
    每个Ext类都有不同的属性用于执行不同的功能
    Ext.panel.Panel中属性的解释：
    renderTo属性用于指定类渲染在HTML中的位置
    height和width属性用于设置高度和宽度
    title属性用于提供Panel的标题
    html属性用于设置Panel中的HTML内容

    写入代码到index.html中进行测试2

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <!-- 引入主题 -->
    7.     <link rel="stylesheet" href="/classic/theme-material/resources/theme-material-all-debug.css">
    8.     <title>ExtJS73</title>
    9. </head>
    10. <body>
    11.     <!-- 引入ExtJS -->
    12.     <script src="/ext-all-debug.js"></script>
    13.     <!-- 引入翻译文件 -->
    14.     <script src="/classic/locale/locale-zh_CN-debug.js"></script>
    15.     <!-- 引入主题额外的js文件 -->
    16.     <script src="/classic/theme-material/theme-material-debug.js"></script>
    17.     <script>
    18.         Ext.application({
    19.             name: 'PandaApplication',
    20.             launch: function(){
    21.                 Ext.create('Ext.panel.Panel', {
    22.                    renderTo: Ext.getBody(),
    23.                    height: 200,
    24.                    width: 500,
    25.                    closable: true,
    26.                    draggable: true,
    27.                    closeAction: 'hide',
    28.                    title: 'This Is Title',
    29.                    html: 'This is Context'
    30.                 });
    31.             }
    32.         });
    33.     </script>
    34. </body>
    35. </html>

    说明：这里使用Ext.application方法创建应用，代码逻辑放在launch方法中。

  • 相关阅读:
    网络编程与HTTP协议
    分布式存储--负载均衡
    springboot个性化课程推荐系统个性化课程推荐系统毕业设计源码131805
    资本市场做好为工业互联网“买单”的准备了吗？
    Shopee退货运费是由谁承担？
    JMeter-BeanShell预处理程序和BeanShell后置处理程序的应用
    Spring Boot 依赖注入实现原理
    Android—Surface，BufferQueue
    企业微信下班后能收到通知吗？不接收消息怎么设置？
    90%的软件测试从业者，努力的方向都错了...你呢？
  • 原文地址：https://blog.csdn.net/weixin_38304160/article/details/125464922