`
lauy
  • 浏览: 438244 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext.Window介绍

    博客分类:
  • EXT
阅读更多
Ext.Window扩展自Ext.Panel,其xtype值为window。

1、主要配置项:
      closable:是否允许关闭窗口,默认为true。
      closeAction:关闭窗口的动作,包括以下两种:
      close:从DOM删除窗口,销毁窗口及其所属组件,窗口不再可用,重新显示需要调用show方法。此为默认值。
      hide:通过设置可见性隐藏窗口,窗口还可用,调用show方法后重新显示。
      constrain:是否约束窗口只能在容器内移动,默认为false。窗口默认渲染到document.body。
      constrainHeader:是否约束窗口头部只能在容器内移动,默认为false。
      draggable:是否可拖曳,默认为true。
      resizable:是否可改变窗口的大小,默认为true。
      modal:是否为模式窗口,默认为false。
      maximizable:是否可最大化窗口,默认为false。
      maximized:是否在初始化时最大化显示窗口,默认为false。
      x:窗口的X坐标值。
      y:窗口的Y坐标值。
      manager:WindowGroup的引用。
      expandOnShow:是否在窗口显示时展开它,默认为true。 当取值为false时,collapsed取值为true时,窗口初始显示时收缩。
      minimizable:是否可最小化窗口,默认为false。需要自定义最小化行为。
      defaultButton:当窗口获得焦点时,默认获得焦点的按钮。
      plain:主体背景是否透明,默认为false。



2、主要方法:
      show( [String/Element animateTarget], [Function callback], [Object scope] ):显示窗口。
      hide( [String/Element animateTarget], [Function callback], [Object scope] ):隐藏窗口。
      center():窗口居中显示。
      close():关闭窗口,相当于closeAction值为close的情形。
      maximize():最大化窗口。
      restore():还原窗口大小。
      toggleMaximize():在最大化和还原之间切换。

      minimize():最小化窗口。
      setActive( Boolean active ):激活窗口。
      focus():窗口获得焦点。
      toBack():后置窗口。
      toFront( [Boolean e] ):前置窗口。
      resize( Ext.Window this, Number width, Number height ):改变大小。



3、Ext.WindowGroup的主要方法:
      hideAll()
      sendToBack( String/Object win )
      bringToFront( String/Object win )
      get( String/Object id )
      getActive()

      each( Function fn, [Object scope] )
      getBy( Function fn, [Object scope] )

var win;   
Ext.get("btnShowWindow").on("click", function(){   
    if(!win){   
        win = new Ext.Window({   
            title: "窗口",   
            layout: "border",   
            width: 500,   
            height: 300,   
               
            modal: true,   
            closeAction: "hide",   
            plain: true,   
            maximizable: true,   
               
            items: [   
                {   
                    title: "组织机构",   
                    region: "west",   
                    collapsible: true,   
                    split: true,   
                    width: 100   
                },   
                {   
                    title: "组织人员",   
                    region: "center"  
                }   
            ],   
            buttons: [   
                {text:"关闭", handler:function(){   
                    win.hide();   
                }}   
            ]   
        });   
    }   
       
    win.show(this);   
});  
分享到:
评论

相关推荐

    一个简单的Ext.Window中插入图片的例子

    var myWindow = Ext.create('Ext.window.Window', { title: '图片示例', width: 400, height: 300, items: [myImage], // 在这里放置图片 renderTo: Ext.getBody() // 将窗口渲染到文档体 }); ``` `render...

    Ext.window从右下角弹出/隐藏

    ### Ext.window从右下角弹出/隐藏:深入解析与实现 #### 一、概述 在Web应用开发中,为了提升用户体验,开发者经常会利用各种UI框架来实现丰富的交互效果。ExtJS作为一款成熟且功能强大的JavaScript框架,在这方面...

    Ext.window的一个扩展组件SuperWin.js

    Ext.window的一个扩展组件SuperWin.js.可灵活自主随意定位,和显示模式;

    EasyExt_003_第一个组件Ext.Window

    EasyExt_003_第一个组件Ext.Window EasyExt_003_第一个组件Ext.Window

    Ext-window属性

    当Panel被用作窗口时,它通常会继承或包含`Ext.window.Window`的一些属性。以下是对`Ext.Panel` API中与`Window`相关的属性的详细解释: 1. **activeItem**: 这个属性用于指定当前活动的子组件,可以是子组件的序号...

    Ext.js教程和Ext.js API

    2. **组件系统**:讲解组件的概念,包括容器(Container)、面板(Panel)、窗口(Window)等,以及布局管理(Layouts)。 3. **数据管理**:讲解Store、Model、Proxy和Reader/Writer的使用,实现数据的加载、保存和...

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    环境:Window XP Sp2、Tomcat 6.0、MyEclipse 5.5、Ext 3.2 使用步骤: 1、下载解压缩之后,使用IDE导入工程 2、在MyEclipse中启动服务器 3、打开IE在地址栏输入:http://localhost:8080/ExtAjax/TestAjax.html 如果...

    Ext.window

    NULL 博文链接:https://oppovaan.iteye.com/blog/627655

    Ext.ux.UploadDialog

    Most configuration options are inherited from Ext.Window (see ExtJs docs). The added ones are: url - the url where to post uploaded files. base_params - additional post params (default to {}). ...

    Ext window的使用

    Ext.Window是Ext JS中的一个类,继承自Ext.container.Container,它创建了一个可以在页面上自由移动和调整大小的浮动窗口。窗口通常用作模态对话框、信息提示或其他需要用户交互的场景。 2. **创建一个基本的Ext....

    extjs4.1-ux.rar

    10、Ext.ux.window.EachDialog 11、Ext.ux.grid.property.Grid 12、Ext.ux.form.field.TinyMCE 13、Ext.ux.form.field.Grid 主页:https://github.com/harrydeluxe/extjs-ux 注明:在Extjs4.1上是可以使用的,Extjs...

    EXT Window 通过DIV布局(源代码)

    Ext.Window 通过DIV布局,通过DIV填充window内容,带Ext所需文件。

    Ext组件描述,各个组件含义

    **2.14 Window (Ext.Window)** - **xtype**: `window` - **功能描述**:Window 是一个可以移动、关闭和调整大小的对话框。 - **主要用途**:用于显示弹出窗口、模态对话框等。 **2.15 Toolbar (Ext.Toolbar)** - ...

    Ext JS Notification 插件

    Ext JS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件和功能,用于构建富客户端Web应用。在Ext JS中,“Notification”插件是用于显示通知消息的一个组件,它可以帮助开发者在用户界面上创建吸引...

    Ext grid panel 滚动条位置不变

    ### Ext grid panel 滚动条位置不变 在前端开发领域,特别是在使用Ext JS框架时,保持滚动条位置不变是一个非常实用的功能。特别是在处理实时数据更新的场景下,这一功能可以确保用户在数据刷新后仍然停留在之前...

    3------通过实例学习------Ext.js------.docx

    icon: Ext.window.MessageBox.INFO }); }); ``` 在上述代码中,`Ext.onReady`确保在DOM加载完成后再执行JavaScript代码。`Ext.Msg.show`用于创建消息对话框,`Ext.get`则用于根据ID获取DOM元素。`Ext.fly`...

    ext4.0改变 比较完整的介绍

    3. **包和命名空间的重构**:旧版的分包机制被简化,如`Ext.Window`变为`Ext.window.Window`,`Ext.button.Split`等。这种改变提高了代码的可读性和组织结构。 4. **创建新对象的改进**:`Ext.define`函数替代了...

    Ext.ux.window.DetailMessageBox:扩展于ExtJS5.1版本的MessageBox,可用折叠框显示详细信息的消息框

    Ext.ux.window.DetailMessageBox 带有可以折叠详细信息的对话框,该扩展组件是基于ExtJS5.1.1版本仿照MessageBox单例窗口编写。会有很多不完善的地方,将在以后的项目中或业余时间中进行修改。 部署扩展 将 ...

    Extjs使用Window最小化窗口

    1. **创建Window**:使用`Ext.create('Ext.window.Window', { ... })`来创建一个Window实例,设置相关的配置项,如宽度、高度、标题等。 2. **添加工具栏**:在Window的配置中,加入`dockedItems`,创建一个工具栏...

Global site tag (gtag.js) - Google Analytics