Extjs-lesson1

❝小闫语录:活得傻一些,活得糊涂一些,活得简单一些,你会发现生活很美好。不要将事情计较的太过明白,不要将事情看得过于透彻,不要将自己陷入一堆琐事之中。 ❞

Ext.js 系列课程笔记

1.准备工作

  1. 熟悉 HTML
  2. 熟悉 CSS
  3. 熟练 javaScript
  4. 熟练 JS 的面向对象(oo)编程
  5. 熟练 Ajax

❝书籍推荐:《JavaScript 设计模式》《征服Ajax Web 2.0 开发技术详解》 ❞

2.Hello World

创建一个 html 页面,将 ext 的一些必要文件进行引入:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 css 文件 -->
    <link rel="stylesheet" type="text/css" href="./ext-2.3.0/resources/css/ext-all.css"/>
    <!-- 引入 js 文件 -->
    <script type="text/javascript" src="./ext-2.3.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext-2.3.0/ext-all-debug.js"></script>
    <!-- 引入自己的 js 文件 -->
    <script type="text/javascript" src="./lesson01.js"></script>
  </head>
  <body></body>
</html>

创建对应的 js 文件 lesson01.js

(function() {
  Ext.onReady(function() {
    Ext.MessageBox.alert("提示", "hello world");
  });
})();

❝它的入口函数为 onReady ,即在加载完成 html 页面之后,再加载入口函数的内容。 ❞

显示效果:

ext-弹窗

3.官方 API 文档

小闫同学将开发工程师常用的官方文档进行了汇总,地址为「https://www.pythonnote.cn/OfficialDocuments/」文档会不定期补充更新,请收藏或转发给好友。

Ext.js 的文档也包含在内,点击对应按钮即可跳转。 包含了英文文档以及中文文档,英文吃力的同学,中文更方便哦 ~ ❞

document

下面是官方文档界面说明:

API-zh

❝文档讲解的超级详细,当哪里不理解的时候,可以快速检索学习。 ❞

4.对原生 js 扩展

4.1 Array remove

extjs 对原生的 js 进行了一些扩展,使得开发更加的高效化,比如 Array 的方法:remove。下面是它的 API

remove( o ) : Array
Removes the specified object from the array. If the object is not found nothing happens.

Available since: 1.1.0

Parameters
o : Object
The object to remove

Returns
Array
this array

简单的翻译来说:从数组中移除某个指定的对象,如果对象不存在,那么相当于什么都没发生,也不会报错。传入的参数是要移除的对象,返回的是这个数组。

「示例」

var msgArray = [1, 2, 3, 4, 5];
msgArray.remove(1);
alert(msgArray); // 1 被移除,弹出窗口显示 2,3,4,5

❝如果直接在 js 代码中执行上述代码会报错:没有 remove 方法。而在 Ext.onReady 中执行上述代码时,会正常无误。 ❞

当然上面只是众多 API 中的一个小例子,是为了说明它对原生 js 进行了很多扩展。那么他底层是怎么做的呢?

4.2 原理

Array.prototype.remove = function(obj) {
  if (null == obj) {
    return false;
  }
  for (var i = 0, n = 0; i < this.length; i++) {
    if (this[i] != obj) {
      this[n++] = this[i];
    }
  }
  this.length -= 1;
};

// 测试
var msgArray = [1, 2, 3, 4, 5];
msgArray.remove(1);
alert(msgArray); // 1 被移除,弹出窗口显示 2,3,4,5

其实大部分都是通过上述 prototype 为类添加方法,只不过官方的代码逻辑一定比这个完善的多。

本文分享自微信公众号 - 全栈技术精选(Pythonnote),作者:小闫同学啊

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTTP协议

    在正则中也有特殊含义,匹配的是数字到非数字的边界("123!"匹配的是3和!之间),不是数据

    小闫同学啊
  • 扶我起来,前端还没倒下,我不能睡

    长路漫漫,唯夜作伴。虽然一天的工作头昏脑胀,但是仍然放不下我心心念念的前端啊,扶我起来,我还可以学~

    小闫同学啊
  • elasticsearch中join类型数据如何进行父子文档查询?

    ES 中 join 类型数据如何根据父文档查询全部子文档?又如何根据子文档查询其父文档呢?更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

    小闫同学啊
  • 基于 Hive 的文件格式:RCFile 简介及其应用

    Hadoop 作为MR 的开源实现,一直以动态运行解析文件格式并获得比MPP数据库快上几倍的装载速度为优势。不过,MPP数据库社区也一直批评Hadoop由于文...

    用户1177713
  • 细节:如何轻松影响他人|每天听本书

    罗伯特·西奥迪尼、史蒂夫·马丁、诺瓦·戈尔茨坦是知名的说服力与影响力研究权威。在影响力和说服力领域,罗伯特·西奥迪尼的著作《影响力》已被翻译成26种语言,在全球...

    Albert陈凯
  • web前端开发初学者十问集锦(3)

    我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度,否则无效。

    Dabelv
  • 编译原理学习笔记-3:词法分析(一)基本过程、正规式和有限自动机

    词法分析的任务是:从左往右逐个字符地扫描源程序,产生一个个的单词符号。也就是说,它会对输入的字符流进行处理,再输出单词流。执行词法分析的程序即词法分析器,或者说...

    Chor
  • 这三行C语言代码到底有没有问题?

    各位,今天无意间碰到一个有意思的小知识点,感觉还不错,就拿来与大家分享一下, 话不多说,请看代码:

    7089bAt@PowerLi
  • 索引的实现原理

    索引的文件存储形式与存储引擎有关, InnoDB 引擎的索引文件后缀是 .ibd ; MyISAM 引擎则是 .MYI

    技能锦囊
  • ElectroAR:分布式电触觉刺激的触觉转移

    我们介绍了ElectroAR,一个用于手部技能训练的视觉和触觉共享系统。该系统由一个头戴式显示器(HMD)、两个摄像头、触觉感应手套和电刺激手套组成。学员可以戴...

    Rosalie

扫码关注云+社区

领取腾讯云代金券