如何在 Asp.net 中使用 Ext.Net RadioGroup 控件？答案

【问题标题】：How to use Ext.Net RadioGroup control in Asp.net?如何在 Asp.net 中使用 Ext.Net RadioGroup 控件？
【发布时间】：2012-03-30 08:31:22
【问题描述】：

我正在学习使用Ext.Net。我找不到垂直显示 Ext.net RadioGroup 项目的方法。即使我设置了Vertical="true"，RadioGroup 也不会垂直显示。

请查看示例标记：


<ext:Panel ID="PanelDaily" runat="server" Title="Daily">
    <Items>
        <ext:RadioGroup ID="RadioGroup2"  runat="server" Vertical="true">
            <Items>
                <ext:Radio ID="Radio1" FieldLabel="" runat="server" BoxLabel="Every Hour(s)" Checked="true"/>
                <ext:Radio ID="Radio2" FieldLabel="" runat="server" BoxLabel="At" />
            </Items>
        </ext:RadioGroup>
    </Items>
</ext:Panel>

如何垂直显示 Ext.net RadioGroup 控件？

【问题讨论】：

为什么你的问题被标记为asp.net-mvc？
类似问题，为什么用extjs标记？

标签： c# asp.net ext.net

【解决方案1】：

.Vertical 属性与.ColumnsNumber 属性结合使用。设置Vertical="true" 会影响渲染期间项目在列中的分布方式。

来自 ExtJS 文档：

Ext.form.RadioGroup

真正跨列分布包含的控件，完全在开始下一列之前从上到下填充每一列。将自动计算每列中的控件数量使列尽可能均匀。默认值为假，所以控件将一次添加到一列，完全在开始下一行之前从左到右填充每一行。

下面的简单图表演示了列中项目排序的差异。

// ColumnsNumber="2"
// Vertical="false" <-- default value

1    6
2    7
3    8 
4    9 
5

// ColumnsNumber="2"
// Vertical="true"

1    2
3    4
5    6
7    8
9

这是一个完整的示例，演示了 .ColumnsNumber 和 .Vertical 属性的使用。

示例

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" />

    <ext:Panel 
        runat="server" 
        Title="Example" 
        Width="350" 
        Height="215"
        Padding="5">
        <Items>
            <ext:RadioGroup runat="server" ColumnsNumber="2" Vertical="true">
                <Items>
                    <ext:Radio runat="server" BoxLabel="Purple" />
                    <ext:Radio runat="server" BoxLabel="Yellow" />
                    <ext:Radio runat="server" BoxLabel="Green" />
                    <ext:Radio runat="server" BoxLabel="Blue" />
                    <ext:Radio runat="server" BoxLabel="Red" />
                    <ext:Radio runat="server" BoxLabel="Orange" />
                    <ext:Radio runat="server" BoxLabel="Black" />
                </Items>
            </ext:RadioGroup>
        </Items>
    </ext:Panel>
</form>
</body>
</html>

希望这会有所帮助。

【讨论】：