调整大小示例

这些例子展示了如何将一个标准的元素应用为调整柄为“floating”（默认）或“pinned”的可调整大小组件。

PS：JS文件没有经过压缩，所以可以直接打开查看。完整源码请见：basic.js。

基本例子
这是你的第一步。要调整下面框的大小，将鼠标指向底边或右边边缘即可。此例的调整柄使用了默认的“floating”样式。

var basic = new Ext.Resizable('basic', {
        width: 200,
        height: 100,
        minWidth:100,
        minHeight:50
});

封装元素
一些元素——如：图片、文本域不允许拥有子元素。在过去，你不得不将这些元素与一个可调整大小的子元素封装起来，并设置为一个 Resizable 组件。 自从 yui-ext .33 RC2 开始，Resizable 组件会自动为你封装元素，并为调整柄计算、调节边框/填充以及偏移量。你所要做的仅仅是设置“wrap:true”。同时，手册中指定的“resizeChild”也仍然被支持。

固定的调整柄
注意，此例的调整柄被设为“pinned”，只需要在创建时加上“pinned:true”。

动态大小
如果你不喜欢默认的调整大小的呈现方式，你也可以打开动态大小开关，只需加上“dynamic:true”即可。

下面是一个被封装的、拥有固定调整柄并被设置为动态呈现大小的文本域。

var dwrapped = new Ext.Resizable('dwrapped', {
    wrap:true,
    pinned:true,
    width:450,
    height:150,
    minWidth:200,
    minHeight: 50,
    dynamic: true
});

保持比例
对于某些对象，如：图片，你可能需要保持长与宽的比例，只需设置“preserveRatio:true”。

var wrapped = new Ext.Resizable('wrapped', {
    wrap:true,
    pinned:true,
    minWidth:50,
    minHeight: 50,
    preserveRatio: true
});

透明的调整柄
如果你只是想要让一个元素可以调整大小而不想要任何碍眼的调整柄，把它设为透明吧。

var transparent = new Ext.Resizable('transparent', {
    wrap:true,
    minWidth:50,
    minHeight: 50,
    preserveRatio: true,
    transparent:true
});

可定制的调整柄
Resizable 组件支持8个方向调整大小。由8个方向调整一个静态元素的大小可能会造成想关联元素的位置超出。当被调整的元素的x轴、y轴发生改变时，该元素的“position”样式会被设置为“absolute”。你也可以通过设置“handles”属性来控制显示哪个方向的调整柄。调整柄的样式是通过 CSS 来控制的，所以你可以按照你希望的来定制。

这幅图片支持8向调整大小、定制的调整柄、可拖放、8向的固定比例（这个可不容易办到！）。
双击图片的任意位置可使其隐藏。

var custom = new Ext.Resizable('custom', {
    wrap:true,
    pinned:true,
    minWidth:50,
    minHeight: 50,
    preserveRatio: true,
    dynamic:true,
    handles: 'all', // shorthand for 'n s e w ne nw se sw'
    draggable:true
});

快速调整
Resizable 组件也提供基本的快速调整。

var snap = new Ext.Resizable('snap', {
    pinned:true,
    width:250,
    height:100,
    handles: 'e',
    widthIncrement:50,
    minWidth: 50,
    dynamic: true
});

动画过度
调整大小的操作也可以动画式地呈现。过度动画支持可配置的开始效果和持续时间。下面是第一个示例元素的简单复制，唯一的区别就是打开了动画过度。我使用的开始效果是“backIn”，并设置为比默认的稍稍慢一点点。

var animated = new Ext.Resizable('animated', {
    width: 200,
    height: 100,
    minWidth:100,
    minHeight:50,
    animate:true,
    easing: 'backIn',
    duration:.6
});