asp.net中使用extjs

public class ProductsController : Controller
{
    public ActionResult GetProducts()
    {
        var products = new List<Product>
        {
            new Product { Id = 1, Name = "Product A", Price = 100 },
            new Product { Id = 2, Name = "Product B", Price = 200 }
        };

        return Json(products, JsonRequestBehavior.AllowGet);
    }
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

<!DOCTYPE html>
<html>
<head>
    <title>Ext JS Grid Example</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.define('Product', {
                extend: 'Ext.data.Model',
                fields: [
                    { name: 'Id', type: 'int' },
                    { name: 'Name', type: 'string' },
                    { name: 'Price', type: 'float' }
                ]
            });

            var store = Ext.create('Ext.data.Store', {
                model: 'Product',
                proxy: {
                    type: 'ajax',
                    url: '/Products/GetProducts',
                    reader: {
                        type: 'json',
                        rootProperty: ''
                    }
                },
                autoLoad: true
            });

            Ext.create('Ext.grid.Panel', {
                title: 'Products Grid',
                store: store,
                columns: [
                    { text: 'ID', dataIndex: 'Id' },
                    { text: 'Name', dataIndex: 'Name' },
                    { text: 'Price', dataIndex: 'Price', renderer: Ext.util.Format.usMoney }
                ],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        });
    </script>
</head>
<body></body>
</html>