二、Ext.NET 1.7 官方示例筆記-按鈕

這一節應該比較簡單，由於按鈕相對其餘控件仍是比較簡單的，但按鈕是最經常使用的控件，先從簡單的開始，才能按部就班的學下去不是嗎？

從上面的圖片能夠看出，可分基本&按鈕組，先看下基本的Overview概覽一下。

一、給Ext按鈕加監聽器，點擊後調用瀏覽器的alert()方法

    <ext:Button runat="server" Text="Click Me">
        <Listeners>
            <Click Handler="alert('Clicked');" />
        </Listeners>
    </ext:Button>
二、給Ext按鈕加 DirectEvent, 點擊執行服務器方法Button_Click()，向後端方法提交參數Item，值爲One,EventMask 爲遮罩，會在請求中提示加載中...，

    <ext:Button runat="server" Text="Click Me">
        <DirectEvents>
            <Click OnEvent="Button_Click">
                <EventMask ShowMask="true" />
                <ExtraParams>
                    <ext:Parameter Name="Item" Value="One" />
                </ExtraParams>
            </Click>
        </DirectEvents>
    </ext:Button>
//服務器方法

<script runat="server">
    protected void Button_Click(object sender, DirectEventArgs e)
    {
       X.Msg.Alert("DirectEvent", string.Format("Item - {0}", e.ExtraParams["Item"])).Show();
    }
</script>
//結果

三、給按鈕添加圖標

<ext:Button runat="server" Text="Text" Icon="Add" />

四、給按鈕添加自定義圖標

<ext:Button runat="server" Text="Text" IconCls="custom-icon1" />
//css

    <style type="text/css">
        .custom-icon1 {
        	background-image: url(arrow-down.gif) !important;
        }
    </style>

五、給按鈕加快速提示信息

    <ext:Button runat="server" Text="Text">
        <ToolTips>
            <ext:ToolTip runat="server" Title="Title" Html="Description" />
        </ToolTips>
    </ext:Button>

六、切換按鈕 ，點擊後被設置爲當前按鈕，被高亮

    <ext:Button runat="server" Text="Button1" EnableToggle="true" ToggleGroup="Group1" Pressed="true" />
    <ext:Button runat="server" Text="Button2" EnableToggle="true" ToggleGroup="Group1" />
    <ext:Button runat="server" Text="Button3" EnableToggle="true" ToggleGroup="Group1" />

七、菜單按鈕 ，點擊後彈出菜單列表

    <ext:Button runat="server" Text="Text">
        <Menu>
            <ext:Menu runat="server">
                <Items>                    
                    <ext:MenuItem runat="server" Text="Item 1" Icon="GroupAdd" />
                    <ext:MenuItem runat="server" Text="Item 2" Icon="GroupDelete" />
                    <ext:MenuItem runat="server" Text="Item 3" Icon="GroupEdit" />
                </Items>
            </ext:Menu>
        </Menu>
    </ext:Button>

八、菜單拆分按鈕（SplitButton with menu），外形和上面的一個樣，在Text後多了一個割線

    <ext:SplitButton runat="server" Text="Text">
        <Menu>
            <ext:Menu runat="server">
                <Items>                    
                    <ext:MenuItem runat="server" Text="Item 1" Icon="GroupAdd" />
                    <ext:MenuItem runat="server" Text="Item 2" Icon="GroupDelete" />
                    <ext:MenuItem runat="server" Text="Item 3" Icon="GroupEdit" />
                </Items>
            </ext:Menu>
        </Menu>
    </ext:SplitButton>

九、循環按鈕(CycleButton)，點擊後，按鈕的樣子會循環下拉項裏的樣子，也能夠直接點擊下來項裏的項直接切換

    <ext:CycleButton runat="server" ShowText="true" PrependText="View As ">
        <Menu>
            <ext:Menu runat="server">
                <Items>
                    <ext:CheckMenuItem runat="server" Text="Text Only" Icon="Note" />
                    <ext:CheckMenuItem runat="server" Text="Html" Icon="Html" Checked="true" />
                </Items>
            </ext:Menu>
        </Menu>
    </ext:CycleButton>

十、扁平化按鈕

<ext:Button runat="server" Text="FlatButton" Icon="Accept" Flat="true" />

十一、自定義按鈕

<ext:Button ID="Button1" runat="server" Text="128 x 128" Height="128" Width="128" />

2、連接按鈕(LinkButton)，表現樣式爲一個「超連接」而已，沒什麼區別，這裏接直接截圖對比樣式和源碼了

3、圖片按鈕

 

四 、變種按鈕

6、分組按鈕