Using Ext.NET together with plain Ext JS

Show cool things you have done with our products


Post Reply
User avatar
mats
Core Developer
Core Developer
Posts: 16776
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Using Ext.NET together with plain Ext JS

Post by mats »

This post was written by the author of Ext.NET, Geoffrey McGill:

Hi,

Here's a simple sample demonstrating how to:

1. Configure an <ext:Store> Component using markup
2. Load the <ext:Store> using code-behind
3. Configure a simple GridPanel which uses the <ext:Store>
4. Load the GridPanel from an external .js file (example.js)

Example (.aspx)

Code: Select all

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
   protected void Page_Load(object sender, EventArgs e)
   {
       if (!X.IsAjaxRequest)
       {
           this.Store1.DataSource = this.Data;
           this.Store1.DataBind();
       }
   }

   private object[] Data
   {
       get
       {
           return new object[]
           {
               new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
               new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
               new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
               new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
               new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
               new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
               new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
               new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
               new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
               new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
           };
       }
   }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Ext.NET Example</title>

   <ext:ResourcePlaceHolder runat="server" />

   <script type="text/javascript" src="example.js"></script>
</head>
<body>
   <ext:ResourceManager runat="server" />

   <ext:Store ID="Store1" runat="server">
       <Reader>
           <ext:ArrayReader>
               <Fields>
                   <ext:RecordField Name="company" />
                   <ext:RecordField Name="price" Type="Float" />
                   <ext:RecordField Name="change" Type="Float" />
                   <ext:RecordField Name="pctChange" Type="Float" />
                   <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
               </Fields>
           </ext:ArrayReader>
       </Reader>
   </ext:Store>
</body>
</html>
Example (.js)

Code: Select all

Ext.onReady(function () {
    var grid = new Ext.net.GridPanel({
        store    : Store1,
        height   : 350,
        width    : 600,
        title    : "Example",
        autoExpandColumn : "company",
        sm : new Ext.grid.RowSelectionModel({
            singleSelect: true
        }),
        stripeRows      : true,
        trackMouseOver  : true,
        selectionMemory : false,
        cm : new Ext.grid.ColumnModel({
            columns : [{
                id        : "company",
                dataIndex : "company",
                header    : "Company"
            }, {
                dataIndex : "price",
                header    : "Price",
                renderer  : Ext.util.Format.usMoney
            }, {
                dataIndex : "change",
                header    : "Change",
                id        : "Change",
                renderer  : change
            }, {
                dataIndex : "pctChange",
                header    : "Change",
                renderer  : pctChange
            }, {
                dataIndex : "lastChange",
                header    : "Last Updated",
                xtype     : "datecolumn"
            }]
        })
    });

    grid.render(Ext.getBody());
});

var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
    return String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
    return String.format(template, (value > 0) ? "green" : "red", value + "%");
};
Hope this helps.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply