`

Event、Component and Container

阅读更多

3EventComponent and Container

3.1、组件的祖先Observable实现了对事件的管理

ExtJS的事件包括HTML DOM事件和ExtJS的各种组件自定义的特定事件。

因为ExtJS 的组件都是Ext.Observable类的子类,而Ext.Observable类提供了事件管理的功能,因此,ExtJS的组件具备了事件管理的所有功能,包括:注册事件(addEvent)、监听事件(addListener)、触发事件(fireEvent)、删除事件(removeEvent)等,这些功能是从Ext.Observable类继承来的。

正是因为ExtJS的组件可以注册自己的事件,因此,ExtJS中的各种组件,一般都定义了各自的特定事件,例如,对于Ext.Button组件,定义了事件:menutriggerover,这个事件的含义是:If this button has a menu, this event fires when the mouse enters the menu triggering element。当然,ExtJS的组件,除了可以具有自己特定的事件外,也可以具有HTML DOM事件。例如,对于Ext.Button,就有click事件,显然,这个事件就是HTML DOMclick事件。通过监听并处理组件的事件,可以实现对组件行为的控制。

对于ExtJS中事件,为了阻止事件的Bubble,可以直接调用事件对象的stopEvent()方法,即:EventObject.stopEvent();

3.2ExtJS常用组件的继承关系及其管理

下图是ExtJS部分组件及其继承关系,注意,只是部分,因为ExtJS的组件实在太多了:


每个Ext的组件都有一个xtype。你可以开发自己的组件,并在Ext.ComponentMgr中注册,即可将一个新的xtype与你自己定义的新的组件的类关联起来,当你在程序中使用该新的xtype创建组件类的实例时,ExtJS就能够根据该xtype创建出正确的组件的对象。

在创建Ext.Component类及其子类的对象时,如果设定了id属性的值,则可以使用语句:

Ext.getCmp(“Component及其子类对象的id”);

获得特定的Component及其子类组件对象的引用。

3.3Ext.Container容器组件

Ext.ContainerExtJS的组件容器。在创建容器对象时,通过配置Ext.Container类的items属性来指明该容器所包含的组件。例如:

var panel1 = {
html : 'I am Panel1',
id : 'panel1',
frame : true,
height : 100
}
var panel2 = {
html : '<b>I am Panel2</b>',
id : 'panel2',
frame : true
}
var myWin = new Ext.Window({
id : 'myWin',
height : 400,
width : 400,
items : [
panel1,
panel2
]
});
myWin.show();
 

可以通过Ext.Container.insert()Ext.Container.add()Ext.Container.remove()等方法动态变更容器中的组件,但是,为了能够使变更的效果显示出来,在进行添加、删除操作后,需要使用语句:

Ext.Container.doLayout();

可以使用Ext.Container及其子类容器提供的方法操作容器。Ext.Viewport是一个常用的容器,它缺省将占用整个浏览器屏幕。

 

  • 大小: 45.7 KB
分享到:
评论

相关推荐

    javaee API

    javax.ejb The javax.ejb package contains the Enterprise JavaBeans classes and interfaces that define the contracts between the enterprise bean and its clients and between the enterprise bean and the ...

    windowbuilder pro 3

    You can easily add any component to a container by using drag-and-drop, add an event handler to your controls, change various properties of controls using property editors and much more. Generated ...

    windowbuilder pro 4

    You can easily add any component to a container by using drag-and-drop, add an event handler to your controls, change various properties of controls using property editors and much more. Generated ...

    windowbuilder pro 1

    You can easily add any component to a container by using drag-and-drop, add an event handler to your controls, change various properties of controls using property editors and much more. Generated ...

    windowbuilder pro 2

    You can easily add any component to a container by using drag-and-drop, add an event handler to your controls, change various properties of controls using property editors and much more. Generated ...

    Swing框架定制Component

    Swing的核心类`JComponent`继承自`Component`,并且进一步继承自`Container`,这使得Swing组件既可以作为容器使用,也可以作为叶节点使用。Swing的设计模式允许开发者通过覆盖特定的方法来自定义组件的行为和外观。 ...

    Extjs源码之--Ext事件机制/继承关系

    Ext.container.Viewport.on('click', function(event, target) { if (event.getTarget('.myItemClass')) { // 处理特定类的元素点击 } }, this, {delegate: '.myItemClass'}); ``` 这里,`delegate`选项用于...

    React Bits 中文版

    ✔ Event Handlers ✔ Flux Pattern ✔ One Way Data Flow ✔ Presentational vs Container ✔ Third Party Integration ✔ Passing Function To setState() ✔ Decorators ✔ Feature Flags ✔ Component Switch ✔...

    VoIP Demo源码演示

    RTC event handling), and the code to interface between RTC and the UI. The intent of this quasi- layering approach is to limit the direct hooks from the RTC backend to the UI and make it easier to ...

    java AWT常用事件和监听器接口方法

    - `ComponentListener`:包括四个方法:`componentMoved(ComponentEvent e)`、`componentHidden(ComponentEvent e)`、`componentResized(ComponentEvent e)` 和 `componentShown(ComponentEvent e)`,分别处理组件...

    java 常用事件及对应的监听器和方法

    - `componentResized(ComponentEvent e)` - `componentShown(ComponentEvent e)` - `componentHidden(ComponentEvent e)` **2.11 ContainerEvent** - **监听器接口名**:ContainerListener - **接口中的方法**:...

    corejava_partII.ppt

    Container是能够包含多个Component的特殊Component,它允许我们组合各种组件以创建复杂的布局。 3. **布局管理器**:为了在Container中有效地排列组件,Java提供了多种布局管理器: - **BorderLayout**:将容器...

    TMS Pack for FireMonkey2.3.0.1

    Fixed : Issue with alignment and resizing of detail view container when item has no detail view assigned in TTMSFMXTableview v1.6.0.0 New : XE3 Support New : OnSearchOpen / OnSearchClose called ...

    程序员开发实战系列《一》注册、预览小程序

    微信之父张小龙的一段话 小程序是一种不需要下载安装即可使用的应用,它实现了应用...而微信小程序主要依赖于微信平台,使用微信台提供的View、Event、Component、Container等构建;可以说是介于 Web App 和 Nativ

    Java的GUI设计.ppt

    AWT的主要类包括Component、Container、Graphics以及LayoutManager。Component是所有组件的基类,它定义了组件的基本属性和行为。Container是能够包含其他组件的类,它扩展了Component。Graphics类提供了在组件上...

    Java 2 图形设计卷(AWT和SWING))

    Component是所有可视对象的基类,而Container则是一个可以包含其他Component的组件,例如Frame(顶级窗口)和Panel(容器)。AWT还提供了一系列的事件处理机制,如MouseListener和KeyListener,使得用户可以通过鼠标...

    dragAndDrop:测试 Angular 拖放功能

    if (event.previousContainer === event.container) { moveItemInArray(this.items, event.previousIndex, event.currentIndex); } else { transferArrayItem( event.previousContainer.data, event.container...

    Java语言编程-GUI编程.pdf

    AWT的容器继承结构包括了多个类,如Component、Container、Window、Panel、ScrollPane、Frame、Dialog和Applet等。 顶级容器是不能被其他容器容纳的GUI组件,它们包括Window、Frame和Dialog。Window是一个没有边框...

Global site tag (gtag.js) - Google Analytics