`
zhiming_817
  • 浏览: 164229 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

《ExtJS2.0实用简明教程》之组件的配置属性

    博客分类:
  • ajax
阅读更多

在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
	}
	]
});

  每一个组件除了继承基类中的配置属性以外,还会根据需要增加自己的配置属性,另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定 义。学习及使用ExtJS,其中最关键的是掌握ExtJS中的各个组件的配置属性及具体的含义,这些配置属性在下载下来的ExtJS源码文档中都有详细的 说明,可以通过这个文档详细了解每一个组件的特性,如下图所示:

  由于所有的组件都继承自Ext.Component,因此在这里我们列出组件基类Component中的配置属性简单介绍。

配置属性名称
类型
简介
allowDomMove
Boolean
当渲染这个组件时是否允许移动Dom节点(默认值为true)。
applyTo
Mixed
混 合参数,表示把该组件应用指定的对象。参数可以是—节点的id,一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id。当使用 applyTo,也可以提供一个id或CSS的class名称,如果子组件允许它将尝试创建一个。如果指写applyTo选项,所有传递到 renderTo方法的值将被忽略,并且目标元素的父节点将自动指定为这个组件的容器。使用applyTo选项后,则不需要再调用render()方法来 渲染组件。
autoShow
Boolean
自动显示,如为true,则组件将检查所有隐藏类型的class(如:’x-hidden’ 或’x-hide-display’并在渲染时移除(默认为false)。
cls
String
给组件添加额外的样式信息,(默认值为''),如果想自定义组件或它的子组件的样式,这个选项是非常有用的。
ctCls
String
给组件的容器添加额外的样式信息,默认值为'')。
disabledClass
String
给被禁用的组件添加额外的CSS样式信息,(默认为"x-item-disabled")。
hideMode
String
组件的隐藏方式,支持的值有’visibility’,也就是css里的visibility,’offsets’负数偏移位置的值和’display’也就是css里的display,默认值为’display’。
hideParent
Boolean
是否隐藏父容器,该值为true时将会显示或隐藏组件的容器,false时则只隐藏和显示组件本身(默认值为false)。
id
String
组件的id,默认为一个自动分配置的id。
listeners
Object
给对象配置多个事件监听器,在对象初始化会初始化这些监听器。
plugins
Object/Array
一 个对象或数组,将用于增加组件的自定义功能。一个有效的组件插件必须包含一个init方法,该方法可以带一个Ext.Component类型参数。当组件 建立后,如果该组件包含有效的插件,将调用每一个插件的init方法,把组件传递给插件,插件就能够实现对组件的方法调用及事件应用等,从而实现对组件功 能的扩充。
renderTo
Mixed
混合数据参数,指定要渲染到节点的id,一个DOM的节点或一个已存在的容器。如果使用了这个配置选项,则组件的render()就不是必需的了。
stateEvents
Array
定义需要保存组件状态信息的事件。当指定的事件发生时,组件会保存它的状态(默认为none),其值为这个组件支持的任意event类型,包含组件自身的或自定义事件。(例如:[‘click’,’customerchange’])。
stateId
String
组件的状态ID,状态管理器使用该id来管理组件的状态信息,默认值为组件的id。
style
String
给该组件的元素指定特定的样式信息,有效的参数为Ext.Element.applyStyles中的值。
xtype
String
指定所要创建组件的xtype,用于构造函数中没有意义。该参数用于在容器组件中创建创建子组件并延迟实例化和渲染时使用。如果是自定义的组件,则需要用Ext.ComponentMgr.registerType来进行注册,才会支持延迟实例化和渲染。
el
Mixed
相当于applyTo

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  关于ExtJS中组件的详细使用说明,包括Component的属性Properties、方法及事件详细,请参考wlr.easyjf.com中的VIP文档《ExtJS组件Component详解(1)、(2)》。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics