Ext.Net 学习随笔 002 默认按钮

2022-09-29 17:26:58

在FormPanel中按回车按键，会触发默认按钮的click事件。设置方法为在FormPanel中设置DefaultButton属性，如果没有设置这个属性，默认为最后一个按钮。

1.缺省最后一个按钮为默认按钮

X.FormPanel()
    .Buttons(
        X.Button().Text('第一个按钮'),
        X.Button().Text('默认按钮').OnClientClick("Ext.Msg.alert('回车默认触发的事件','触发的按钮为最后一个按钮')")
    )

2.以数字编号指点默认按钮

X.FormPanel()
    .DefaultButton(')
    .Buttons(
        X.Button().Text('第一个按钮'),
        X.Button().Text('默认按钮').OnClientClick("Ext.Msg.alert('回车默认触发的事件','触发的按钮为最后一个按钮')") ，
        X.Button().Text('第三个按钮')
    )

3.用ID指定默认按钮

X.FormPanel()
    .DefaultButton('button 2')
    .Buttons(
        X.Button().Text('第一个按钮'),
        X.Button().ID('button 2').Text('默认按钮').OnClientClick("Ext.Msg.alert('回车默认触发的事件','触发的按钮为最后一个按钮')") ，
        X.Button().Text('第三个按钮')
    )

4.用选择器指定默认按钮

X.FormPanel()
    .DefaultButton('button[text=默认按钮]')
    .Buttons(
        X.Button().Text('第一个按钮'),
        X.Button().Text('默认按钮').OnClientClick("Ext.Msg.alert('回车默认触发的事件','触发的按钮为最后一个按钮')") ，
        X.Button().Text('第三个按钮')
    )

视图的完整代码如下所示

@using Ext.Net;
@using Ext.Net.MVC;
@{
    Layout = null;
    var X = Html.X();
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>默认按钮</title>
</head>
<body>
    @X.ResourceManager();
    @(X.Container()
        .Layout(LayoutType.VBox)
        .Items(
            X.FormPanel()
                .Title("缺省默认按钮为最后一个按钮")
                .BodyPadding()
                .Items(
                    X.TextField().FieldLabel("项目 1")
                )
                .Buttons(
                    X.Button().Text("按钮 1"),
                    X.Button().Text("按钮 2").OnClientClick("Ext.Msg.alert('缺省设置','我是按钮 2');")
                ),
            X.FormPanel()
                .Title("指定第二个按钮为默认按钮,以数字0开始计算")
                .BodyPadding()
                .DefaultButton(")
                .Items(
                    X.TextField().FieldLabel("项目 1")
                )
                .Buttons(
                    X.Button().Text("按钮 1"),
                    X.Button().Text("按钮 2").OnClientClick("Ext.Msg.alert('按索引指定默认按钮','我是按钮 2');"),
                    X.Button().Text("按钮 3")
                ),
            X.FormPanel()
                .Title("指定Id为button2的按钮为默认按钮")
                .BodyPadding()
                .DefaultButton("button2")
                .Items(
                    X.TextField().FieldLabel("项目 1")
                )
                .Buttons(
                    X.Button().Text("按钮 1"),
                    X.Button().ID("button2").Text("按钮 2").OnClientClick("Ext.Msg.alert('按Id指定默认按钮','我是按钮 2');"),
                    X.Button().Text("按钮 3")
                ),
            X.FormPanel()
                .Title("以选择器指定默认按钮，指定Text属性为 按钮 2 的按钮为默认按钮")
                .BodyPadding()
                .DefaultButton("button[text=按钮 2]")
                .Items(
                    X.TextField().FieldLabel("项目 1")
                )
                .Buttons(
                    X.Button().Text("按钮 1"),
                    X.Button().Text("按钮 2").OnClientClick("Ext.Msg.alert('按选择器指定默认按钮','我是按钮 2');"),
                    X.Button().Text("按钮 3")
                )

        ) //end items
    )<!-- end container -->

</body>
</html>

码农公寓

相关文章