EXTJS 4 窗口组件使用示例

一、整体效果图

 

二、使用说明及效果图

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 默认为:destroy 关闭窗口时执行的动作,destroy:将窗口销毁,hide:将窗口隐藏
collapseDirection	String 窗口折叠的方向,可设置为'top', 'bottom', 'left' or 'right'
collapsible	boolean 默认为false 是否可以将窗口折叠
titleAlign	String 默认为 left 标题的对齐方式,可设置为"left", "right" or "center".
draggable	boolean 默认为true 是否可以拖动窗口,
header	boolean/object 设置为false时,不显示标题栏,同时也可以将一个header对象赋给它,用于自定以标题栏
hideMode	String 隐藏窗口的方式,display(none style),visibility(hidden style),offsets(移出可见区域)
headerPosition	String 默认为top 标题栏的位置,可设置为'top', 'bottom', 'left' or 'right'
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时才有效.