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>' ],
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" }