求助：如何在Ext.NET后台C#代码中创建Model、Store和Grid？

我是Ext.NET学习者，目前已能通过后台C#（aspx.cs）代码创建Ext.NET Button，但无法找到相关资源学习如何用后台代码创建Model、Store和Grid。网上的方案均为JavaScript或静态元素实现，以下是我的相关代码及需求：

已实现的Button后台代码 #

aspx.cs 文件 #

protected void Page_Load(object sender, EventArgs e)
{
    // 创建Button
    Ext.Net.Button loadButton = new Ext.Net.Button();
    loadButton.ID = "LoadPageContent";
    loadButton.Text = "Load Page Content";
    loadButton.Click += loadPageContentButton_click;
    loadButton.AutoPostBack = true; // 可移除，避免整页刷新

    this.MyViewPort.Items.Insert(0, loadButton); // 添加到Viewport
}

aspx 文件 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Draft.aspx.cs" Inherits="ExtJS_Project.Draft" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        Ext.onReady(function () {
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" ID="MyViewPort">
        </ext:Viewport>
    </form>
</body>
</html>

目标JavaScript版本（需转换为后台C#实现） #

// 定义Model
Ext.define('EmployeeListModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'Name', type: 'string' },
        { name: 'Surname', type: 'string' },
        { name: 'DateOfBirth', type: 'string' },
        { name: 'Username', type: 'string' },
        { name: 'Password', type: 'string' },
        { name: 'LoginAttempts', type: 'int' },
        { name: 'RegisterDate', type: 'string' }
    ]
});

// 创建Store
Ext.create('Ext.data.Store', {
    storeId: 'employeeListDatabaseStoreId',
    model: 'EmployeeListModel',
    proxy: {
        type: 'ajax',
        url: 'https://localhost:44368/api/values'                
    },
    autoLoad: true
});

// 创建GridPanel
Ext.create('Ext.grid.Panel', {
    id:"MyGridPanelId",
    title: 'Employee List',
    store: Ext.data.StoreManager.lookup('employeeListDatabaseStoreId'),
    columns: [
        { text: 'Employee Code', dataIndex: 'Id', width:115},
        { text: 'Name', dataIndex: 'Name', editor: 'textfield', width: 150 },
        { text: 'Surname', dataIndex: 'Surname', editor: 'textfield', width: 150 },
        { text: 'Username', dataIndex: 'Username', editor: 'textfield', width: 150 },
        {
            text: 'Date Of Birth', dataIndex: 'DateOfBirth', width: 150, editor: {
                inputType: 'date',
                allowBlank: false
            }
        },
        { text: 'Password', dataIndex: 'Password', editor: 'textfield' },
        { text: 'Login Attempts', dataIndex: 'LoginAttempts', editor: 'textfield', width: 150 },
        { text: 'Registration Date', dataIndex: 'RegisterDate', width: 150 },
        { dataIndex: 'Id', width: 10 }
    ],
    selModel: {
        injectCheckbox: 'first',
        checkOnly: true,
        model: 'EmployeeListModel',
        type: 'checkboxmodel'
    },                
    plugins: {
        ptype: 'rowediting',
        clicksToEdit: 1,
        listeners: {
            validateedit: function (editor, element, elementOptions) {
                var columns = ["Name", "Surname", "DateOfBirth", "Username", "Password"];
                var madeChanges = false;
                for (var i = 0; i < columns.length; i++) {
                    if (element["newValues"][columns[i]] != element["originalValues"][columns[i]]) {
                        madeChanges = true;
                        break;
                    }
                }
                if (madeChanges) {
                    UpdateEmployee(element["newValues"], element);
                }
            }
        }
    },
    Width: 950,
    height: 620,
    autoScroll:true,
    layout: "fit",
    frame:true
});

后台C#实现方案 #

以下是对应上述JS代码的后台C#实现，可直接整合到Page_Load方法中：

protected void Page_Load(object sender, EventArgs e)
{
    // 1. 创建Model
    var employeeModel = new Model
    {
        ID = "EmployeeListModel",
        Fields = 
        {
            new ModelField("Id", ModelFieldType.Int),
            new ModelField("Name", ModelFieldType.String),
            new ModelField("Surname", ModelFieldType.String),
            new ModelField("DateOfBirth", ModelFieldType.String),
            new ModelField("Username", ModelFieldType.String),
            new ModelField("Password", ModelFieldType.String),
            new ModelField("LoginAttempts", ModelFieldType.Int),
            new ModelField("RegisterDate", ModelFieldType.String)
        }
    };

    // 2. 创建Store
    var employeeStore = new Store
    {
        ID = "employeeListDatabaseStoreId",
        ModelName = employeeModel.ID,
        AutoLoad = true,
        Proxy = new AjaxProxy
        {
            Url = "https://localhost:44368/api/values",
            Reader = new JsonReader
            {
                RootProperty = "data" // 根据API返回结构调整，若返回直接是数组可省略
            }
        }
    };

    // 3. 创建GridPanel
    var gridPanel = new GridPanel
    {
        ID = "MyGridPanelId",
        Title = "Employee List",
        StoreID = employeeStore.ID,
        Width = 950,
        Height = 620,
        AutoScroll = true,
        Frame = true,
        Layout = LayoutType.Fit
    };

    // 添加Grid列
    gridPanel.Columns.AddRange(new[]
    {
        new Column { Text = "Employee Code", DataIndex = "Id", Width = 115 },
        new Column { Text = "Name", DataIndex = "Name", Width = 150, Editor = new TextField() },
        new Column { Text = "Surname", DataIndex = "Surname", Width = 150, Editor = new TextField() },
        new Column { Text = "Username", DataIndex = "Username", Width = 150, Editor = new TextField() },
        new DateColumn 
        { 
            Text = "Date Of Birth", 
            DataIndex = "DateOfBirth", 
            Width = 150, 
            Editor = new DateField { AllowBlank = false } 
        },
        new Column { Text = "Password", DataIndex = "Password", Editor = new TextField() },
        new Column { Text = "Login Attempts", DataIndex = "LoginAttempts", Width = 150, Editor = new TextField() },
        new Column { Text = "Registration Date", DataIndex = "RegisterDate", Width = 150 },
        new Column { DataIndex = "Id", Width = 10 }
    });

    // 设置选择模型
    gridPanel.SelectionModel.Add(new CheckboxSelectionModel
    {
        InjectCheckbox = InjectCheckbox.First,
        CheckOnly = true
    });

    // 添加行编辑插件
    var rowEditing = new RowEditing
    {
        ClicksToEdit = 1
    };
    // 添加validateedit事件
    rowEditing.Listeners.ValidateEdit.Handler = @"
        var columns = ['Name', 'Surname', 'DateOfBirth', 'Username', 'Password'];
        var madeChanges = false;
        for (var i = 0; i < columns.length; i++) {
            if (e.newValues[columns[i]] != e.originalValues[columns[i]]) {
                madeChanges = true;
                break;
            }
        }
        if (madeChanges) {
            UpdateEmployee(e.newValues, e);
        }
    ";
    gridPanel.Plugins.Add(rowEditing);

    // 将组件添加到Viewport
    this.MyViewPort.Items.Add(employeeModel);
    this.MyViewPort.Items.Add(employeeStore);
    this.MyViewPort.Items.Add(gridPanel);

    // 原Button代码
    Ext.Net.Button loadButton = new Ext.Net.Button();
    loadButton.ID = "LoadPageContent";
    loadButton.Text = "Load Page Content";
    loadButton.Click += loadPageContentButton_click;
    // loadButton.AutoPostBack = true; // 建议移除，避免整页刷新
    this.MyViewPort.Items.Insert(0, loadButton);
}

// 需定义对应的点击事件方法
private void loadPageContentButton_click(object sender, EventArgs e)
{
    // 处理按钮点击逻辑
}

关键说明 #

• Model对应Ext.NET的Model类，通过ModelField定义字段及类型
• Store使用Store类，配置AjaxProxy指向API地址，JsonReader处理返回数据
• GridPanel通过Columns.AddRange添加列，编辑器直接实例化对应的字段控件（如TextField、DateField）
• 行编辑插件RowEditing的事件通过Listeners.ValidateEdit.Handler直接写入JS代码，和原JS逻辑一致

内容的提问来源于stack exchange，提问作者Zweli