Extjs Window用法详解

最新推荐文章于 2020-12-02 22:35:26 发布

whb054

最新推荐文章于 2020-12-02 22:35:26 发布

阅读量1.1k

点赞数

分类专栏： ExtJS基础类

ExtJS基础类专栏收录该内容

7 篇文章 1 订阅

订阅专栏

今天我们来介绍一下Extjs中一个常用的控件Window。Window的作用是在页面中创建一个窗口，这个窗口作为容器，可以在它里面加入grid、form等控件，从而来实现更加复杂的界面逻辑。

本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！

本文由齐飞（youring2@gmail.com）原创，并发布在http://www.qeefee.com/article/extjs-window-in-detail，转载请注明出处！推荐更多Extjs教程、Extjs5教程

创建Extjs Window

创建Extjs Window的代码如下：

  var win = Ext.create("Ext.window.Window", {
      id: "myWin",
      title: "示例窗口",
      width: 500,
      height: 300,
      layout: "fit",//一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
      autoShow:true,//显示窗口，也可以在后面添加 win.show();
      items: [
          {
              xtype: "form",
              defaultType: 'textfield',
              defaults: {// defaults 将会应用所有的子组件上,而不是父容器
                  anchor: '100%',
              },

              fieldDefaults: {
                  labelWidth: 40,
                  labelAlign: "left",
                  flex: 1,
                  margin: 5
              },
              items: [
                  {
                      xtype: "container",
                      layout: "hbox",
                      items: [
                          { xtype: "textfield", name: "name", fieldLabel: "姓名", allowBlank: false },
                          { xtype: "numberfield", name: "age", fieldLabel: "年龄", decimalPrecision: 0, vtype: "age" }
                      ]
                  }
              ]
          }
      ],
      buttons: [
          { xtype: "button", text: "确定", handler: function () { this.up("window").close(); } },
          { xtype: "button", text: "取消", handler: function () { this.up("window").close(); } }
      ]
  });
  //win.show();

显示Extjs Window

使用上面的代码创建好的Window并没有显示出来，它只是创建了Window，而这个Window在默认情况下是不显示的。

如果要它显示出来，我们可以通过在配置项中添加autoShow来实现，代码如下：

autoShow: true,

或者，我们可以显示的调用window的show方法：

win.show();

创建模态窗口

Extjs Window还可以作为模态窗口打开。什么是模态窗口呢？当打开一个模态窗口的时候，只有模态窗口可操作，它背后的东西都会被遮罩，从而变得不能操作。

在Extjs中，我们可以通过修改window的配置项来创建模态窗口：

modal: true,

关闭按钮和关闭动作

Extjs Window可以配置是否显示关闭按钮：

closable: false,

在关闭Extjs Window的时候，通过配置项closeAction可以控制按钮是销毁（destroy）还是隐藏（hide），默认情况下为销毁：

closeAction: "hide",

最大化和最小化

Extjs Window的最大化和最小化按钮可以通过配置项显示出来：

maximizable: true,
minimizable: true,

效果图：

当我们点击最大化按钮的时候，窗口会变为全屏；

但是，在点击最小化按钮的时候，窗口没有什么操作，这是为什么呢？根据API里面的说法，最小化按钮没有执行任何操作，我们必须处理minimize事件来完成最小化的操作：

listeners: {
    minimize: function (win, opts) {
        win.collapse();
    }
},

通过上面的代码，我们可以在点击最小化按钮的时候，将window折叠起来。

在Extjs Window中显示iframe

在Window中，既可以添加Extjs控件，也可以显示html代码。我们可以通过html配置项来将一个iframe添加到window中：

  var win = Ext.create("Ext.window.Window", {
    id: "myWin",
    title: "示例窗口",
    width: 500,
    height: 300,
    layout: "fit",
    autoShow: true,
    html: '<iframe style="overflow:auto;width:100%; height:100%;" src="http://www.baidu.com" frameborder="0"></iframe>',
});

在Extjs Window中显示大段HTML

html配置项可以帮助我们在window中显示一段较简单的html代码，如果要显示太复杂的html，写在js代码中显然是有些不利于组织和维护。

那么要显示大段html的时候，我们可以事先将它写在html代码中，然后通过contentEl配置项将它显示在window中。

首先，在html中添加一段代码：

  <div id="content">
      <h2>欢迎访问起飞网Extjs教程</h2>
      <p>
          更多Extjs教程，请访问<a href="http://www.qeefee.com/zt-extjs">http://www.qeefee.com/zt-extjs</a>
      </p>
  </div>

然后，在window中添加配置项：

var win = Ext.create("Ext.window.Window", {
    id: "myWin",
    title: "示例窗口",
    width: 500,
    height: 300,
    layout: "fit",
    autoShow: true,
    contentEl: "content"//指定一个已存在的HTML元素, 或者一个已存在HTML元素的 id , 它们将被用作当前组件的内容.
});