ExtJs入门学习

原创 于 2019-08-01 11:05:02 发布 · 595 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ext

      本人软件工程师一名，从事企业应用的前后台开发，因为最近项目上涉及到extJs,之前从没用到过，所以接下来开始学习ext，结合项目总结一些常用的组件，本文为第一篇，从认识extJs开始！

什么是Ext JS

ExtJS的前身是YUI(Yahoo User Interface)。经过不断的发展与改进，ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基础库之一,利用ExtJS构建的WEB应用具有与桌面程序一样的标准用户界面和操作方式，并能够跨不同的浏览器平台使用。

就目前的市场趋势，现在用户对体验的要求越来越高。涌现出很多优秀的前台javascript框架，如Prototype、JQuery、ExtJS等等，ExtJS无疑是其中优秀的解决方案之一。它能够帮助开发者快速实现良好的用户界面开发，在加上ExtJS又是开源的，所以ExtJS的生命力极强，作为web开发人员来说，我们需要掌握这个优秀的技术帮助我们开发。比较适合我们这种web开发，前后端都得做，不想写css，但又逃脱不了页面的程序员，哈哈！

历史

Ext JS基于MVC / MVVM架构。 最新版本的Ext JS 6是一个单一的平台，可以用于桌面和移动应用程序，而不需要为不同的平台提供不同的代码。

Ext JS 1.1

Ext JS的第一个版本是由Jack Slocum在2006年开发的。它是一组实用程序类，它是YUI的扩展。 他将该库命名为YUI-ext。

Ext JS 2.0

Ext JS 2.0版于2007年发布。此版本具有用于桌面应用程序的新API文档，但功能有限。 此版本与以前版本的Ext JS没有向后兼容性。

Ext JS 3.0

Ext JS版本3.0是在2009年发布的。这个版本添加了新的功能作为图表和列表视图，但是以速度为代价。 它向后兼容2.0版本。

Ext JS 4.0

Ext JS 3发布后，Ext JS的开发人员面临着提高速度的主要挑战。 Ext JS 4.0版本发布于2011年。它具有完整的修订结构，其后是MVC架构和一个快速的应用程序。

Ext JS 5.0

Ext JS版本5.0是在2014年发布的。这个版本的主要变化是将MVC架构改为MVVM架构。 它包括在启用触摸的设备上构建桌面应用程序的功能，双向数据绑定，响应式布局和更多功能。

Ext JS 6.0

Ext JS 6合并了Ext JS（用于桌面应用程序）和sencha touch（用于移动应用程序）框架。

特征

这些是Ext JS的突出特性

  1. 可定制的UI小部件与丰富的UI集合，如网格，枢轴网格，表单，图表，树木。
  2. 新版本与旧版本的代码兼容性。
  3. 灵活的布局管理器有助于组织跨多个浏览器，设备和屏幕大小的数据和内容显示。
  4. 高级数据包将UI小部件与数据层分离。 数据包允许客户端使用高度功能的模型收集数据，这些模型支持排序和过滤等功能。
  5. 它是协议不可知的，并且可以从任何后端源访问数据。
  6. 可定制的主题Ext JS窗口小部件提供了跨平台一致的多个现成主题。

优点

 Ext JS是业务级Web应用程序开发的领先标准。 Ext JS提供了为桌面和平板电脑构建强大应用程序所需的工具。

  1. 简化针对现代和传统浏览器的跨平台开发，跨桌面，平板电脑和智能手机。
  2. 通过IDE插件集成到企业开发环境中，提高开发团队的生产力。
  3. 降低Web应用程序开发的成本。
  4. 授权团队创建具有吸引力的用户体验的应用程序。
  5. 它有一组小部件使UI强大和容易。
  6. 它遵循MVC架构这样高度可读的代码

 

ExtJS的开发包

要开始Ext之旅的第一步就是要获得开发包，我们可以从官方网站里进行下载: http://www.sencha.com/products/extjs/download

解压缩文件夹，你会发现各种JavaScript和CSS文件，你将包括在我们的应用程序。 主要包括以下文件:

包结构说明：

builds目录为ExtJS压缩后的代码

docs目录为ExtJS的文档

examples目录中是官方的演示示例

locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文

overview是ExtJS的功能概述

packages中是ExtJS各部分功能的打包文件

resource中书ExtJS要用到的图片文件与样式表文件

src目录是未压缩的源码

bootstrap.js是ExtJS库的引导文件,通过参数可以自动切换ext-all.js和ext-debug.js

ext-all.js文件是ExtJS的核心库,是必须要引入的

ext-all-debug.js文件是-all.extjs的调试版,在调试的时候可能需要使用

spket-1.6.23插件下载

ExtJS的基本组件

Ext.Viewport : 可视区域，底层容器，容纳panel

Ext.Window : 弹出窗口,容纳panel

Ext.Panel : 面板，容纳组件的容器，也可以容纳panel

Ext.form.FormPanel : 表单面板，继承自Panel并增加了一些表单的特性

Ext.form.TextField : 文本框

Ext.Button : 按钮

Ext.form.NumberField : 数字输入框，提供自动键击过滤和数字校验， 继承自TextField

Ext.form.DateField : 日期选择框

Ext.form.ComboBox : 下拉列表

Ext.form.RadioGroup : 单选按钮组

Ext.form.CheckboxGroup : 复选框组

Ext.grid.GridPanel : 列表面板，继承自panel用于展示列表数据

Ext.grid.EditorGridPanel：可编辑列表面板

 

ExtJS的基本布局

BorderLayout 东南西北中

FitLayout 填充父容器

FormLayout  FormPanel的默认布局方式，

accordionLayout 手风琴效果布局

anchorLayout 单列多行布局

ColumnLayout 列布局，单行多列

TableLayout 表格布局

VboxLayout 纵向盒子布局

hboxLayout 横向盒子布局

ExtJS基础入门
liangd_zhu的博客
04-03 1万+
公司需要用ExtJS搭建系统框架，然后，这个很老了，没有用过 。开始进行时候一脸懵逼，因为搜索了相关的知识，面临如下问题：1.版本太多，从一到六，不知从何入手2.提供的教程和视频都是需要下载 Sencha Cmd 和 Ruby进行操作，对于只懂前端的我来说还是优点难度的。解决：1.询问公司技术，下载需要的版本，是5.1.02.Sencha和Ruby可以不下载，他们只是可视化图形转换，编辑更容易理解...
Ext.js 4 部分基础内容学习记录
积累、分享。聚沙成塔
07-29 1623
ext.js 4
ExtJS入门教程
09-25
该教程分为三部分： 1、开始使用extjs 2、组件的介绍以及应用 3、ExtJS的核心 该教程有相应的代码以供参考 <!--导入Ext3.2--> <link rel="stylesheet" type="text/css" href="extjs3.2/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs3.2/ext-all-debug.js"></script> <script type="text/javascript" src="extjs3.2/ext-lang-zh_CN.js"></script>
Ext JS学习
08-10
Ext JS学习
Extjs快速入门
10-21
新手特别适合 ，快速入门Extjs 之书
ExtJS快速入门指南.pdf
01-15
一、ExtJS 框架简介...............................................................................................................3 二、如何使用Ext.................................................................................................................. 3 三、Ext 组件......................................................................................................................... 4 1、组件简介...................................................................................................................4 2、组件XType............................................................................................................... 5 3、组件应用...................................................................................................................5 4、组件配置选项........................................................................................................... 6 5、组件属性...................................................................................................................7 6、组件方法...................................................................................................................8 四、事件及事件响应............................................................................................................. 8 五、Component 及Container 简介........................................................................................ 11 1、Ext.Component........................................................................................................ 11 2、Ext.Comtainer.......................................................................................................... 12 六、面板Ext.Panel.............................................................................................................. 12 面板Panel 简介............................................................................................................ 12 面板内容...................................................................................................................... 14 面板与DOM 节点DIV................................................................................................. 15 七、ViewPort....................................................................................................................... 16 八、窗口Window................................................................................................................ 18 九、对话框.......................................................................................................................... 20 十、TabPanel....................................................................................................................... 24 十一、布局.......................................................................................................................... 28 十二、表格Grid.................................................................................................................. 31 十三、TreePanel.................................................................................................................. 32 十四、表单Form................................................................................................................. 34 十五、理解Html DOM、Ext Element 及Component............................................................ 36 十六、Ext 类中的get 方法简介........................................................................................... 37 十七、如何学习及掌握Ext..................................................................................................39
extjs学习文档
04-01
extjs学习文档，应用实例, 帮助文档 。收藏保存，以后用得上。
extjs入门学习
03-22
无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。本文将简单地介绍Ext的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和初级了解HTML Dom。
SSH与ExtJS入门学习资料分享
在学习SSH与ExtJS的结合使用时，将SSH用于后端的业务逻辑处理和数据持久化，而ExtJS则负责前端用户界面的展现和用户交互。这样可以充分利用SSH框架的强大后端处理能力，以及ExtJS丰富的前端界面控件和组件。 - **...
ExtJS入门学习与项目源代码解析
对Ext JS的数据处理能力的学习也是必不可少的，包括理解数据模型（Models）、数据存储（Stores）和数据视图（Views）的概念。 #### 2.5 自定义组件和插件 Ext JS提供了丰富的插件和扩展机制，学习如何创建自定义...
ExtJS入门教程(超级详细).pdf
03-05
ExtJS入门教程(超级详细).pdf
"ExtJS 入门学习：从基础到实践
为了开始学习 ExtJS，首先需要准备好开发环境。可以到官网下载最新版本的 ExtJS，解压后查看里面的包结构，其中包括 adapter、build、docs、exmapl等文件夹。adapter 负责将提供的第三方底层库映射为 Ext 所支持的...
extjs教程 介绍很详细,很好,extjs学习必看的一本电子书
05-28
介绍很详细,很好,extjs学习必看的一本电子书
Ext.js 6 示例学习
05-09
Ext.js 6 示例学习，内有一中文文档及一英文文档，供大家学习
Ext.js教程完整版
06-29
在这章里，我们将介绍 ExtJS 的基本功能。如果你对 web 开发熟悉的话，您会 惊诧于 ExtJS 框架的优雅！不同其他的 JavaScript 库， ExtJS 为您的开发夯实了基础，只 需几行代码，你就可以制作出丰富的用户界面。 本章包括： 1. ExtJS 的功能和您将会喜爱上它的原因； 2. 如何获得 Ext 并在 web 应用中采用它； 3. 采用”适配器(adapters)“使得 Ext 和其他的 JavaScript 库共存； 4. 充分利用 AJAX 技术； 5. 在您的语言中展示 ExtJS 对象； 关于 Ext： 我们采用最新的的 Ext 2.x 版本， 1.x 版本到 2.x 版本的是一个重组的过程，包括 添加新的组件、重命名组件用来重新组织结构等等。这使得 1.x 和 2.x 兼容性很低。 3.x 版 本则不然，他对 2.x 有很强的兼容性，可以很好的联合本书中所设计的内容。 Ext 的 开发组决定在日后的版本发布中都做到向前兼容。 Ext 库是对雅虎 YUI 的一个拓展，提供了它所不支持的特性：良好的 API，真实 的控件。虽然 YUI 致力于用户界面，但是它却没有提供许多有用的功能。
ExtJs 入门教程
weixin_30292843的博客
12-31 664
ExtJs 入门教程一[学习方法] ExtJs 入门教程二[Hello World] ExtJs 入门教程三[窗体：Window组件] ExtJs 入门教程四[表单：FormPanel] ExtJs 入门教程五[文本框：TextField] ExtJs 入门教程六[按钮：Button] ExtJs 入门教程七[登陆窗体Demo：Login] ExtJs 入门教程八[脚本调试Fir...
ExtJS快速入门指南
热门推荐
励志的蜗牛
11-15 2万+
1 ExtJS快速入门指南 一、ExtJS 框架简介.......................................................................................................................... 2 二、如何使用Ext.....................................
无废话ExtJs 入门教程一[学习方法]
weixin_33704234的博客
06-18 157
本教程的制作是基于我从零开始学习ExtJs到正式在项目中应用的整个学习过程和方法，其中肯定会有许多不足之处，还请大家多多批评指正。 很多书籍和网上的教程大多是从API与ExtJs的机制开始讲解的。而在我的学习过程中发现，没有接触过ExtJs或对javascript了解很少的同事，在看到前面几章的时候，感觉到很茫然（本人也系菜鸟），所以对此深有感触。针对此问题，我的学习方法如下： 1.从Ex...
基于CTRV模型与车载激光雷达的周向防碰撞系统在Cars im2019+s imu link环境下的应用
最新发布
08-18
内容概要：本文介绍了基于CTRV（常转向角速率和变速度）轨迹预测模型和车载激光雷达的周向防碰撞系统的构建及其在Cars im2019+s imu link环境下实现安全预警与避障功能的方法。文中详细解释了CTRV模型的工作原理，展示了简化的Python伪代码用于演示车辆状态预测流程，并阐述了车载激光雷达在感知周围环境中起到的关键作用。此外，还讨论了如何利用Simulink工具链对整个系统进行建模，确保能够在潜在碰撞事件前及时采取措施避免事故的发生。最后强调了该系统的灵活性和扩展性，鼓励研究者在此基础上继续改进算法性能。 适用人群：从事智能交通系统、自动驾驶技术研发的专业人士，尤其是关注车辆主动安全技术和路径规划领域的工程师和技术爱好者。 使用场景及目标：适用于需要提升车辆安全性、减少交通事故发生的场合，特别是那些致力于开发高级驾驶辅助系统(ADAS)的企业和个人。主要目的是通过引入先进的数学模型和传感技术，增强车辆应对复杂路况的能力，保障驾乘人员的生命财产安全。 其他说明：文中提供的代码片段仅为概念验证性质，实际部署时可能需要考虑更多的工程细节和技术挑战。同时，随着技术的进步，未来还可以集成更多类型的传感器数据，进一步丰富和完善现有的防碰撞机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值