利用Ext.XTemplate自定义组件

Extjs提供了强大的自定义模版功能，可以通过Ext.XTemplate和Ext.Template来自定义模版。

Ext的组件固然强大，但是其生成html代码也很多，有时候在项目中我们可能只需要显示一些信息而不需要用到Ext提供的功能。这时候可以根据需求自定义一些组件，来实现我们需要的功能，同时可以使页面的冗余代码减少，提高我们的程序的工作效率。

下面献上我自定义window的一个小例子，希望对初学者有所帮助，高手勿喷。这个窗口仅提供信息的显示，并且只有一个关闭按钮。

首先看上样式代码

.x-fy-window{
	/* background-color: #fff; */
	/* border:5px solid #157fcc; */
	border-color:rgb(204,204,204);
	border:5px solid rgba(0,0,0,0.2);
	border-radius:5px;
}
.x-ie .x-fy-window{
	border:5px solid rgb(204,204,204);
}
.x-fy-window-body{
	width: 100%;
	background-color: #fff; 
	padding: 10px;
}
.x-fy-window-toolbar{
	height: 30px;
	background-color: rgb(240,240,240);
	width: 100%;
	text-align: center;
}
.x-fy-window-btn{
	background: rgb(241,242,242);
	border:1px solid #999;
	color: #333;
	cursor: pointer;
	margin-top:3px;
	padding:3px 15px;
	
}
.x-fy-window-btn:hover{
	background: rgb(229,229,229);
}

下面是SimpleWindow的代码

/**
 * Ext Js library 4.2.1
 * @class Xzr.ux.SimpleWindow
 * @extends Ext.Component
 * 
 * 简单的弹出窗口，仅用于信息的显示
 */
Ext.define('Xzr.ux.SimpleWindow',{
	extend:'Ext.Component',
	
	modal:false,
	
	baseCls:'x-fy-window',
	
	floating:true,
	
	btnText:'关闭',
	
	closeAction:'hide',
	
	childEls: [
		'body',
		'toolbar'
	],
	
	renderTpl: [
		'<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>"',
		'<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
			'{%this.renderContent(out,values)%}',
		'</div>',
		'<div id="{id}-toolbar" class="{baseCls}-toolbar">',
			'<button id="{btnId}" class="{baseCls}-btn">{btnText}</button>',
		'</div>'
	],
	
	initComponent:function(){
		var me = this;
		
		if (me.modal) {
            me.ariaRole = 'dialog';
        }
        
		this.callParent();
		
		this.hide();
	},
	
	onRender:function(){
		var me = this,
			el = me.el,
			listeners,
			btn = el.down('.'+me.baseCls+'-btn');
		
		listeners = {
			scope:me,
			click:me.close
		}
		
		this.mon(btn,listeners);
		
		this.callParent();
	},
	
	onResize:function(width, height, oldWidth, oldHeight ){
		this.callParent(arguments);
		var height = this.getHeight(),
			bodyHeight = height-10-30;
			
		this.body.setStyle('height',bodyHeight+'px');
	},
	
	initRenderData: function() {
		var me = this,
		    data = me.callParent();
		    
		Ext.apply(data,{
			cls:me.cls+'-inner',
			//id:me.id+'-inner',
			btnId:me.id+'-btn',
			height:me.height-26,
			btnText:me.btnText,
			bodyStyle:'height:'+(this.height-40)+'px'
		})
		
		return data;
	},
    
	show:function(){
		this.center();
		this.callParent();
	},
    
	close: function() {
	    if (this.fireEvent('beforeclose', this) !== false) {
	        this.doClose();
	    }
	},

	// @private
	doClose: function() {
	    this.fireEvent('close', this);
	    this[this.closeAction]();
	},
	
	getTargetEl : function() {
	    return this.body;
	}
})

挑一些重点的代码来说下

baseCls:'x-fy-window',

用来定义窗口的样式

	childEls: [
		'body',
		'toolbar'
	],
	
	renderTpl: [
		'<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>"',
		'<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
			'{%this.renderContent(out,values)%}',
		'</div>',
		'<div id="{id}-toolbar" class="{baseCls}-toolbar">',
			'<button id="{btnId}" class="{baseCls}-btn">{btnText}</button>',
		'</div>'
	],
	

其中childEls用来定义组件的子元素，在renderTpl中需要用{id}-x的方式为子元素定义ID，如上面的body，需要用{id}-body来定义Id。 Ext.AbstractComponent.childEls 中有详细的介绍，这样可以在方法中直接用this.body来获取到子元素。

renderTpl中定义了组件初始化的模版，其中 '{%this.renderContent(out,values)%}' 是为了支持tpl属性。

onRender方法中定义了按钮的单击事件。

floating定义这是一个浮动的组件。

show方法中的this.center定义居中显示

用法展示

/**
 * Ext Js library 4.2.1
 * @class Xzr.view.index.AnnouncementWindow
 * @extends 
 * 公告显示
 */
Ext.define('Xzr.view.sys.index.AnnouncementWindow',{
	extend:'Xzr.ux.SimpleWindow',
	
	modal:true,
	
	width:960,
	
	height:550,
	
	tpl:[
		'<div class="x-fy-gonggao-title">系统公告-{title}</div>',
		'<div class="x-fy-gonggao-content">{content}</div>'
	],
	
	cls:'x-gonggao-window',
	
	//增加model的支持
	update:function(htmlOrData,loadScripts, callback){
		
		htmlOrData = htmlOrData ||{};
		if(htmlOrData.isModel){
			htmlOrData = htmlOrData.data;
		}
		
		this.callParent([htmlOrData,loadScripts, callback]);
	}
	
})

data

{
	content: "<p>All subclasses of Component may participate in the automated Ext component lifecycle of creation, rendering and destruction which is provided by the Container class. Components may be added to a Container through the items config option at the time the Container is created, or they may be added dynamically via the add method.</p><p>All user-developed visual widgets that are required to participate in automated lifecycle and size management should subclass Component.</p><p>See the Creating new UI controls chapter in Component Guide for details on how and to either extend or augment Ext JS base classes to create custom Components.</p>"
	id: "20131108001"
	title: "Extending Ext.Component"
}

显示效果