第4章-EXT--窗口与对话框.docVIP

PAGE PAGE 11 南京杰易软件有限责任公司 培训资料 第4章 窗口和对话框 视图区ViewPort 在前面的示例中，为了显示一个面板，我们需要在页面上添加一个div，然后把 Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。看下面的代码： Ext.onReady(function(){ new Ext.Viewport({  enableTabScroll:true, layout:fit, items:[{title:面板, html:, bbar:[{text:按钮1}, {text:按钮2}] }]}); }); Ext.onReady(function(){ new Ext.Viewport({  enableTabScroll:true, layout:fit, items:[{title:面板, html:, bbar:[{text:按钮1}, {text:按钮2}] }]}); }); Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变。 Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等，当然在需要的时候其它布局也会常用。看下面的代码： Ext.onReady(function(){ new Ext.Viewport({  enableTabScroll:true, layout:border, items:[{title:面板, region:north, height:50, html:h1网站后台管理系统!/h1 }, {title:菜单, Ext.onReady(function(){ new Ext.Viewport({  enableTabScroll:true, layout:border, items:[{title:面板, region:north, height:50, html:h1网站后台管理系统!/h1 }, {title:菜单, region:west, width:200, collapsible:true,  html:菜单栏 }, { xtype:tabpanel,  region:center, items:[{title:面板1}, {title:面板2}]  }]  }); }); 对话框 由于传统使用alert、confirm等方法产生的对话框非常古板，不好看。因此，ExtJS提供了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm等，实现华丽的应用程序界面。 Ext.onReady(function(){  Ext.get(btnAlert).on(click,function(){ Ext.MessageBox.alert(请注意,这是ExtJS的提示框); }); });input id=btnAlert type=button value=alert框 /Ext的对话框都封装在Ext.MessageBox类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。看下面的代码： Ext.onReady(function(){  Ext.get(btnAlert).on(click,function(){ Ext.MessageBox.alert(请注意,这是ExtJS的提示框); }); }); input id=btnAlert type=button value=alert框 / 除了alert以外，Ext还包含confirm、prompt、progress、wait等对话框，另外我们可以根据需要显示自下定义的对话框。普通对话框一般包括四个参数，比如confirm的方法名为confirm