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