Ext.Net 1.2.0_利用 Ext.Net 自定义 GridPanel Ajax 控件

本文内容

概述
演示：利用 Ext.Net 自定义简单的 GridPanel 控件
不封装的程序
封装后的程序
修改记录

概述

最近研究 Ext.Net 的 Demo，看到 SimpleTask 例子，该例子利用 Ext.Net 自己封装了三个控件来使用，感觉不错。

其实，这种方式在 .NET 里很常见，但是由于 Ext.Net 自定义的 Ajax 控件，综合使用了 DOM、CSS 和 JavaScript，还是有一定难度。但是从另外一个角度来看，却比 .NET 简单很多。是不是很奇怪，因为 Ext.Net 有现成的操作 DOM、CSS 和 JavaScript 的框架，你只需要将它们集成到一起。

演示：利用 Ext.Net 自定义 GridPanel 控件

本节演示利用 Ext.Net 自定义简单的 GridPanel 控件。

不封装的程序

首先看看，在不封装的情况下，使用 GridPanel 控件。用于改变某行、或某列的的式样。代码如下：

<%@ 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>Ext.Net GridPanel 改变某行、或某列的的式样</title>

    <style type="text/css">

        .indoor-t

            color: #fb223a;

        .indoor-f

            text-decoration: line-through;

            color: gray;

    </style>

    <script type="text/javascript">>


     


    </head>


    <body>


        <form id="form1" runat="server">


        <ext:ResourceManager ID="ResourceManager1" runat="server" />


        <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="500" AutoExpandColumn="Common"


            Title="植物" Frame="true">


            <Store>


                <ext:Store ID="Store1" runat="server" GroupField="Light">


                    <Proxy>


                        <ext:HttpProxy Method="GET" Url="Data/PlantService.asmx/Plants" />


                    </Proxy>


                    <Reader>


                        <ext:XmlReader Record="Plant" IDPath="Id">


                            <Fields>


                                <ext:RecordField Name="Id" />


                                <ext:RecordField Name="Common" />


                                <ext:RecordField Name="Botanical" />


                                <ext:RecordField Name="Zone" Type="Int" />


                                <ext:RecordField Name="ColorCode" />


                                <ext:RecordField Name="Light" />


                                <ext:RecordField Name="Price" Type="Float" />


                                <ext:RecordField Name="Availability" Type="Date" />


                                <ext:RecordField Name="Indoor" Type="Boolean" />


                            </Fields>


                        </ext:XmlReader>


                    </Reader>


                    <SortInfo Field="Common" Direction="ASC" />


                </ext:Store>


            </Store>


            <ColumnModel ID="ColumnModel1" runat="server">


                <Columns>


                    <ext:Column ColumnID="Id" Header="Key" DataIndex="Id" Width="10" />


                    <ext:Column ColumnID="Common" Header="Common Name" DataIndex="Common" Width="220" />


                    <ext:Column Header="Light" DataIndex="Light" Width="130" />


                    <ext:Column Header="Price" DataIndex="Price" Width="70" Align="right" Groupable="false">


                        <Renderer Format="UsMoney" />


                    </ext:Column>


                    <ext:Column Header="Price" DataIndex="Price" Width="70" Align="right" Groupable="false">


                        <Renderer Fn="changePriceStyle" />


                    </ext:Column>


                    <ext:DateColumn Header="Available" DataIndex="Availability" Width="95" Groupable="false"


                        Format="yyyy-MM-dd" />


                    <ext:Column Header="Indoor?" DataIndex="Indoor" Width="55" />


                    <ext:ImageCommandColumn Width="110">


                        <Commands>


                            <ext:ImageCommand CommandName="Change" Icon="TableEdit" Text="改变">


                                <ToolTip Text="改变" />


                            </ext:ImageCommand>


                        </Commands>


                    </ext:ImageCommandColumn>


                </Columns>


            </ColumnModel>


            <DirectEvents>


                <Command OnEvent="Chg_Click">


                    <ExtraParams>


                        <ext:Parameter Name="Id" Value="record.id" Mode="Raw">


                        </ext:Parameter>


                        <ext:Parameter Name="Common" Value="record.data.Common" Mode="Raw">


                        </ext:Parameter>


                        <ext:Parameter Name="Indoor" Value="record.data.Indoor" Mode="Raw">


                        </ext:Parameter>


                    </ExtraParams>


                </Command>


            </DirectEvents>


            <LoadMask ShowMask="true" />


            <SelectionModel>


                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />


            </SelectionModel>


            <View>


                <ext:GroupingView ID="GroupingView1" HideGroupedColumn="true" runat="server" ForceFit="true"


                    StartCollapsed="true">


                    <GetRowClass Fn="getRowClass" />


                </ext:GroupingView>


            </View>


            <Buttons>


                <ext:Button ID="btnToggleGroups" runat="server" Text="展开/收起分组" Icon="TableSort" Style="margin-left: 6px;"


                    AutoPostBack="false">


                    <Listeners>


                        <Click Handler="#{GridPanel1}.getView().toggleAllGroups();" />


                    </Listeners>


                </ext:Button>


            </Buttons>


        </ext:GridPanel>


        </form>


    </body>


    </html>