ext example msg显示位置控制

在EXT的示例中有一些地方用到了消息提示，这种功能可以被用在很多场合，比如数据加载完了给用户一个提示，或者做某件事的时候给予提示，效果很好，但是ext示例中的这个消息提示有一个小小的问题，第一次提示的时候是在比较左侧的位置，而后面的提示均在中间位置。

解决这个小缺点的方法其实很简单，找到example.css中


#msg-div {
    position:absolute;
    left:35%;
    top:10px;
    width:250px;
    z-index:20000;
}

将left:35%删掉或注释掉即可，之所以只在第一次的时候起效果，是因为整个页面中该消息的实例（也可以理解成消息的html片段）只会被创建一次，以后就重复使用第一次创建的实例

除了这个小问题，有时候我们需要控制消息显示的位置，不只是显示在顶部中央，这时只要更改msgCt.alignTo(document, 't-t');即可

这里用到了Ext.Element.alignTo方法，该方法用来将元素定位到某个位置，详细的用法参考API


alignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element

 

Aligns this element with another element relative to the specified anchor points. If the other element is the documen...

Aligns this element with another element relative to the specified anchor points. If the other element is the document it aligns it to the viewport. The position parameter is optional, and can be specified in any one of the following formats:

• Blank: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
• One anchor (deprecated): The passed anchor position is used as the target element's anchor point. The element being aligned will position its top-left corner (tl) to that point. This method has been deprecated in favor of the newer two anchor syntax below.
• Two anchors: If two values from the table below are passed separated by a dash, the first value is used as the element's anchor point, and the second value is used as the target's anchor point.

In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than that specified in order to enforce the viewport constraints. Following are all of the supported anchor positions:

Value  Description
-----  -----------------------------
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner

Example Usage:

// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");

// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");

// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);

Parameters:

• element : Mixed

  The element to align to.

• position : String

  (optional, defaults to "tl-bl?") The position to align to.

• offsets : Array

  (optional) Offset the positioning by [x, y]

• animate : Boolean/Object

  (optional) true for the default animation or a standard Element animation config object

Returns:

• Ext.Element

  this