Ext下载 & 简介_笔记_01

工作需要开始学习Ext JS 4.2,主要通过阅读书籍的方式,简单的做一个笔记摘录一下。

~ 优势特征:

  jQuery为代表的基础组件库,虽然为巨大社区贡献了无数插件,能够满足基本的开发使用,但是缺乏统一管理。ExtJs为我们提供了一套风格一致、集成良好的组件库,选择了Ext就相当于拥有了从底层基础组件库到上层各种高级组件的工具集合

 

~ 收费还是免费

  • 免费授权(社区版):基于GPL免费使用Ext,不过要把相关源代码全部开放出来,只针对再次发布的项目起作用,不针对内部使用。
  • 企业授权:不受到免费协议的限制。
  • OEM/Reseller License:可以将Ext封装为软件开发库来售卖。

    

~ 学习版免费开发包下载

  Ext JS 4.2.1版本

 

  Ext JS 4.2.1 在线开发文档(本地也有开发文档不过需要部署到服务器中)

 

~ 目录结构:

  examples: 官方演示示例,便于初学者学习;

  docs: Ext文档,可为开发提供参考;

  locale: 存放各国语言包;

  resources: Ext使用的图片和样式文件;

  src: Ext的源码文件;

  ext-all.js: Ext的核心库,必须引入的;

  ext-all-dev.js: 调试版本,开发使用;

  license.txt: Ext使用许可文件;

  release-notes.html: 从Ext 4版本以来的修改记录;

 

~Hello World!

  书中推荐firebug进行编译,我这里还是vs code;

  核心依赖就三个:

    1、样式包 ext-all.css;

    2、核心包 ext-all.js;

    3、中文语言包 ext-lang-zh_CN.js;

    (因为样式包,又调用了另一个包,所以最后结构如下:)

    

   经典入门Hello World:

复制代码
<!-- 引入依赖 -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>

<!-- 弹窗 -->
<script>
        Ext.onReady(function() {
            Ext.MessageBox.alert('helloworld', 'Hello World');
        });
</script>
复制代码

  效果:

    

~ 术语介绍:

  配置项(Config options)特性、功能、外观的属性;

  配置对象(Configuration object):配置项组成的对象,用来定义组件的特性、功能、外观,一个配置对象就是一个组件的定义,通过树状的层次结构来描述一个完整的界面;

  属性(properties):把除了配置项之外的所有象的属性都统称为属性,而对象中的键统称为属性名称,值称为属性值;

  方法(Methods):在配置对象中,除了配置项外,值为函数的,都统称为方法;

  字段(Field):在Ext JS中,表单内输入组件被统称为字段(field);

  修改方法(setter):在使用Ext.define定义类的时候,在config配置项中定义的属性,都        会自动为它们创建以set为前缀加上第一个字母转换为大写后的属性名称的修改方法,如属性名称为name,则修改方法的名称为setName,修改方法的作用是设置属性的值;

  访问方法(getter):与修改方法类似,是框架为config配置项中定义的属性自动创建的用来获取属性值的方法,方法的名称会以get为前缀,再加上第一个字母转换为大写后的属性名称;

  更新方法(updater):如果为属性定义了更新方法,那么在调用属性的修改方法时,会去执行更新方法。方法的名称会以update为前缀,再加上第一个字母转换为大写后的属性名称。该方法会在调用修改方法后,新的属性值与旧的属性值不同时被调用;

 

~ 常用配置项,需要熟练掌握

  • requires:在自定义类时,需要引用其他类的时候,就要使用该配置项,该配置项类似于JAVA的import语句.主要作用就是让Ext JS在实例化这些类时,先自动去加载requires中的类,以避免这些类因未被加载而造成错误。
  • extend:在自定义类时,用来指定该自定义类将从那个类扩展
  • mixins:将一个类混入要定义的类。如果查看一下Ext.Base的mixin方法,就可知道混入的作用就是把混入类的方法复制到要定义的类的原型(prototype)。
  • items:用来定义当前组件的子组件
  • xtype:用来说明当前配置对象使用的是哪个,在API中具体的类说明中,在类名旁边就可以查到类的xtype。
  • config:在config中定义的属性,框架会自动为属性生成修改方法和访问方法。其实还有其他一些方法及事件,具体可以查看Ext.Class源代码中的getConfigNameMap方法。
  • id:可以为组件定义一个唯一的id,以方便查找组件。该id也会作为组件最终的HTML代码的id
  • itemId:作用与id类似,不过不会将它作为组件最终的HTML代码的id,而且,该id的使用范围也被限制在容器内。这样做的好处就是,避免由于id太多,造成id冲突。
  • scope:用来定义作用域
  • defaults:用来简化组件定义代码的配置项。(也就是默认配置,是可以被覆盖的)当父组件使用了defaults配置项的时候,在创建子组件的时候,会将该配置项中定义的配置应用到子组件中。例如,工具栏中有许多按钮,如果为每个按钮都设置一次配置项,那么,要对进行修改的时候,就不得不逐个地修改,这很麻烦,而使用defaults,则只修改一次就行了。如果某个按钮需要使用不同的配置,则直接定义配置项,在创建组件时就会使用这个直接定义的配置项来替换defaults中定义的,从而实现了差异化。
  • defaultType:与defaults的作用类似,不过它是用来设置子组件的默认类型的,如表单中有许多输入字段,而使用最多的是文本字段,则可在定义表单面板时使用该配置项来指定默认的子组件类型是文本字段,这样就不必为每个文字字段编写xtype了。
  • layout:用来定义容器的布局

posted @   无意生  阅读(240)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
Title

点击右上角即可分享
微信分享提示