学习Ext JS - 窗口和对话框

[ExtJS]学习Ext JS — 窗口和对话框(2)[复制链接]

afrag

管理员

　　

　　

1楼

　　发表于 2011-5-4 10:59|只看该作者|倒序浏览|打印

窗口

计算机的用户对窗口的概念应该都很熟悉。我们可以使用Ext.Windows类来复制这个概念，Ext.Windows是一个支持很多高级的场景的强有力的组件。.

从一个例子开始

我们可以使用最少的代码来打开一个窗口：

var w = new Ext.Window({height:100, width: 200});

w.show();

复制代码

运行这段代码，我们会得到一个空白的弹出窗口 — 当然是一个毫无用处的窗口。但是这段代码演示了Ext.Windows一些缺省的功能。直接拿来使用，不需要任何配置，我们的窗口就是可以拖动的，可以改变大小的，并且在右上角有关闭按钮。因为我们的窗口没有显示任何的内容，所以这个例子看起来不是那么让人印象深刻。

最简单的弹出一个有内容的窗口的方法是使用普通的HTML。下面是一个演示了这个功能的例子：

var w = new Ext.Window({

height: 150, width: 200,

title: 'A Window',

html: '

Oh

HI THERE EVERYONE

'

});

w.show();

复制代码

我们添加了2个新的配置选项。第一个是title选项，这个选项允许我们设置窗口标题栏中的文本。第二个是html选项，这个选项接受一个原始的HTML字符串，这个HTML会显示在窗口中。

这种方式的使用是非常直接的 — 我们能够从最基本的部分开始并注入我们需要在窗口的内容区域显示的HTML。这种方式允许我们从最基础的部分调整我们的窗口，并且可以使用CSS。但是，这并不是我们对Ext JS所期望的一致性的体验。另外一种配置选项才是我们所熟悉的方式。.

Panel的潜力

记住，Window是Panel的子类，而Panel有很多有趣的“秘技”。Items配置选项接受一个配置对象的数组或组件实例的数组：

var w = new Ext.Window({

items:[

{ xtype: 'textfield', fieldLabel: 'First Name'},

new Ext.form.TextField({fieldLabel: 'Surname'})

]

});

w.show();

复制代码

在上面的例子中，我们添加了2个textfield，第一个使用xtype来延迟初始化，第二个使用的是标准的对象初始化。这两个textfield会被添加到窗口内部，但是它们显示的方式能够基于窗口的layout属性来控制。

Layout

Ext JS在Ext.layout包中定义了很多layout模型，每个layout都是在panel中使用，从而允许panel中的组件能够按照特定的方式排列。在我们上面的例子中，我们显示了怎样在窗口中添加两个文本框，我们还能够很容易的使用合适的layout来加强窗口的外观。这里，我们需要一个Ext.layout.FormLayout，这个layout提供了我们所期望的编辑表单那样的对字段标签和通常的空间和位置的支持。

var w = new Ext.Window({

layout: 'form',

items:[

{ xtype: 'textfield', fieldLabel: 'First Name'},

new Ext.form.TextField({fieldLabel: 'Surname'})

]

});

w.show();

复制代码

我们使用layout配置选项来指定我们希望使用form这个layout，然后外观上就发生了明显的变化。在下面的图片中，第一个对话框没有使用layout，第二个使用了。

这个不是Ext.Window自身的功能，而是来自其父类Panel的功能。但是，Window能够支持这个功能这个事实对于应用程序开发者来说很重要 — 试着想想如果你使用前面的HTML注入的方式需要多长时间来创建一个富表单界面。Ext.layout包中的其他的layout提供了很多窗口设计的途径，大大的扩展了窗口能够支持的场景。

配置

除了前面介绍的不同的填充窗口的内容区域的方法之外，我们在弹出窗口的外观和行为方面还有很大的灵活性。Ext.Window的父类（从Ext.Panel开始）及其自身提供了很多的配置选项。

清除窗口的缺省功能

在最开始的window的例子中，我们知道了我们能够缺省的获得一些功能 — 改变大小，拖动和关闭按钮。在有些情况下，当我们使用layout的时候，我们不希望窗口的大小是可变的，这种情况下我们可以将resizable配置选项设置为false来阻止这种行为。是否允许拖动通常只是一种喜好，大多数情况下对我们的应用程序并没有影响。如果不希望允许拖动，我们可以经draggable选项设置为false来关闭这个功能。

var w = new Ext.Window({

height:50,

width: 100,

closable: false,

draggable: false,

resizable: false

});

w.show();

复制代码

当使用表单窗口的时候，我们通常有文本的按钮来解释不同的操作，例如保存记录或者取消所有的改变。这种情况下，我们可以通过将closable选项设置为false来关闭close按钮功能。还有一个选项可以提供更多的对行为的控制：closeAction选项能够被设置为hide或close。当设置为hide的时候，只是简单的让窗口不可见，但是没有销毁它；设置为close会实际的从DOM中移除window。如果你觉得将来要再次使用这个窗口，这就是一个很重要的区别，因为隐藏然后重新显示窗口要快得多。

其他的功能

在缺省的功能能够被控制之后，我们来看看进一步调整和增强Ext.Window的功能的方法。我们已经演示了怎样使用height和width选项来设置固定大小的窗口，并修剪超出部分的内容。

我们有另外一个选项，autoHeight和autoWidth配置，这个两个选项都是boolean类型的值。这两个选项使得我们可以向window中填充组件而不用担心窗口大小的问题。在开发的时候，这个功能很有用。当你不知道你创建的组件需要的窗口的大小的时候，就可以设置autoHeight和autoWidth为true。而且，这两个属性可以分开使用，因此你可以设置窗口的宽度，让系统自动计算窗口的高度。这个当需要往窗口中放置动态的内容的时候很有用。

类似桌面的窗口

窗口系统最普遍的例子就是计算机的桌面，其中有许多窗口来显示应用程序或文件系统。在这样的系统中，用户可以选择隐藏窗口以便以后使用，或者叫做最小化它们；用户还可以扩展窗口来填满整个屏幕，或者叫做最大化窗口。Ext.Window也有两个选项来支持这两个功能：maximizable和minimizable，这两个选项都是boolean类型的值。缺省的这两个选项的值是false。

这两个功能的工作方式和桌面系统的窗口的工作方式是完全一样的。当这两个选项设置为true的时候，窗口的右上角会显示和Windows操作系统类似的图标。Maximizable允许窗口被扩大到填满整个浏览器的内容区域，正如我们所期望的那样。但是minimizable就要棘手一些。Ext JS不知道你要讲窗口最小化到哪里 — 在Windows操作系统中应该最小化到任务栏中，在其他的操作系统中可能是其他的地方。因此我们需要自己提供最小化的功能。Ext只是提供了图标和minimize事件，开发人员需要提供适合于自己的应用程序的事件处理函数。在本章的后面，我们会提供一个简单的例子来演示怎样使用Ext.Window类中的事件来完成这些功能。

更多的选项

Ext JS窗口支持另外一种调整窗口大小的方法，这个是建立在框架中的。布尔类型的选项collapsible会在窗口的右上角添加另外一个按钮，该按钮使得用户点击它之后只显示窗口的菜单条，再次点击该按钮，窗口又会恢复原来的大小。

还可以使用expandOnShow配置来指定当一个被隐藏的窗口被重新显示的时候总是扩展到完整的大小。这对于此前已隐藏，需要重新引起用户的注意窗口有用。

制定窗口

除了标准的标题栏和主体内容区域外，我们还可以在窗口中添加其他的内容区域。有些区域是可以完全客户化的，有些区域的限制就要多一些。这些区域提供了其他的方法来创建功能更加强大的窗口。

每个窗口都有内置的能力来添加工具条到顶部和底部。这些工具条可以保护任何有效的工具条的项目，如按钮，菜单和文本。另外，我们可以使用footer元素来通过buttons配置选项包含更多的按钮。

根据你的需要，你可以选择使用一个或多个这样的内容区域来提供工具来允许用户操作或消费窗口中的信息。一个典型的例子就是创建一个使用form layout的窗口，然后包含Save和Cancel按钮在底部。这就是一个典型的数据输入表单的风格，只需要很少的配置，就可以让Ext JS自动的放置这些组件的位置。

收藏0分享0顶0踩0

回复引用

举报返回顶部

? 上一主题|下一主题 ?