动态GridPanel

来源：互联网发布：ai矢量图软件下载编辑：程序博客网时间：2024/04/30 11:15

在很多时候我们需要动态添加网格,此时我们就需要对GridPanel进行后台绘制.设计如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreationGridPanel.aspx.cs" Inherits="ExtNet.CreationGridPanel" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><!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></title>     <script type="text/javascript">        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 + "%");        };    </script></head><body>    <form id="form1" runat="server">    <ext:ResourceManager ID="ResourceManager1" runat="server">    </ext:ResourceManager>   <ext:Window         ID="Window1"         runat="server"        Title="动态GridPanel"        Layout="FitLayout"             Height="350"        Width="600">       <%-- FitLayout:对于包含一个单独的项目，自动展开到能充满 布局所属的容器         FormLayout:此布局管理器被特别设计用来 渲染和管理forms 的子组件。 它负责渲染Fields 的labels         ColumnLayout:这是一种可选的布局风格，用来在用一个多列的格式中创建结构化的布局 ，可以使用百分比或者一个固定值指定每一列的宽度，但是允许根据内容 改变高度。       --%>        <TopBar>            <ext:Toolbar ID="Toolbar1" runat="server">                <Items>                    <ext:Button  ID="btnAddGridPanel"                        runat="server"                         Text="添加GridPanel"                         Icon="Add">                        <DirectEvents>                            <Click OnEvent="btnAddGridPanel_Click">                                <EventMask                                     ShowMask="true"                                     Target="CustomTarget"                                     CustomTarget="Window1"                                     />                            </Click>                        </DirectEvents>                        </ext:Button>                </Items>            </ext:Toolbar>        </TopBar>    </ext:Window>    </form></body></html>

后台代码如下:

using System;using Ext.Net;namespace ExtNet{    public partial class CreationGridPanel : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {        }        protected void btnAddGridPanel_Click(object sender, DirectEventArgs e)        {            this.BuildGridPanel().AddTo(this.Window1);                   // Reference Button by sender argument            ((Button)sender).Disabled = true;            // Reference Button by .Items Collection            //this.Window1.TopBar.Toolbar.Items[0].Disabled = true;                      // Reference Button directly by .ID            // this.btnAddGridPanel.Disabled = true;//这个最简单吧                  }        private GridPanel BuildGridPanel()        {            //动态添加控件            return new GridPanel            {                Border = false,                StripeRows = true,                TrackMouseOver = true,                AutoExpandColumn = "Company",                Store =                          {                            this.BuildStore()                        },                SelectionModel =                         {                             new RowSelectionModel { SingleSelect = true }                        },                                      ColumnModel =                {                      Columns =                    {                        new Column                         {                             ColumnID = "Company",                             Header = "Company",                             DataIndex = "company"                          },                        new Column                        {                            Header = "Price",                            DataIndex = "price",                            Renderer = { Format = RendererFormat.UsMoney }                        },                        new Column                        {                            Header = "Change",                            DataIndex = "change",                            Renderer = { Fn = "change" }                        },                        new Column                        {                            Header = "Change",                            DataIndex = "pctChange",                            Renderer = { Fn = "pctChange" }                        },                        new DateColumn                        {                            Header = "Last Updated",                            DataIndex = "lastChange"                        }                    }                }            };        }        //添加store        private Store BuildStore()        {            Store store = new Store            {                ID = "Store1", // <-- ID is Required                Reader =                 {                     new ArrayReader                     {                        Fields =                         {                            new RecordField("company"),                            new RecordField("price", RecordFieldType.Float),                            new RecordField("change", RecordFieldType.Float),                            new RecordField("pctChange", RecordFieldType.Float),                            new RecordField("lastChange", RecordFieldType.Date, "M/d hh:mmtt")                        }                    }                }            };            store.DataSource = this.Data;            store.DataBind();            return store;        }        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" },                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },                            };           }        }    }}