Extjs简单的form+grid组合

采用的是Extjs4.2版本

http://localhost:49999/GridPanel/Index

该链接是本地连接，只是方便自己访问，读者无法正常访问。

前端

<!--导入相应Extjs库-->
<script src="~/Scripts/Extjs4.2/ext-all.js"></script>
<link href="~/Scripts/Extjs4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="~/Scripts/Extjs4.2/ext-theme-neptune.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<script>
    Ext.onReady(function () {
        var btnSubmit = Ext.create('Ext.Button', {
            text: '查询',
            //handler是用于设置按按键的时候使用的数据
            handler: function () {
                ExtData.load();
            }
        });

        var form = Ext.create('Ext.form.Panel', {
            title: '信息填写',
            layout: 'column',
            height:80,
            width: 350,
            bodyPadding: 10,

            items: [{
                xtype: 'textfield',
                name: 'username',
                fieldLabel: 'Name',
                allowBlank: false  //判断是否允许空值
            }, btnSubmit
            ]
        });

        var ExtData = Ext.create('Ext.data.Store', {
            storeId: 'employeeStore',
            fields: ['Name', 'Age', 'Address'],//表示在图标上展示的信息
            proxy: {
                type: 'ajax',
                actionMethods: 'post',
                url: '/GridPanel/MessageBack',
                reader: {
                    type: 'json',
                    root: 'data',//注意點
                    totalProperty: 'total'//注意點
                }
            },

            autoLoad: true,
            listeners: {
                beforeload: function (store, operation, eOpts) {
                    //將查詢條件傳遞到後台
                    var postData = {
                        username: $("input[name='username']").val()
                    };
                    Ext.apply(store.proxy.extraParams, postData);
                }
            }

        });
        //ExtData.load();

        var grid = Ext.create('Ext.grid.Panel', {
            title: '详细信息',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
                { text: '姓名', dataIndex: 'Name' },
                { text: '年龄', dataIndex: 'Age' },
                { text: '居住地', dataIndex: 'Address' }
            ],
            width: 350,
            forceFit: true
        });

        //创建一个窗体，用来放置form和grid框
        var win = new Ext.Window({
            title: '数据查询',
            width: 350,
            height: 374,
            resizeable: true,
            modal: true,
            closable: true,
            maximizable: true,//最大化
            minimizable: true,//最小化
            items: [form,grid]
        });
        win.show();
    })
</script>

后端

        public ActionResult MessageBack(string username)
        {   

            List<DataLink> resultData = new List<DataLink>();
            resultData.Add(new DataLink() { Name = "tetse", Age = 19, Address = "ly" });

            string rs = Newtonsoft.Json.JsonConvert.SerializeObject(new { data = resultData, total = 1 });
            return Content(rs);
        }

var data = @Html.Raw(Model.ToDTOJson());

@Html.Raw()

注释：将带有Html标签的字符串，转换成Html标签输出