首页 教程 API文档

窗体组件

2015-10-30 08:53:36

属性


父模块 Panel
依赖组件 Menu
Demo地址 Window

描述


Window组件继承与Panel组件,拥有Panel组件的所有方法与参数,Window组件是倾向于独立做弹出内容展示的一个组件.

窗体组件图片

成员列表


方法名称 成员类型 描述
minimizable public 窗体是否可被最小化
maximizable public 窗体是否可被最大化
closable public 窗体是否可被关闭
resizable public 窗体是否可被调整大小
draggable public 窗体是否可被拖动
close public 关闭窗口
minimize public 最小化窗口
maximize public 最大化窗口
restore public 还原窗口

参数选项


名称 类型 默认值 描述
defaultClass String "StdUI_Panel StdUI_Window" 默认css class名称
minWidth Number 180 最小宽度值
minHeight Number 100 最小高度值
width Number 600 窗体宽度值
height Number 400 窗体高度值
resizable Boolean true 窗体是否可以手动通过拖动调整大小
draggable Boolean true 窗体是否可以通过拖动标题栏而调整窗体位置
minimizable Boolean true 窗体是否可以被最小化
maximizable Boolean true 窗体是否可以被最大化
closable Boolean true 窗体是否可以被关闭
center Boolean true 窗体渲染之后是否居中显示
modal Boolean false 是否为模态窗口,处于顶层,加上背景遮罩
minimize Boolean false 窗体是否为最小化状态
maximize Boolean false 窗体是否为最大化状态
title String "Window" 窗口标题文字
renderTo String,Object "body" 窗口需要渲染到的目标位置,一个css选择器或者DOM元素
closeAction String "remove" 当手动关闭窗体的时候,需要执行的成员方法

事件


名称 回调参数 描述
minimize Boolean: 最小化状态 当窗口最小化的时候,会触发minimize事件
maximize Boolean: 最大化状态 当窗口最大化的时候,会触发maximize事件
restore 当窗口还原时候(通常为最大化之后还原),会触发restore事件
close 当关闭窗口的时候(执行close方法),会触发close事件

相关例子



Std.ui("Window",{
    modal:true,
    maximize:true,
    menuBar:{
        items:[
            {
                text:"File(&F)",
                items:[
                    "aaa",
                    {
                        text:"第一个菜单项",
                        icon:"images/remove.png"
                    },{
                        text:"第二个菜单项",
                        icon:"images/edit.png"
                    },{
                        text:"第三个菜单项",
                        icon:"images/play.png"
                    },{
                        text:"第四个菜单项",
                        iconClass:"abcIcon"
                    }
                ]
            },{
                text:"Edit(&E)",
                items:[
                    "aaa",
                    {
                        ui:"sep"
                    },{
                        text:"第一个菜单项",
                        icon:"images/remove.png"
                    },{
                        text:"第二个菜单项",
                        icon:"images/edit.png"
                    },{
                        text:"第三个菜单项",
                        icon:"images/play.png",
                        items:[
                            {
                                text:"第一个子菜单项"
                            },{
                                text:"第二个子菜单项"
                            }
                        ]
                    },{
                        text:"第四个菜单项",
                        iconClass:"abcIcon",
                        enable:false,
                        items:[
                            {text:"aaaaa"},
                            {text:"aaaaaaaa"}
                        ]
                    }
                ]
            }
        ]
    },
    toolBar:{
        items:[
            {
                icon:"images/play.png",
                text:"aaa"
            },{
                ui:"sep"
            },{
                icon:"images/play.png",
                text:"button2"
            },{
                icon:"images/edit.png",
                text:"edit"
            },{
                icon:"images/remove.png",
                text:"remove"
            },{
                ui:"sep"
            },{
                icon:"images/view.png",
                text:"view"
            }
        ]
    },
    layout:{
        ui:"VBoxLayout",
        items:[
            {
                ui:"HBoxLayout",
                items:[
                    {ui:"Label",width:80,value:"EMail:"},
                    {ui:"LineEdit"},
                    {ui:"Button",text:"click",width:80,icon:"images/play.png",styleType:"textBesideIcon"}
                ]
            },
            {
                ui:"HBoxLayout",
                items:[
                    {ui:"Label",width:80,value:"标题:"},
                    {ui:"LineEdit"},
                    {ui:"Button",text:"确定",width:80,styleType:"textBesideIcon",icon:"images/view.png"}
                ]
            },{
                ui:"HBoxLayout",
                items:[
                    {ui:"Label",width:80,value:"标题:"},
                    {
                        ui:"ComboBox",
                        inputMode:"input",
                        value:"aaaaaaa",
                        items:["aaa","bbbb","ccc"]
                    }
                ]
            },{
                ui:"HBoxLayout",
                items:[
                    {ui:"Label",width:80,value:"标题:"},
                    {
                        ui:"ComboBox",
                        items:["aaa","bbbb","ccc"]
                    }
                ]
            },{
                ui:"VBoxLayout",
                items:[
                    {ui:"TextEdit"}
                ]
            }
        ]
    }
});