[Ext JS]说透Ext JS的窗口及对话框用法| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]说透Ext JS的窗口及对话框用法

## 说透Ext JS的窗口及对话框用法
关于浏览器的窗口和对话框的基本介绍可以参考：　
### HTML窗口与对话框
窗口类 Ext.window.Window
Ext JS的窗口更类似于HTML的对话框, 但是Ext JS的窗口可以像一般的视图一样显示很复杂的内容。Ext JS 的组件类是Ext.window.Window ， 继承自父类 Ext.panel.Panel， 也就是说Ext JS的窗口具备Panel所有的特性，除此之外， Ext JS的窗口也支持模态对话框。
### 窗口的一般用法
窗口一般使用的示例代码如下：
 ```javascript
Ext.create('Ext.window.Window', {      
	title: 'Hello',    
	height: 400,                
	width: 600,            //
	layout: 'fit', //窗口布局      
	items: [{               
	xtype:'component',         
	html:'一个Component的组件'   
	},{   //窗口子项定义        
	xtype: 'grid',            
	title:'一个Grid',          
	columns: [{ header: 'World' }], //不包含数据的Grid，只有一个标题列         
	store: Ext.create('Ext.data.ArrayStore', {}) // 定义一个空的Store            
	}]           
}).show();

```
窗口类实例对象通过 Ext.create('Ext.window.Window') 或 new Ext.window.Window() 进行创建
窗口创建完成不会立即显示， 需要调用 show() 方法显示
关闭窗口有两个方法close() 和 destrory() ， 推荐使用前者
以上代码显示的效果如下：
![](/upload/picture/2022-10-11/upload_5116e858a9ccc819de4a52daf7f1ecea.png)
### Ext.MessageBox 便捷的窗口静态类
按照以上方式定义窗口在只是简单的弹出一些提示窗口的场景下显得有点繁琐， 对照浏览器window对象的alert()、confirm()等便捷方法， Ext JS提供了一个用于快速实例窗口的静态类Ext.MessageBox， 该类下提供了一些静态方法，以alert() 为例。
Ext.MessageBox.alert('标题','提示消息');
alert() 方法接收两个参数：
第一个参数是窗口的标题
第二个参数是窗口中显示的信息
示例效果如下图：
![](/upload/picture/2022-10-11/upload_8ac7ad4d87aa03d521405e6242f9e31b.png)
Ext.MessageBox 这个类还有一个简化的别名 Ext.Msg ，也就是上面的代码可以进一步简化为：
Ext.Msg.alert('标题','提示消息');
### Ext.Msg 常用显示窗口的方法
对应window对象的alert()、confirm() 和prompt() 方法， Ext.Msg提供了对应的方法
alert ( title, message, [fn], [scope] )
confirm ( title, message, [fn], [scope] )
示例代码：
```javascript
Ext.Msg.confirm('标题', '确认信息',function(id){
	 if(id=='yes'){          
	 alert('点击了Yes按钮');    
	 }           
});
```
![](/upload/picture/2022-10-11/upload_44af0a1bdaae87874a5e169a641ce2b7.png)
prompt ( title, message, [fn], [scope], [multiline], [value] )
![](/upload/picture/2022-10-11/upload_a576af513b252b915061db1adef1380f.png)
### Ext.Msg的通用方法
如果对弹出窗口有更对的设置，比如设置弹出框的图标和设置弹出框按钮的显示等， 可以使用show() 方法，该方法支持buttons和icon等配置， 这些配置属性在alert()等方法中是不支持的。 show() 方法的使用示例如下：
```javascript
Ext.Msg.show({     
	title:'标题',     
	message: '消息',    
	buttons: Ext.Msg.YESNOCANCEL,    
	icon: Ext.Msg.QUESTION,        
	fn: function(btn) {           
	if (btn === 'yes') {         
	console.log('点击了Yes按钮');      
	} else if (btn === 'no') {      
	console.log('点击了No按钮');     
	} else {                       
	console.log('点击了Cancel按钮');
	}      
	}     
});
```

也可以像创建一般Window实例的方式创建MessageBox， 示例代码如下：
```javascript
Ext.create('Ext.window.MessageBox', {       
	closeAction: 'destroy' //关闭窗口时销毁 
	}).show({         
	title: '标题',       
	message: '消息'      
});
```

### show()方法的按钮及配置
alert方法仅提示一条信息，该类型窗口默认只有一个按钮，confirm和prompt 按钮需要有互动，confirm默认是Yes和No两个按钮， prompt 默认是OK和Cancel 两个按钮。以上的第三个参数是一个函数类型， 该函数的参数中可以获取点击的按钮以及用户的输入。以prompt 为例：
```javascript
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){  
	if (btn == 'ok'){      
	// process text value and close...  
}});
```

alert()等方法弹出的对话框的按钮是固定的，如果需要修改按钮显示的配置就需要使用show()方法，通过 buttons 属性可以配置窗口中需要的按钮， 这个属性配置Ext.Msg定义的一些静态变量，比如 Ext.Msg.OK, 配置代码示例如下：
buttons: Ext.Msg.OK,。该变量对应的按钮配置是： OK : {text: 'OK', itemId: 'ok'}
类似的按钮配置的静态变量有：
单按钮
OK : {text: 'OK', itemId: 'ok'}
YES : {text: 'Yes', itemId: 'yes'}
NO :{text: 'No', itemId: 'no'}
CANCEL: {text: 'Cancel', itemId: 'cancel'}
双按钮
OKCANCEL:
 [    {text: 'Cancel', itemId: 'cancel'},    {text: 'OK',     itemId: 'ok'}]

YESNO:
 [    {text: 'No',  itemId: 'no'},    {text: 'Yes', itemId: 'yes'}]

三个按钮
YESNOCANCEL:
[    {text: 'Cancel', itemId: 'cancel'},    {text: 'No',     itemId: 'no'},    {text: 'Yes',    itemId: 'yes'}]

这些变量对应的值是一个整数类型的值，比如OK的值1，所以直接配置数字也是可以的。
如果只想修改按钮的显示名称，可以使用buttonText属性配置。
	buttons: Ext.Msg.YESCANCEL,	buttonText:{		         yes: '确认',		         cancel: '取消'	},

### 窗口的图标显示
窗口中显示图标 icon: Ext.Msg.QUESTION, Ext.Msg.QUESTION 是一个CSS样式，显示的效果是：
![](/upload/picture/2022-10-11/upload_647b47e6375177a7fc870f11fd0d3663.png)
可以配置的图标样式变量有：
INFO Ext.baseCSSPrefix + 'msgbox-info'
WARNING :Ext.baseCSSPrefix + 'msgbox-warning'
QUESTION:Ext.baseCSSPrefix + 'msgbox-question'
ERROR :Ext.baseCSSPrefix + 'msgbox-error'
本篇在线示例
https://osxm.github.io/extjs_dev_ency/#windowdemo

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]说透Ext JS的窗口及对话框用法

网站导航