ExtJS5.1学习笔记4——在html属性中显示大段的html

Ext.onReady(function(){
	var win = Ext.create('Ext.Window', {
		id: 'win',
		layout: 'fit',
		title: 'test window',
		width: 500,
		height: 400,
		contentEl: 'content',
		autoShow: true,
		maximizable: true,
		minimizable: true,
		listeners: {
			minimize: function(win, opts){
				win.collapse();
			}
		},
		buttons: [{
			text: '关闭',
			handler: closeWin
		}]
	});
});

这里主要是用到了contentEl属性，该属性指定了一个div的id，这个div放在html的body中，并指定了class="x-hidden"属性，代码如下：

<div id="content" class="x-hidden">
    <h2>欢迎访问起飞网Extjs教程</h2>
    <p>
        更多Extjs教程，请访问<a href="http://www.qeefee.com/zt-extjs">http://www.qeefee.com/zt-extjs</a>
    </p>
</div>

上面的关闭按钮对应的处理函数为closeWin，代码如下：

function closeWin(){
	var win = Ext.getCmp('win');
	win.close();
}

浏览器中访问的效果如下图：

本文参考了起飞网：http://www.qeefee.com/article/extjs-window-in-detail