ExtJS之对话框及窗口篇

窗口无论是在基本的js中还是在Ext这种js框架中都是比较常见的，而且现在多数js框架也在视图打造唯美的窗口，当然，Ext就是其中一个。Ext的窗口时很漂亮的，而且类型众多，今天我们就从基础做起逐渐来了解Ext的窗口。

注意：对于Ext的目录及其文件存放结构在此就不再过多赘余。

基本的Ext对话框

首先用Ext的话肯定要引入其类库及其样式文件，注意对于ext-base.js和ext-all.js的引入顺序一定不能够颠倒。

<link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script>

 

接下来当然就是写我们自己的js代码，注意Ext和jQuery一样都会在load事件之前加载代码，在Ext中对应的就是onReady事件。

Ext.onReady(function(){ Ext.get("btnAlert").on("click",function(){ Ext.MessageBox.alert("系统信息","你好这是Ext的Alert对话框！!"); } ); );

首页我们在页面有一个按钮，其id为btnAlert，然后在onReady中我们给按钮添加click事件，在按钮的单击事件中我们通过Ext.MessageBox.alert()来弹出对话框。

效果如图：

 

确认对话框

我们都知道在js中有时会用到confirm，当然在ext中也是有的。