`
jayyanzhang2010
  • 浏览: 377991 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext核心组件使用

阅读更多
1、概述
  Ext的组件非常多,要把所有的组件数完都比较难,更别说记住每一个组件提供的配置选项、属性、方法及事件了。学习Ext不能死记硬背,要掌握方法,注意寻找规律,Ext设计的优秀之处在于,他的组件体系层次结构是非常明确的。只要掌握了核心组件的一些核心特性,会让我们进行Ext应用开发将会获得事半功倍的效果。
2、Observable
  实现事件驱动功能,包括事件监听,事件触发及响应等,是所有组件的父类(因为Component继承Observable)。提供了addListener(on)、removeListener(un)、fireEvent等核心的事件操作方法。简单解读Observable API中每一个重要的特性。
3、Component
  Component也就是组件,Component是所有组件的父类;Component类提供了Ext组件共有的特性, 比如初始的流程、组件的配置选项应用、插件应用,组件渲染,组件公共的配置选项等。简单解读Component API中每一个重要的特性。
4、BoxComponent
  Component是抽象的,是没有现状的,可能是一个点,也可能是一条线,甚至可能是一些没有外观的东西。
  然而应用程序界面中的元素大多数都是有形状的,最基本的也就是盒子状,有高度,有宽度。BoxComponent组件就是用来表示这种具有高度及宽度的组件。简单解读BoxComponent的API中每一个重要的特性。
5、Container
  容器,是指能容纳其它东西的物件。对于控件来说,也就是能容纳其它子元素的控件。比如,表单里面即可以包含表单字段,也可以包含其它的文本、图片等元素;树里面包含树节点;而窗口中可以放置表单、树及选项板等各种各样的部件。因此,表单、树、窗口等等控件,都是容器组件。容器是用得最多的一种组件之一,因此Ext专门定义了一个容器组件类,在该类中包含了与容器相关的各种各样操作,包括如何管理(添加删除、查找)容器中的子元素,容器的渲染模式等,大多数控件都是Container的子类。
  容器最重要的特性就是能放置其它元素,容器里面的元素可以是容器,也可以是其它非容器组件;Ext容器有一个布局属性,Ext通过与容器关联的布局对象来处理容器中子元素的排列及显示信息。
  在应用程序中可以直接使用Container类,一般更多的时候是使用他的子类,有两大类型的容器,一个是代表整个浏览器窗口的Viewport,另外一种是面板Panel。面板panel是使用得非常多的容器,很多控件都是继承自Panel。
  Container中大概有哪些方法?组件查找、往容器中加东西、往容器中删除东西等等。简单解读Container的API中每一个重要的特性。
6、Panel
  面板Panel是ExtJS控件的基础,很多高级控件都是在面板的基础上扩展的,还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。
  默认情况下,我们使用{}定义子元素时,如果不写xtype,则默认就是面板。
分享到:
评论

相关推荐

    ext上传组件,可以多文件上传

    SwfUploadPanel.css、SwfUpload.js以及SwfUploadPanel.js是EXT上传组件的核心文件。SwfUploadPanel.css是样式表文件,负责定义上传界面的样式和布局,使其符合EXT框架的美学标准,提供良好的视觉效果。SwfUpload.js...

    ext教程、ext核心API 、ext中文教程

    "EXT核心API"则深入介绍了EXT的内部机制和主要类库,包括Store(数据存储)、Model(数据模型)、Controller(控制器)以及Ext.application(应用入口)等。理解这些API是提升EXT开发技能的关键。例如,Store负责...

    Ext2.0 文件上传组件

    在本文中,我们将深入探讨这个组件的核心特性、工作原理以及如何在实际项目中集成和使用。 1. **核心特性**: - 多文件选择:用户可以一次选择多个文件进行批量上传,提高了操作效率。 - 进度条显示:在上传过程...

    Ext2.0组件,全组件和帮助手册

    事件驱动是Ext2.0的核心特性之一,通过监听和响应事件,可以实现组件间的交互和应用程序的逻辑控制。 6. **国际化支持**: 部分中文帮助手册的存在表明,Ext2.0支持多语言,这使得非英语用户也能便捷地学习和使用...

    UI组件(ext jquery ucren)

    EXT的核心特性包括数据绑定、布局管理、拖放支持以及对多种浏览器的良好兼容性。 jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画制作以及Ajax交互。它以其简洁的API和高效的性能受到广大开发者...

    Ext2.0.2经典的一个JS组件带EXT中文手册.rar

    - `ext-core-debug.js`和`ext-core.js`:这些是ExtJS的核心库,包含基本的DOM操作、事件处理和一些基础组件,对于只需要使用一小部分功能的项目很有用。 3. **其他文件**: - `CHANGES.txt`:记录了ExtJS从上一...

    Ext表单组件之textField

    Ext.form.TextField是Ext JS中的一个核心组件,它允许用户在表单中输入单行文本。这个组件可以用于创建各种类型的输入字段,如普通文本输入、密码输入、电子邮件地址输入等,通过设置不同的配置选项来满足不同的需求...

    Ext表单组件之checkbox

    它的核心组件之一是表单元素,其中“checkbox”(复选框)是非常常见且重要的交互元素。本篇文章将深入探讨Ext表单组件中的checkbox,以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框...

    EXT.form组件

    EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件,用于创建具有不同功能的交互式表单。在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 ...

    EXT核心API详解 19章

    EXT核心API详解是一份深入解析EXT库核心技术的教程,共分为19个章节,涵盖了EXT库的各个方面。EXT是一个基于JavaScript的用户界面库,它提供了一套完整的组件模型,用于构建富互联网应用程序(RIA)。EXT API是EXT库...

    EXT2.3+EXT2.0教程

    手册通常会详细介绍EXT的安装步骤、基本概念、组件使用方法以及事件处理等核心内容。通过阅读这份手册,新手可以理解EXT的架构,学习如何创建窗口、面板、表格等基本组件,以及如何通过布局管理器来组织这些组件。 ...

    ExtJS开发插件及Ext包

    - 插件的核心方法是`init`,在这个方法中,你可以向关联的组件添加事件监听器、修改配置或者在组件生命周期的特定阶段执行操作。 - 为了使用插件,需要将其包含在应用的脚本加载序列中,并通过`plugins`配置项将其...

    ext3.jar ext使用非常多

    EXT框架的核心在于其丰富的组件库,包括数据网格、表单、窗口、工具栏、菜单等,这些组件具有高度可定制性和交互性,使得开发者可以轻松创建出功能强大、界面美观的Web应用。EXT3是EXT发展中的一个重要阶段,它引入...

    EXT核心API详解(第一部分)

    EXT核心API是EXT JS库的重要组成部分,它提供了一系列丰富的组件和功能,用于构建富客户端Web应用。EXT JS是一个强大的JavaScript框架,尤其在数据可视化、表格处理、窗口系统和用户界面设计方面表现出色。EXT核心...

    Ext表单组件实现用户注册

    本篇文章将聚焦于如何使用Ext表单组件来实现用户注册的功能。 首先,我们来看看`form.html`。这是一个HTML文件,通常会包含一个基本的页面结构,以及引入Ext JS库的链接。它可能还会有一个`<script>`标签,用来加载...

    EXT 组件和控件的 视频教程

    EXT组件和控件是Sencha EXT JS框架的核心部分,它提供了丰富的用户界面元素,用于构建交互式的Web应用程序。EXT Grid是EXT JS中的一个关键组件,主要用于展示和操作表格数据。这个“EXT 组件和控件的 视频教程”很...

    ClientSocketAI2Ext

    该扩展组件的核心功能可能包括但不限于以下几点: 1. **多连接管理**:原生的socket组件可能只支持单个连接,而"ClientSocketAI2Ext"可能允许同时管理多个TCP连接,这对于需要与多个服务器交互的应用来说是至关重要...

    ext3-0例子非常好用的js组件

    EXT3.0 JS组件库的核心特点包括: 1. **组件化设计**:EXT3.0提供了一系列可重用的UI组件,如表格、面板、表单、树形视图、菜单、工具栏、窗口等。这些组件都有详细的配置选项,可以根据需求进行定制,大大简化了...

Global site tag (gtag.js) - Google Analytics