动态GridPanel

最新推荐文章于 2024-04-17 00:45:00 发布

rockywu

最新推荐文章于 2024-04-17 00:45:00 发布

阅读量683

点赞数

分类专栏： ExtNet 文章标签： object button reference header server assembly

本文链接：https://blog.csdn.net/rockywu/article/details/7054744

版权

ExtNet 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在很多时候我们需要动态添加网格,此时我们就需要对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" },               
             };
           }
        }
    }
}