利用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();    }},// @privatedoClose: 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"}

显示效果