前端 · Small Fire

原文：Small Fire · Ext.js 组件 · 前端 子专栏 · Small Fire 技术笔记 Ext.js 的常用组件 ExtJS UI 由一个或多个名为 Components.Ext 的 widget 组成。 虽然 Ext 组件拥有几乎完美的对象继承模型，但是这毕竟属于底层架构的一部分，我们日常开发时候接触最多的还是各种组件与布局，通过组件、布局的各种组合最终才形成了功能强劲的应用，所以有必要首先对Ext的组件模型有所了解。 Ext 中所有的可视组件都继承自 Ext.component，这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期，这样在后续对这些组件进行维护管理时将更加便捷，同时也保证了在进行布局时的便利。 组件最常见的几项功能包含 initComponent()、render()、show() 和 hide()，无论是哪一种组件都是通过初始化、渲染、显示、隐藏来实现其整个生命周期的。 方法 说明 Grid 网格组件可用于以表格格式显示数据 Form 窗体小部件是从用户获取数据 Message Box 消息框基本上用于以警报框的形式显示数据 Chart 图表用于以图形格式表示数据 Tool tip 任何事件发生时，工具提示用于显示一些基本信息 Window 这个UI部件是创建一个窗口，当任何事件发生时应该弹出 HTML editor HTML编辑器是非常有用的UI组件之一，用于对用户输入的字体，颜色，大小等数据进行样式设置 Progress bar 显示后端工作的进度 Grid Form Message Box Window

原文：Small Fire · ExtJS 应用程序创建 · 前端 子专栏 · Small Fire 技术笔记 创建程序

原文：Small Fire · ExtJS 应用程序创建 · 前端 子专栏 · Small Fire 技术笔记 下载资源 ExtJS 提供 2 种使用协议：GPL3.0(免费) 和 商业协议(付费)。 这里使用 GPL 版本的 SDK。 下载 Ext JS GPL SDK 下载地址：https://www.sencha.com/legal/gpl/ Step1：输入信息，重要的是邮箱地址，然后点击 Download SDK。下载的链接会发送到刚刚填写的邮箱。 Step2：登录邮箱，会看到 Sencha 团队发的邮件，邮件的底部有个 Download Ext JS GPL 按钮，点击就会开始 ext-X.X.X-gpl.zip 的下载。 Step3：将下载的文件解压 build 文件夹 ext-bootstrap.js ：引导文件，根据当前运行环境自动加载 ext-all.js 或者 ext-all-dev.js 文件。 ext.js ：已压缩 js 代码；核心文件，其中包含运行应用程序的所有功能。 ext-all.js ：已压缩 js 代码；此文件包含在文件中没有注释的所有缩小的代码。 ext-debug.js ：未压缩 js 代码；基本框架，动态加载扩展类。 ext-all-debug.js ：无压缩的 Ext 全部的源码，用于调试。 ext-all-rtl.js ：已压缩 js 代码；包括 ExtJS 整个框架并支持从右到左阅读。 ext-all-rtl-debug.js ：未压缩 js 代码；包括 ExtJS 整个框架并支持从右到左阅读。 ext-all-rtl-sandbox.js ：已压缩 js 代码；包括 ExtJS 整个框架、支持从右到左阅读以及支持以沙盒方式使用其他版本的 ExtJS。 ext-all-rtl-sandbox-debug.js ：未压缩 js 代码；包括 ExtJS 整个框架、支持从右到左阅读以及支持以沙盒方式使用其他版本的 ExtJS。 ext-all-sandbox.js ：已压缩 js 代码；包括 ExtJS 整个框架并支持以沙盒方式使用其他版本的 ExtJS。 ext-all-sandbox-debug.js ：未压缩 js 代码；包括 ExtJS 整个框架并支持以沙盒方式使用其他版本的 ExtJS。 下载安装 Sencha Cmd Sencha CMD 是一个提供 Ext JS 代码缩小，脚手架，生产构建生成功能的工具。 ...

原文：Small Fire · ExtJS 基础知识 · 前端 子专栏 · Small Fire 技术笔记 Ext JS 简介 Ext JS 是一个 JavaScript 框架，它具有面向对象编程的功能。Ext JS 是一个“JavaScript 优先”的框架。 也就是说，用户界面及其逻辑都是在 JavaScript 中定义的。 各种包含的主题（例如 Material）提供了必要的样式。 Ext JS 为使用跨浏览器功能构建 Web 应用程序提供了丰富的 UI。 Ext JS 主要专注于前端用户界面，它支持所有现代浏览器。Ext JS 提供对 MVC 和 MVVM 应用程序架构的支持。 Ext 是封装 Ext JS 中所有类的命名空间。 MVC (Model-View-Controller) 在 MVC 架构中，大多数类是模型、视图或控制器。用户与视图交互，视图显示模型中保存的数据。这些交互由控制器监控，然后控制器根据需要通过更新视图和模型来响应交互。 Model(模型) ：用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。一个数据字段的集合，可通过关联被链接到其他模型和通过代理链接到一个数据流。 View(视图)：表示数据给用户。任何类型的组件，这些组件将信息输出到浏览器，如Form、Grid、Chart。 Controller(控制器)：是 MVC 应用程序的逻辑部分。它处理事件并作出响应。“事件”包括用户的行为和数据 Model 上的改变。Ext.app.Controller 为控制器的基类。 View 和 Model 通常不知道彼此，因为 Controller 全权负责指导更新。一般来说，控制器将包含 MVC 应用程序中的大部分应用程序逻辑。理想情况下，视图几乎没有（如果有）业务逻辑。模型主要是数据的接口，并包含管理对所述数据的更改的业务逻辑。 MVC 的目标是明确定义应用程序中每个类的职责。因为每个类都有明确定义的职责，所以它们隐含地与更大的环境分离。这使得应用程序更易于测试和维护，并且其代码更易于重用。 ...

原文：Small Fire · ExtJS 基础知识 · 前端 子专栏 · Small Fire 技术笔记 Ext JS 简介 Ext JS 是一个 JavaScript 框架，它具有面向对象编程的功能。Ext JS 是一个“JavaScript 优先”的框架。 也就是说，用户界面及其逻辑都是在 JavaScript 中定义的。 各种包含的主题（例如 Material）提供了必要的样式。 Ext JS 为使用跨浏览器功能构建 Web 应用程序提供了丰富的 UI。 Ext JS 主要专注于前端用户界面，它支持所有现代浏览器。Ext JS 提供对 MVC 和 MVVM 应用程序架构的支持。 Ext 是封装 Ext JS 中所有类的命名空间。 MVC (Model-View-Controller) 在 MVC 架构中，大多数类是模型、视图或控制器。用户与视图交互，视图显示模型中保存的数据。这些交互由控制器监控，然后控制器根据需要通过更新视图和模型来响应交互。 Model(模型) ：用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。一个数据字段的集合，可通过关联被链接到其他模型和通过代理链接到一个数据流。 View(视图)：表示数据给用户。任何类型的组件，这些组件将信息输出到浏览器，如Form、Grid、Chart。 Controller(控制器)：是 MVC 应用程序的逻辑部分。它处理事件并作出响应。“事件”包括用户的行为和数据 Model 上的改变。Ext.app.Controller 为控制器的基类。 View 和 Model 通常不知道彼此，因为 Controller 全权负责指导更新。一般来说，控制器将包含 MVC 应用程序中的大部分应用程序逻辑。理想情况下，视图几乎没有（如果有）业务逻辑。模型主要是数据的接口，并包含管理对所述数据的更改的业务逻辑。 MVC 的目标是明确定义应用程序中每个类的职责。因为每个类都有明确定义的职责，所以它们隐含地与更大的环境分离。这使得应用程序更易于测试和维护，并且其代码更易于重用。 ...

原文：Small Fire · ECMAScript6 知识了解 · 前端 子专栏 · Small Fire 技术笔记 新增变量声明 let 命令 let命令，用来声明变量。它的用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效。 var arr = [1,'a','b']; for (let i = 0; i < arr.length; i++) { console.log(i); } console.log(i); 不允许重复声明 let 不允许在相同作用域内，重复声明同一个变量。 暂时性死区 变量一定要在声明后使用。 ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。 暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。 const 命令 const声明一个只读的常量。一旦声明，常量的值就不能改变。因此 const 一旦声明变量，就必须立即初始化。 变量的解构赋值

原文：Small Fire · ECMAScript 6 知识了解 · 前端 子专栏 · Small Fire 技术笔记 新增变量声明 let 命令 let命令，用来声明变量。它的用法类似于 var，但是所声明的变量，只在 let 命令所在的代码块内有效。 var arr = [1,'a','b']; for (let i = 0; i < arr.length; i++) { console.log(i); } console.log(i); 不允许重复声明 let 不允许在相同作用域内，重复声明同一个变量。 暂时性死区 变量一定要在声明后使用。 ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。 暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。 const 命令 const声明一个只读的常量。一旦声明，常量的值就不能改变。因此 const 一旦声明变量，就必须立即初始化。 变量的解构赋值

原文：Small Fire · Ext.js 基础知识 · 前端 子专栏 · Small Fire 技术笔记 Ext.js简介 Ext JS是一个JavaScript框架，它具有面向对象编程的功能。它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器。 Ext 是封装 Ext JS 中所有类的命名空间 Ext.js 命名规范 Ext JS中的命名约定遵循标准JavaScript约定，这不是强制性的，而是遵循的良好做法。 它应该遵循camel case语法命名类，方法，变量和属性。 如果name与两个单词组合，则第二个单词将始终以大写字母开头。 名称 惯例 Class Name 以大写字母开头，然后是camel case E.g. StudentClass Method Name 以小写字母开头，然后是camel case E.g. doLayout() Variable Name 以小写字母开头，然后是camel case E.g. firstName Property Name 以小写字母开头，然后是camel case E.g. enableColumnResize = true Constant Name 只有大写，E.g. COUNT, MAX_VALUE 在Ext JS中定义类 Ext.onReady 是指在整个页面加载完后执行： <script type="text/javascript"> Ext.onReady(function(){ //页面初始化代码 }); </script> Ext.define() 用于在Ext JS中定义类。 ...

原文：Small Fire · Easy UI 技术总结 · 前端 子专栏 · Small Fire 技术笔记 Easy UI使用场景

原文：Small Fire · Easy UI 技术总结 · 前端 子专栏 · Small Fire 技术笔记 Easy UI使用场景