Ext.NET控件介绍—Button控件

Button控件使用

之前两篇文章中着重介绍Ext.NET一些基本功能用途和事件驱动方式，本篇开始会着重介绍Ext.NET中具体控件的使用方法，首先介绍Button控件。

对任何一个开发人员来说，Button控件都是相当熟悉也是最基本的控件。本文主要介绍Ext.NET中这些控件相比标准的ASP.NET控件提供了哪些特殊的功能，新增的一些属性等，这些控件在系统开发中是非常有用的。

Ext.NET里提供有四种Button控件，他们分别是Button、ImageButton、LinkButton、Variations button。

Button、ImageButton、LinkButton在之前Coolite的版本中都有涉及到。Variations button是Ext.NET1.0中新增的内容。接下来我们来逐个介绍。

l         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="Click Me">

        <DirectEvents>

            <Click OnEvent="Button_Click">

                <EventMask ShowMask="true" />

                <ExtraParams>

                    <ext:Parameter Name="Item" Value="One" />

                </ExtraParams>

            </Click>

        </DirectEvents>

    </ext:Button>

此处通过<ExtraParams>标签传递参数给后台，因为此处是Ajax事件不存在后台的回发机制，所以必须在button控件中定义需要传递的参数。

使用示例：

1.Button with Icon（带图标的按钮）

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

2.Button with Custom Icon(带用户自定义图标的按钮)

定义CSS样式：

<style type="text/css">

        .custom-icon1 {

         background-image: url(arrow-down.gif) !important;

        }

</style>

页面引用：

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

3.Button with QuickTip(带提示的按钮)

    <ext:Button runat="server" Text="Text">

        <ToolTips>

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

        </ToolTips>

    </ext:Button>

4.Button with menu(带菜单的按钮)

    <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>

5.Custom Size Button（自定义大小按钮）

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

l         ImageButton控件

1.Simple ImageButton（简单的图片按钮）

    <ext:ImageButton 

        runat="server" 

        ImageUrl="button.gif" 

        OverImageUrl="overButton.gif" 

        DisabledImageUrl="disabled.gif" 

        PressedImageUrl="pressed.gif">

    </ext:ImageButton>

2.Disabled ImageButton(不可用的图片按钮)

    <ext:ImageButton 

        runat="server" 

        Disabled="true"

        ImageUrl="button.gif" 

        OverImageUrl="overButton.gif" 

        DisabledImageUrl="disabled.gif" 

        PressedImageUrl="pressed.gif"

        />

3.Toggling ImageButton（切换的图片按钮）

按下时： 按起时： 

    <ext:ImageButton

        runat="server" 

        EnableToggle="true"

        ImageUrl="button.gif" 

        OverImageUrl="overButton.gif" 

        DisabledImageUrl="disabled.gif" 

        PressedImageUrl="pressed.gif"

        />

4. ImageButton with Menu（带菜单的图片按钮）

    <ext:ImageButton

        runat="server" 

        ImageUrl="button.gif" 

        OverImageUrl="overButton.gif" 

        DisabledImageUrl="disabled.gif" 

        PressedImageUrl="pressed.gif">

        <Menu>

            <ext:Menu runat="server">

                <Items>

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

                    <ext:MenuItem runat="server" Text="Accept" Icon="Accept" />

                </Items>

            </ext:Menu>

        </Menu>

    </ext:ImageButton>

5.ImageButton in ToggleGroup（切换组菜单按钮）

    <ext:ImageButton 

        runat="server" 

        ToggleGroup="Group1"

        ImageUrl="button.gif" 

        OverImageUrl="overButton.gif" 

        DisabledImageUrl="disabled.gif" 

        PressedImageUrl="pressed.gif"

        />

    <ext:ImageButton 

        runat="server" 

        ToggleGroup="Group1"

        ImageUrl="button.gif" 

        OverImageUrl="overButton.gif" 

        DisabledImageUrl="disabled.gif" 

        PressedImageUrl="pressed.gif"

        />

    <ext:ImageButton 

        runat="server" 

        ToggleGroup="Group1"

        ImageUrl="button.gif" 

        OverImageUrl="overButton.gif" 

        DisabledImageUrl="disabled.gif" 

        PressedImageUrl="pressed.gif"

        />

l         LinkButton控件

1.Simple LinkButton(简单的超链接按钮) 

 

    <ext:LinkButton runat="server" Text="Click">

        <Listeners>

            <Click Handler="Ext.Msg.alert('Clicked', 'LinkButton');" />

        </Listeners>

    </ext:LinkButton>

2.LinkButton with Icon(带图标的超链接按钮) 

    <ext:LinkButton runat="server" Icon="Accept" Text="Click">

        <DirectEvents>

            <Click OnEvent="Button_Click" />

        </DirectEvents>

    </ext:LinkButton>

注：IconAlign="Right"通过设置IconAlign属性设置对齐方式

3.LinkButton with Menu(带菜单的超链接按钮)

  

 

    <ext:LinkButton runat="server" Icon="Accept" Text="Click">

        <Menu>

            <ext:Menu runat="server">

                <Items>

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

                    <ext:MenuItem runat="server" Text="Remove" Icon="Delete" />

                </Items>

            </ext:Menu>

        </Menu>

    </ext:LinkButton>

4.LinkButton in a ToggleGroup(切换组中的超链接按钮) 

    <ext:LinkButton runat="server" Icon="GroupAdd" Text="Add group" ToggleGroup="Group1" />

    <ext:LinkButton runat="server" Icon="GroupDelete" Text="Delete group" ToggleGroup="Group1" />

    <ext:LinkButton runat="server" Icon="GroupEdit" Text="Edit group" ToggleGroup="Group1" />

 

l         Variations button控件

变化的按钮Variations button是Ext.NET 1.0中新增的按钮类型，可以是现在各种按钮的功能，此处我们着重介绍Split Buttons的使用。

1. Split Buttons（可拆分按钮）

  

<ext:Panel runat="server" BaseCls="x-plain" Cls="btn-panel">

    <Items>

        <ext:TableLayout runat="server" Columns="3">

            <Cells>

                <ext:Cell ColSpan="3">

                    <ext:Panel runat="server" Border="false">

                        <Content>

                            <h3 style="padding: 15px 0 3px;">Icon and Text (left)</h3>

                        </Content>

                    </ext:Panel>

                </ext:Cell>

                <ext:Cell>

                    <ext:SplitButton runat="server" Text="Add User" IconCls="add16" />

                </ext:Cell>

                <ext:Cell>

                    <ext:SplitButton runat="server" Text="Add User" IconCls="add24" Scale="Medium" />

                </ext:Cell>

                <ext:Cell>

                    <ext:SplitButton runat="server" Text="Add User" IconCls="add32" Scale="Large" />

                </ext:Cell>

            </Cells>

        </ext:TableLayout>

    </Items>

</ext:Panel>

注：IconAlign="Top"通过设置IconAlign属性可以控制图标显示的对齐方式。

         Scale="Medium"通过设置Scale属性可以控制图标显示的大小。