`

Ext.Window 用法

 
阅读更多

Ext.Window
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] )

 

4、范例

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中插入图片的例子

    在Ext JS这个强大的JavaScript框架中,`Ext.Window`是一个常用组件,用于创建浮动、可弹出的窗口。在Web应用程序中,我们...希望这个指南对你在使用`Ext.Window`插入图片时有所帮助,祝你在IT行业中取得更大的成就!

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

    为了实现窗口的动态弹出和隐藏,使用了`Ext.TaskMgr`进行定时任务管理。其中,`upTask`用于控制窗口向上移动,而`downTask`则用于控制窗口向下移动。这两个任务的执行间隔均为`moveSpeed`,单位为毫秒。 ##### 4. *...

    Ext.js教程和Ext.js API

    3. **示例代码**:为常见用法提供代码片段,帮助开发者快速理解和使用特定功能。 4. **事件和监听器**:解释如何注册事件监听器以及触发的事件类型。 5. **数据绑定**:介绍如何使用Store、Model和Proxy进行数据管理...

    Ext window的使用

    同时,使用IDE的代码提示和文档功能,可以快速了解Ext.Window的各种配置和方法。 7. **实战应用** - **信息提示**:你可以创建一个带有确认按钮的窗口来提示用户进行操作。 - **表单编辑**:将表单组件放入窗口中...

    Ext JS Notification 插件

    本文将深入探讨Ext JS Notification插件的使用方法、功能特性以及如何集成到项目中。 首先,Notification插件提供了一种非侵入性的方法来向用户传达关键信息,如操作成功、警告或错误提示。这些通知可以是临时的,...

    Ext grid panel 滚动条位置不变

    - 当使用`Ext.override`时,确保不会与其他覆盖方法冲突。 #### 总结 通过上述方法,可以在Ext grid panel中实现实时数据刷新时滚动条位置不变的功能。这对于提高用户体验至关重要,尤其是在处理大量实时数据的...

    Ext_Window用法

    Ext_Window用法

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

    当我们需要在页面中使用Ext.js时,例如创建弹窗提示,会用到`Ext.Msg.show`方法。下面的代码展示了如何创建一个带有输入框的提示框,并在用户点击OK后将输入的内容显示到指定的`div`中: ```html <!DOCTYPE html> ...

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

    Ext.ux.window.DetailMessageBox 带有可以折叠详细信息的...使用方法 该扩展定义的为单例窗口,在引入时就已实例化,所以在需要弹出详细对话框时可以直接使用别名 Ext.ux.DetailMsg 进行操作: Ext.ux.DetailMsg.show({

    EXT dojochina Ext类静态方法.rar

    EXT dojochina Ext类静态方法是一个关于EXT框架在JavaScript中的使用的主题,主要聚焦于Ext类的静态方法。EXT是一个强大的前端开发框架,由Sencha公司开发,它提供了丰富的组件库,用于构建复杂的Web应用程序。在EXT...

    Extjs使用Window最小化窗口

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

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

    8. **API更新**:一些方法和函数的名称或用法可能有所改变,鼓励开发者查阅API文档以获取最新的使用指南。 9. **性能优化**:ExtJS 4.0在渲染速度、内存管理和事件处理等方面进行了优化,提高了整体性能。 这些...

    Ext.ux.touch.DateTimePicker:扩展 Ext.Picker 以提供 DateTime 功能的 Sencha Touch 插件

    用法datetimePicker = new Ext.ux.touch.DateTimePicker({ useTitles: true, id: 'dt', value: { day: 23, month: 2, year: 2000, hour: 13, minute: 45 }, listeners: { "hide": function(picker) { window.alert&#...

    Ext Js权威指南(.zip.001

    6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 使用ext.fly获取元素 / 256 ...

    ExtJs消息提示框

    通常,ExtJs的消息提示框并不内置于核心库中,而是作为扩展(ux)存在,例如在`Ext.ux.window.Notification-master`这个压缩包文件中。`ux`是"User eXtension"的缩写,它是ExtJs社区开发的第三方组件,以增强原生...

    ExtJs4.2 Window常用方法

    根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法,帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架,用于创建...

    myeclipse下使用ext.,简单的但见环境,

    本教程将介绍在MyEclipse中配置EXT插件的三种方法,帮助初学者快速搭建EXT开发环境。 1. 在线安装Spket插件 - 首先,打开MyEclipse,通过`Help` -> `Software Updates` -> `Find and Install...` -> `Search for ...

    extTree例子点击出现等

    这可能包括创建一个新的`Ext.window.Window`,加载一个新的`Ext.container.Viewport`,或者更新现有组件的状态。 4. 使用`show`或`open`方法将新界面呈现给用户。 在提供的压缩包文件"ExtTest"中,可能包含了实现这...

    ext打印、jquery打印、ext导出excel

    EXT提供了一种方法,通过生成CSV(逗号分隔值)或XLS文件,用户可以轻松地将EXT组件中的数据导出到Excel。这通常涉及到服务器端的配合,因为浏览器的安全限制不允许直接在客户端生成二进制文件。开发者会先将数据...

    ExtJSWeb应用程序开发指南(第2版)

    3.2.7 Ext.window.MessageBox的其他功能 3.3 进度条组件介绍 3.3.1 认识Ext.ProgressBar 3.3.2 手工模式的进度条 3.3.3 自动模式的进度条 3.3.4 自定义样式的进度条样式 3.4 实现工具栏和菜单栏 3.4.1 认识...

Global site tag (gtag.js) - Google Analytics