当前位置： 首页 > news >正文

第三章 Ext框架基础及核心简介

news 2025/6/7 3:20:34
3.1 Ext类库简介
底层API（core）： 底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询
器等基础的功能。其它控件都是建立在这些底层api 的基础上。
CompositeElement.js
DomHelper.js
DomQuery.js
Element.js
EvenManager.js
Ext.js
Fx.js
Template.js
UpdateManager.js
控件(widgets):  控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、
表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控
件来实现友好、交互性强的应用程序的UI。
//form
//grid
//layout
//menu
//tips
//tree
Action.js
BoxComponent.js
Button.js
ColorPalette.js
Component.js
ComponentMgr.js
Container.js
CycleButton.js
DataView.js
DatePicker.js
Editor.js
Layer.js
LoadMask.js
MessageBox.js
PagingToolbar.js
Panel.js
PanelDD.js
ProgressBar.js
Resizable.js
Shadow.js
SplitBar.js
SplitButton.js
TabPanel.js
Toolbar.js
Viewport.js
Window.js
WindowManager.js
实用工具（Utils）:  Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON
数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功
能。
ClickRepeater.js
CSS.js
Date.js
DelayedTask.js
Format.js
JSON.js
KeyMap.js
KeyNav.js
MixedCollection.js
Observable.js
TaskMgr.js
TextMetrics.js
XTemplate.js

3.2 Ext的组件

大致可以分为三大类，即 基本组件、工具栏组件、表单及元素组件。
基本组件：
boxExt.BoxComponent具有边框属性的组件
ButtonExt.Button按钮
colorpaletteExt.ColorPalette调色板
componentExt.Component组件
containerExt.Container容器
cycleExt.CycleButton 
dataviewExt.DataView数据显示视图
datepickerExt.DatePicker日期选择面板
editorExt.Editor编辑器
editorgridExt.grid.EditorGridPanel可编辑的表格
gridExt.grid.GridPanel表格
pagingExt.PagingToolbar工具栏中的间隔
panelExt.Panel面板
progressExt.ProgressBar进度条
splitbuttonExt.SplitButton可分裂的按钮
tabpanelExt.TabPanel选项面板
treepanelExt.tree.TreePanel树
viewportExt.ViewPort视图
windowExt.Window窗口
工具栏组件：
toobarExt.Toolbar工具栏
tbbuttonExt.Toolbar.Button按钮
tbfillExt.Toolbar.Fill文件
tbitemExt.Toolbar.Item工具条项目
tbseparatorExt.Toolbar.Separator工具栏分隔符
tbspacerExt.Toolbar.Spacer工具栏空白
tbsplitExt.Toolbar.SplitButton工具栏分隔按钮
tbtextExt.Toolbar.TextItem工具栏文本项
表单及字段组件：
formExt.FormPanelForm面板
checkboxExt.form.Checkboxcheckbox录入
comboExt.form.ComboBoxcombo录入框
datefieldExt.form.DateField日期选择项
fieldExt.form.Field表单字段
fieldsetExt.form.FieldSet表单字段组
hiddenExt.form.Hidden表单隐藏项
htmleditorExt.form.HtmlEditorhtml编辑器
radioExt.form.Radio单选按钮
textareaExt.form.TextArea区域文本框
textfieldExt.form.TextField表单文本框
timefieldExt.form.TimeField时间录入项
triggerExt.form.TriggerField触发录入项

3.3  组件的使用
组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()， 创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构 造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性 及值，组件根据构造函数中的参数属性值来初始化组件。比如下面的例子：
var obj = {title:"hello",width:300,height:200,html:"Hello World"};
var panel = new Ext.Panel(obj);
panel.render("hello");

<div id="hello">&nbsp;</div>
可以省掉变量obj，直接写成如下的形式：
var panel = new Ext.Panel(Panel({title:"hello",width:300,height:200,html:'<h1>Hello World</h1>'});
panel.render("hello");
render 方法后面的参数表示页面上的div 元素id，也可以直接在参数中通过renderTo 参 数来省略手动谳用render 方法，只需要在构造函数的参数中添加一个renderTo 属性即可， 如下:
New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello World </h1>'});
对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性items传递数组方式实现构造。
var panel=new Ext.TabPanel({
  width:300,
  height:200,
  items:[ {
    title:"面板1",
    height:30
    }, {
    title:"面板 2",
    height:30
    },{
    title:"面板3",
    height:30
     }]});
  panel.render("hello");
上面的代码与下面的代码等价：
var panel=new Ext.TabPanel({
  width:300,
  height:200,
  items:[new Ext.Panel( {
    title:"面板1",
    height:30}),new  Ext.Panel({
    title:"面板2",
    height:30}),new Ext.Panel({
    title:"面板3",
    height:30})]});
  panel.render("hello");
前者不但省略了new Ext.Panel这个构造函数，最重要的是前者只有在促使花TabPanel的时候才会创建子面板，而后者则在程序一开始就会创建子面板。也就是说，前者实现的是延迟加载。

3.4 组件的配置属性
     在ExtJS 中，除了一些特殊的组件或类以外，所有的组件在初始化的时候都可以在构造
函数使用一个包含属性名称及值的对象，该对象中的信息也就是指组件的配置属性。
比如配置一个面板：
new Ext.Panel({
    title:"面板",
    html"面板内容",
    height:100}
);
再比如创建哟个按钮：
var b=new Ext.Button({
  text:"添加",
  pressed:true,
  heigth:30,
  handler:Ext.emptyFn
});
再比如创建一个Viewport及其中的内容：
new Ext.Viewport({
  layout:"border",
  items:[{region:"north",
    title:"面板",
    html:"面板内容",
    height:100}, {
    region:"center",
    xtype:"grid",
    title:"学生信息管理",
    store:troe,
    cm:colM,
    store:store,
    autoExpandColumn:3
  } ]
});
  每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外 子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。
     由于所有的组件都继承自Ext.Component，因此在这里我们列出组件基类Component 中
的配置属性简单介绍。
配置属性类型简介
allowDomMoveBoolean
当渲染这个组件时是否允许移动Dom节点（默认值为true）。
applyToMixed
混合参数，表示把该组件应用指定的对象。参数可以是—节点的id， 一个DOM节点或一个存在的元素或与之相对应的在document中已出现 的id。当使用applyTo，也可以提供一个id或CSS的class名称，如果子组 件允许它将尝试创建一个。如果指写applyTo选项，所有传递到renderTo 方法的值将被忽略，并且目标元素的父节点将自动指定为这个组件的容 器。使用applyTo选项后，则不需要再调用render()方法来渲染组件。
autoShowBoolean
自动显示，如为true，则组件将检查所有隐藏类型的class（如：’xhidden’ 或’x-hide-display’并在渲染时移除(默认为false)。
clsString
给组件添加额外的样式信息，（默认值为''），如果想自定义组件或它的 子组件的样式，这个选项是非常有用的。
ctClsString
给组件的容器添加额外的样式信息，默认值为'')。
disabledClassString
给被禁用的组件添加额外的CSS样式信息，（默认为"x-item-disabled"）。
hideModeString
组件的隐藏方式， 支持的值有’visibility’ ， 也就是css 里的
visibility，’offsets’负数偏移位置的值和’display’也就是css里的display，
默认值为’display’。
hideParentBoolean
是否隐藏父容器，该值为true时将会显示或隐藏组件的容器，false时则
只隐藏和显示组件本身（默认值为false）。
idString
组件的id，默认为一个自动分配置的id。
listnenersObject
给对象配置多个事件监听器，在对象初始化会初始化这些监听器。
pluginsObject/Array
一个对象或数组，将用于增加组件的自定义功能。一个有效的组件插 件必须包含一个init方法，该方法可以带一个Ext.Component类型参数。 当组件建立后，如果该组件包含有效的插件，将调用每一个插件的init 方法，把组件传递给插件，插件就能够实现对组件的方法调用及事件应 用等，从而实现对组件功能的扩充。
renderToMixed
混合数据参数，指定要渲染到节点的id，一个DOM的节点或一个已存 在的容器。如果使用了这个配置选项，则组件的render()就不是必需的 了。
stateEventsArray
定义需要保存组件状态信息的事件。当指定的事件发生时，组件会保存 它的状态（默认为none），其值为这个组件支持的任意event类型，包含 组件自身的或自定义事件。（例如：[‘click’,’customerchange’]）。
stateIdString
组件的状态ID，状态管理器使用该id来管理组件的状态信息，默认值为 组件的id。
styleString
给该组件的元素指定特定的样式信息， 有效的参数为 Ext. Element. applyStyles  中的值。
xtypeString
指定所要创建组件的xtype，用于构造函数中没有意义。该参数用于在 容器组件中创建创建子组件并延迟实例化和渲染时使用。如果是自定义 的组件，则需要用Ext.ComponentMgr.registerType来进行注册，才会支 持延迟实例化和渲染。
elMixed
相当于applyTo

3.5 ExtJS组件的时间处理
     ExtJS 提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监 控控件状态变化、更新控件视图信息、与服务器进行交互等等。事件统一由 Ext.EventManager 对象管理，与浏览器W3C 标准事件对象Event 相对应，Ext 封装了一个 Ext.EventObject 事件对象。支持事件处理的类(或接口)为Ext.util.Observable，凡是继承该类 的组件或类都支持往对象中添加事件处理及响应功能。
     首先我们来看标准html 中的事件处理，看下面的html 代码：
<script>
  function a() {
  alert('some thing');
}
</script>
  <input id="btnAlert" type="button" οnclick="a();" value="alert框" />
点击这个按钮则会触发onclick 事件，并执行onclick 事件处理函数中指定的代码，这里 直接执行函数a 中的代码，也即弹出一个简单的信息提示框。再简单修改一下上面的代码， 内容如下：
<script>
function a() {
  alert('some thing');
}
window.οnlοad=function(){
  document.getElementById("btnAlert").οnclick=a;
}
</script>
<input id="btnAlert" type="button" value="alert框" />
上面的代码在文档加载的时候，就直接对btnAlert 的onclick 赋值，非常清晰的指明了 按钮btnAlert 的onclick 事件响应函数为a，注意这里a 后面不能使用括号“()”。 ExtJS 中组件的事件处理跟上面相似，看下面的代码：
<script>
function a(){
alert('some thing');
}
Ext.onReady(function(){
Ext.get("btnAlert").addListener("click",a);
});
</script>
<input id="btnAlert" type="button" value="alert框" />
Ext.get("btnAlert")得到一个与页面中按钮btnAlert 关联的Ext.Element 对象，可以直接调 用该对象上的addListener 方法来给对象添加事件，同样实现前面的效果。在调用addListener 方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或整个响应函数。 ExtJS 支持事件队列，可以往对象的某一个事件中添加多个事件响应函数，看下面的代码：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a);
});
     addLinster 方法的另外一个简写形式是on，由于调用了两次addListener 方法，因此当点 击按钮的时候会弹出两次信息。 当然，ExtJS 还支持事件延迟处理或事件处理缓存等功能，比如下面的代码：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
     由于在调用addListener 的时候传递指定的delay 为2000，因此当用户点击按钮的时候， 不会马上执行事件响应函数，而是在2000 毫秒，也就是两秒后才会弹出提示信息框。 当然，在使用Ext 的事件时，我们一般是直接在控件上事件，每一个控件包含哪些事件， 在什么时候触发，触发时传递的参数等，在ExtJS 项目的文档中都有较为详细的说明。比 如对于所有的组件Component，都包含一个beforedestroy 事件，该事件会在Ext 销毁这一个 组件时触发，如果事件响应函数返回false，则会取消组件的销毁操作。
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口", height:200, width:300
});
win.on("beforedestroy",function(obj){
alert("想关闭我，这是不可能的!");
obj.show();
return false;
});
win.show();});
由于在窗口对象的beforedestroy 事件响应函数返回值为false，因此执行这段程序，你 会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明，如 下面的代码与前面实现的功能一样：
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口",
height:200, width:300,
listeners:{"beforedestroy":function(obj){
alert("想关闭我，这是不可能的!");
obj.show(); return false;
}}
});
win.show();});














http://www.xdnf.cn/news/836515.html

相关文章：

  • win7 64位系统不支持curl解决办法
  • 莱佛士学生在Joo Chiat T恤设计比赛中获得最高奖项
  • ASP.NET虚拟主机安全漏洞解决方案 【 这篇文章不错 】
  • php中的递归算法,PHP递归算法（四）
  • 电脑重装系统后怎么恢复之前的数据？3个方法轻松完成数据恢复
  • web服务器攻击的八种方式_服务器攻击教学
  • 怎么搭建自己的网站？详细教程
  • 微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案
  • Apache学习之二、HTTPD的负载均衡
  • 一文带你了解SLB、F5、Nginx负载均衡
  • 工作流设计参考（包括PHP实现）
  • Android Studio CPU 性能剖析器
  • WIN7无线经常断线-间歇性地掉线-解决方法
  • VC6.0详细教程
  • 炒股入门与技巧
  • contos系统基础配置
  • 网络编程socket accept函数的理解
  • 【2024版】最新6款漏洞扫描工具来了！（附下载）看完这一篇就够了_windows漏洞扫描工具
  • 串口和TCP互相转发工具
  • java编程思想pdf高清
  • 网络设备主备配置系列2:netscreen防火墙双机主备
  • MUI框架-01-介绍-准备-创建项目
  • NHibernate配置
  • 逻辑门图解—与门、或门、非门、与非门、或非门、异或门、同或门
  • PHP实现数据进行四舍五入的4种方法
  • 制作高质量SVG的最佳工具,这些编辑软件你需要知道!
  • 【MySQL】——数据库设计概述与需求分析
  • Linux驱动程序的数据封装
  • Myeclipse下载与破解
  • vscode使用‘koroFileHeader‘插件生成注释