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