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的使用。
- 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属性可以控制图标显示的大小。
