版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jaune161/article/details/18268405
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"
}
显示效果