EXTjs组件.docVIP

组件 每个ExtJS应用程序是由一或多个称为组件(components)的部件(widgets)组成的.所有的组件都是Ext.Component的子类,Ext.Component包含自动化生命周期管理的功能,如创建、渲染、尺寸控制、定位和销毁等，因此所有组件都自动拥有这些功能。ExtJS提供了非常多可直接使用的组件，并且从这些组件继承并扩展自己的自定义组件也是很容易的一件事情。组件层次结构 容器(Container)是一种可以包含其他组件的特殊组件。一个典型的应用程序是由许多按树状机构嵌套在一起的组件组成的，称之为组件层次结构。容器负责管理子组件的生命周期，包括子组件的创建、渲染、尺寸控制、定位和销毁。一个典型的应用程序组件层次结构一般使用Viewport作为顶级容器，它的子元素可以包含其他嵌套的容器或者非容器组件： 容器的items属性配置添加子组件。以下这个例子使用Ext.create创建了两个Panel,然后将这两个Panel作为子组件添加到一个Viewport中:var childPanel1 = Ext.create(Ext.panel.Panel, { title: Child Panel 1, html: A Panel }); var childPanel2 = Ext.create(Ext.panel.Panel, { title: Child Panel 2, html: Another Panel }); Ext.create(Ext.container.Viewport, { items: [ childPanel1, childPanel2 ] }); 容器使用布局管理器(LayoutManagers)来管理容器中子组件的尺寸和定位。 XType（组件类型）和延迟实例化 每个组件都有一个用来表示类型的名字，称为xtype。例如，组件Ext.panel.Panel的xtype为panel。上面那个例子展示了如何添加 已经创建好的组件 到容器中。在容器的子元素（items）配置中，为子元素指定xtype，子元素不会马上实例化，而是由容器决定子元素何时该实例化。例如：一个使用到TabPanel（选项卡）的应用程序，选项卡的每一tab页只有在用户单击的时候才会去渲染。 下面的示例代码每个tab页都会监听各自的渲染完成（rendered，在渲染结束后触发）事件，在渲染后弹出提示。运行这个示例马上会弹出一个提示，那是因为运行后默认tab页被渲染并立即呈现在容器中了。第二tab页的提示不会弹出，只有你单击了第二页，它才会实例化并呈现。这说明了tab页会按需进行实例化和渲染。 Ext.create(Ext.tab.Panel, { renderTo: Ext.getBody(), height: 100, width: 200, items: [// { xtype: panel, title: Tab One, html: The first tab, listeners: { render: function() { Ext.MessageBox.alert(…); } } }, {//panel 是xtype 的默认值 title: Tab Two, html: The second tab, listeners: { render: function() { Ext.MessageBox.alert(…); } } } ] }); 显示和隐藏 所有组件都有内建的显示（show）和隐藏（hide）方法。组件的隐藏方法默认使用css属性“display：none“，但是你可以使用hideMode属性修改隐藏方法的配置： Var panel = Ext.create(Ext.panel.Panel,{ renderTo:Ext.getBody(), title:Test, html:TestPanel, //使用CSSvisibility属性来显示和隐藏这个组件hideMode:visibility }); panel.hide();//隐藏组件 panel.show();//显示组件 浮动组件 浮动组件,指的是使用css绝对定位(position:absolute)让组件脱离浏览器文档