EXT.NET学习之GridPanel

最新推荐文章于 2024-03-26 17:04:43 发布

学学学啊

最新推荐文章于 2024-03-26 17:04:43 发布

阅读量120

点赞数 1

文章标签： .net 学习

本文链接：https://blog.youkuaiyun.com/xiongyanglai/article/details/136394022

版权

本文详细描述了一个使用JavaScript和AJAX实现的股票交易应用，展示了如何在GridPanel中实现Buy和Sell功能，以及配置数据源、列模型、选择模型和工具栏交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@(
        X.Action()
            .ID("SellAction")
            .Icon(Icon.Delete)
            .Text("Sell stock")
            .Disabled(true)
            .Handler(MvcUtils.StringifyScriptBlock(@<text>
                <script type="text/javascript">
                    var rec = #{ GridPanel1 }.getSelectionModel().getSelection()[0];
                    if (rec) {
                        Ext.Msg.alert('Sell', 'Sell ' + rec.get('company'));
                    }
                </script>
            </text>))
    )

    @(
        X.Action()
            .ID("BuyAction")
            .Icon(Icon.Accept)
            .Text("Buy stock")
            .Disabled(true)
            .Handler(MvcUtils.StringifyScriptBlock(@<text>
                <script type="text/javascript">
                    var rec = #{GridPanel1}.getSelectionModel().getSelection()[0];
                    if (rec) {
                        Ext.Msg.alert('Buy', 'Buy ' + rec.get('company'));
                    }
                </script>
            </text>))
    )

    @(
        X.Menu().ID("ContextMenu")
            .Items(
                new ActionRef("#{BuyAction}"),
                new ActionRef("#{SellAction}")
            )
    )

    @(
        X.GridPanel()
            .ID("GridPanel1")
            .ColumnLines(true)
            .Title("Action Grid")
            .Width(600)
            .Height(350)
            .Store(
                X.Store().ID("Store1")
                    .Model(X.Model().Fields(
                        X.ModelField().Name("company"),
                        X.ModelField().Name("price").Type(ModelFieldType.Float),
                        X.ModelField().Name("change").Type(ModelFieldType.Float),
                        X.ModelField().Name("pctChange").Type(ModelFieldType.Float),
                        X.ModelField().Name("lastChange").Type(ModelFieldType.Date).DateFormat("M/d hh:mmtt")
                    ))
                    .DataSource(Model)
            )
            .ColumnModel(
                X.Column().Text("Company").DataIndex("company").Flex(1),
                X.Column().Text("Price").DataIndex("price").Renderer(RendererFormat.UsMoney),
                X.Column().Text("Change").DataIndex("change").Renderer("change"),
                X.Column().Text("Change").DataIndex("pctChange").Renderer("pctChange"),
                X.Column().Text("Last Updated").DataIndex("lastChange")
            )
            .SelectionModel(
                X.RowSelectionModel()
                    .Listeners(l => l.SelectionChange.Handler = MvcUtils.StringifyScriptBlock(@<text>
                        <script type="text/javascript">
                            if (selected.length) {
                                #{BuyAction}.enable();
                                #{SellAction}.enable();
                            } else {
                                #{BuyAction}.disable();
                                #{SellAction}.disable();
                            }
                        </script>
                    </text>))
            )
            .ViewConfig(
                X.GridView().StripeRows(true)
                    .Listeners(ltn => ltn.ItemContextMenu.Handler = MvcUtils.StringifyScriptBlock(@<text>
                        <script type="text/javascript">
                            e.stopEvent();
                            #{ContextMenu}.showAt(e.getXY());
                            return false;
                        </script>
                    </text>))
            )
            .DockedItems(
                X.Toolbar().Items(
                    new ActionRef("#{BuyAction}"),
                    new ActionRef("#{SellAction}")
                )
            )
    )


1、.ColumnLines(true) 的作用是启用网格中的列线

2、Store(...)：配置网格的数据源。这里定义了一个数据存储，该存储包含模型字段，并指定了数据源。

3、ColumnModel(...)：定义网格的列模型，即网格应该显示哪些列，每列的文本是什么，以及每列的数据索引是什么。

4、SelectionModel(...)：配置网格的选择模型。这里定义了当用户选择网格行时应该发生什么。

5、ViewConfig(...)：配置网格的视图。这里启用了斑马线（条纹行），并可能配置了其他视图相关的选项

6、.DockedItems(...) 配置了停靠在网格上的项目，通常出现在网格的顶部或底部。在这个例子中，创建了一个工具栏（X.Toolbar()），并向其中添加了两个动作引用（ActionRef）