ExtJs-04-windows窗体

HTML:

1.windows窗体
<div id="win" class="x-hidden" style="padding: 20px;"></div>
<hr/>
2.TabPanel Window
<div id="tabWin" class="x-hidden" style="padding: 20px;"></div>
<hr/>

JS:

//1 windows窗体
            var win = Ext.create('Ext.Window', {
                contentEl: 'win', //主题显示的html元素
                width: 300,
                height: 200,
                closable: true,
                plain: false, //true则主体背景透明，false则主体有小差别的背景色，默认为false
                title: '1.windows窗体'
            });
            win.show(); //必须的，不然窗体不显示，默认的窗口是可拖动的，可关闭的，可拖动大小的

            //2.TabPanel Window
            var tabWin = Ext.create('Ext.Window', {
                contentEl: 'tabWin',
                width: 300,
                height: 200,
                closable: true,
                title: 'TabPanel Window',
                items: new Ext.TabPanel({
                    activeTab: 0,
                    border: false,
                    items: [
                        { title: 'tab1', html: 'tab1在windows窗体中' },
                        { title: 'tab2', html: 'tab2在windows窗体中' },
                    ]
                }),
                bbar: [
                    { text: '确定' },
                    { text: '取消', handler: function () { tabWin.close(); } }
                ],
                buttons: [
                    { text: 'B确定' },
                    { text: 'B取消', handler: function () { tabWin.close(); } }
                ],
                buttonAlign: 'center'
            });
            tabWin.show();