一、整体效果图
二、使用说明及效果图
2.1、程序代码及说明:
2.1.1、窗口使用的代码说明
Ext.create('Ext.window.Window', {
title: '这是窗口标题',
height: 400,
width: 400,
layout: 'fit',
closable:true,
closeAction:'hide',
collapseDirection:'left',
collapseMode :'header',
collapsible :true,
plain:true,
titleAlign :'center',
draggable :false,
floatable:false,
header :true,
hideMode:'visibility',
headerPosition:'top',
modal:true,
onEsc:function(){
Ext.Msg.alert("提示信息","您按了esc键了!");
},
tools:[{
type:'refresh',
tooltip: 'Refresh form Data',
handler: function(event, toolEl, panel){
Ext.Msg.alert("提示信息","Refresh form Data!");
}
},{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
Ext.Msg.alert("提示信息","Get Help");
}
}],
items: [{
xtype: 'panel',
border: false,
frame:true,
html:'这是一个窗口'
}],
buttonAlign:'center',
buttons: [{
text: 'buttons_btn1',
tooltip:'这是buttons中的一个按钮.'
}]
}).show();
属性 | 说明 |
closable | boolean 默认为true 是否可以关闭窗口,若设置为false,则在窗口的右上角不会出现关闭按钮. |
closeAction | String 默认为:
|
collapseDirection | String 窗口折叠的方向,可设置为 |
collapsible | boolean 默认为false 是否可以将窗口折叠 |
titleAlign | String 默认为 left 标题的对齐方式,可设置为 |
draggable | boolean 默认为true 是否可以拖动窗口, |
header | boolean/object 设置为false时,不显示标题栏,同时也可以将一个header对象赋给它,用于自定以标题栏 |
hideMode | String 隐藏窗口的方式, |
headerPosition | String 默认为top 标题栏的位置,可设置为 |
modal | boolean 默认为false 当设置为true是,窗口显示时,所有其他的组件都会被放到后面,不能被操作,知道窗口关闭或隐藏为止. |
onEsc | function 用于定义.按esc键的响应函数 |
tools | Object[]/Ext.panel.Tool[] 工具栏 |
dockedItems | Object/Object[] 可以在窗口的上/下/左/右部添加类似于toolbar的工具栏. |
bbar | Object/Object[] 在窗口的底部添加类似于toolbar的工具栏,类似的还有tbar/lbar/rbar |
buttonAlign | String 指定buttons定义的按钮的对齐方式,可设置为:'right', 'left' and 'center' |
buttons | Object/Object[] 指定窗口的一组操作按钮. |
注意: EXTJS中有很多属性都是有依赖关系的,如collapseDirection设定的值必须在collapse 设置为true时才有效.