前面提到過工作臺（《EXT.NET復雜布局（一）——工作臺》）了，不知道各位看過之后有什么感想。這次就介紹介紹使用EXT.NET畫幾個報表。

看圖寫作從小學就開始了，如圖：

圖一

圖二

圖三（1）

圖三（2）

各位看官，不要以為這報表畫起來很難，其實使用EXT.NET來畫的話，還是挺簡單方便的。

1）下面就從圖一開始。

這個報表實現，本人采用的是最原始的手寫代碼（之所以這么說，是因為沒怎么偷懶，老老實實的寫的，因為這是剛接觸EXT.NET的時候畫的）

先上代碼，然后再說話吧。其實注釋挺全的，所以也不需要說什么話了：

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <style type="text/css">.total-field{background-color: #fff;font-weight: bold !important;color: #000;border: solid 1px silver;padding: 2px;margin-right: 5px;}.headRows1{color: Green;font-weight: bolder;}.headRows2{color: Blue;font-weight: bolder;} </style><script type="text/javascript">function getYear(){return <%=txtYear.ClientID %>.getValue();}function getMonth(){return <%=cboMonth.ClientID %>.getValue();} </script><ext:ResourceManager ID="ResourceManager1" runat="server"> </ext:ResourceManager> <ext:Viewport runat="server" ID="Viewport1" Layout="Fit"><Items><ext:GridPanel ID="GridPanel1" Width="400" Height="230" TrackMouseOver="true" runat="server"StripeRows="true" Title="店鋪狀態統計表" Header="false" AutoExpandColumn="RptId" Frame="true"><Store><ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="false" runat="server"><Proxy><ext:HttpProxy runat="server" Method="POST" Url="/Ajax/Reports.ashx"></ext:HttpProxy></Proxy><Reader><ext:JsonReader IDProperty="RptId" TotalProperty="total" Root="data"><Fields><%--RptId 標識 店鋪狀態統計表--%><ext:RecordField Name="RptId" /><%--報表年份--%><ext:RecordField Name="RptYear" /><%--報表月份--%><ext:RecordField Name="RptMonth" /><%--新概念店目標--%><ext:RecordField Name="TargetNewEntrant" /><%--其他品牌轉新概念店目標--%><ext:RecordField Name="TargetOM" /><%--家樂福店目標--%><ext:RecordField Name="TargetC4" /><%--總數目標--%><ext:RecordField Name="TargetTotal" /><%--新概念店開店數--%><ext:RecordField Name="NewStoreNewEntrant" /><%--其他品牌轉新概念店開店數--%><ext:RecordField Name="NewStoreOM" /><%--家樂福開店數--%><ext:RecordField Name="NewStoreC4" /><%--新概念店開店總數--%><ext:RecordField Name="NewStoreNCSTotal" /><%--美麗健康店開店數--%><ext:RecordField Name="NewStoreHB" /><%--開店總數--%><ext:RecordField Name="NewStoreTotal" /><%--新概念店簽約數--%><ext:RecordField Name="ContractSignedNCS" /><%--美麗健康店簽約數--%><ext:RecordField Name="ContractSignedHB" /><%--簽約總數--%><ext:RecordField Name="ContractSignedTotal" /><%--新概念店施工數--%><ext:RecordField Name="UnderDecoNCS" /><%--美麗康店施工數--%><ext:RecordField Name="UnderDecoHB" /><%--施工總數--%><ext:RecordField Name="UnderDecoTotal" /><%--改型店目標--%><ext:RecordField Name="UpgradingTarget" /><%--改型店數--%><ext:RecordField Name="UpgradingInOperation" /><%--改型店簽約數--%><ext:RecordField Name="UpgradingContractSigned" /><%--改型店施工數--%><ext:RecordField Name="UpgradingUnderDeco" /><%--自動解約數--%><ext:RecordField Name="ClosureNonPerform" /><%--公司解約數--%><ext:RecordField Name="ClosureForcedAttrition" /><%--解約總數--%><ext:RecordField Name="ClosureTotal" /><%--凈店數--%><ext:RecordField Name="StoreStatusNetStore" /><%--新概念店總數--%><ext:RecordField Name="StoreStatusStoreNoNCS" /><%--美麗健康店總數--%><ext:RecordField Name="StoreStatusStoreNoHB" /><%--老店總數--%><ext:RecordField Name="StoreStatusStoreNoOld" /><%--總店數--%><ext:RecordField Name="StoreStatusStoreNoTotal" /><%--報表創建日期--%><ext:RecordField Name="RptDate" Type="Date" /><ext:RecordField Name="DisplayMonth" /></Fields></ext:JsonReader></Reader><BaseParams><ext:Parameter Name="type" Value="ShopStatus" Mode="Value" /><ext:Parameter Name="Year" Value="getYear()" Mode="Raw" /><ext:Parameter Name="Month" Value="getMonth()" Mode="Raw" /></BaseParams></ext:Store></Store><ColumnModel ID="ColumnModel1" runat="server"><Columns><%--National:Start--%><ext:Column Header="Year" Hideable="true" DataIndex="DisplayMonth" Locked="true" /><ext:Column Header="ID" ColumnID="RptId" Hidden="true" DataIndex="RptId" /><%--National:End--%><%--<ext:Column Header="報表年份" Hidden="true" DataIndex="RptYear" />--%><%--NewStore:Start--%><%-----------Target:Start--%><ext:Column Header="NewEntrant" Hideable="true" DataIndex="TargetNewEntrant" /><ext:Column Header="OM" Hideable="true" DataIndex="TargetOM" /><ext:Column Header="C4" Hideable="true" DataIndex="TargetC4" /><ext:Column Header="Total" Hideable="true" DataIndex="TargetTotal" /><%-----------Target:End--%><%-----------Actual Store opened:Start--%><ext:Column Header="NewEntrant" Hideable="true" DataIndex="NewStoreNewEntrant" /><ext:Column Header="OM" Hideable="true" DataIndex="NewStoreOM" /><ext:Column Header="C4" Hideable="true" DataIndex="NewStoreC4" /><ext:Column Header="Total" Hideable="true" DataIndex="NewStoreNCSTotal" /><ext:Column Header="H&B" Hideable="true" DataIndex="NewStoreHB" /><ext:Column Header="Total" Hideable="true" DataIndex="NewStoreTotal" /><%-----------Actual Store opened:End--%><%----------- Contract Signed:Start--%><ext:Column Header="NCS" Hideable="true" DataIndex="ContractSignedNCS" /><ext:Column Header="H&B" Hideable="true" DataIndex="ContractSignedHB" /><ext:Column Header="Total" Hideable="true" DataIndex="ContractSignedTotal" /><%----------- Contract Signed:End--%><%----------- Under Deco.:Start--%><ext:Column Header="NCS" Hideable="true" DataIndex="UnderDecoNCS" /><ext:Column Header="H&B" Hideable="true" DataIndex="UnderDecoHB" /><ext:Column Header="Total" Hideable="true" DataIndex="UnderDecoTotal" /><%----------- Under Deco.:End--%><%--NewStore:End--%><%--Upgrading:Start--%><ext:Column Header="Target" Hideable="true" DataIndex="UpgradingTarget" /><ext:Column Header="InOperation" Hideable="true" DataIndex="UpgradingInOperation" /><ext:Column Header="ContractSigned" Hideable="true" DataIndex="UpgradingContractSigned" /><ext:Column Header="UnderDeco" Hideable="true" DataIndex="UpgradingUnderDeco" /><%--Upgrading:End--%><%--Closure:Start--%><%----------- Drop-Out:Start--%><ext:Column Header="NonPerform" Hideable="true" DataIndex="ClosureNonPerform" /><ext:Column Header="ForcedAttrition" Hideable="true" DataIndex="ClosureForcedAttrition" /><ext:Column Header="Total" Hideable="true" DataIndex="ClosureTotal" /><%----------- Drop-Out:End--%><%--Closure:End--%><%--Store Status:Start--%><ext:Column Header="NetStore" Hideable="true" DataIndex="StoreStatusNetStore" /><%----------- Store No.:Start--%><ext:Column Header="NCS" Hideable="true" DataIndex="StoreStatusStoreNoNCS" /><ext:Column Header="H&B" Hideable="true" DataIndex="StoreStatusStoreNoHB" /><ext:Column Header="Old" Hideable="true" DataIndex="StoreStatusStoreNoOld" /><ext:Column Header="Total" Hideable="true" DataIndex="StoreStatusStoreNoTotal" /><%----------- Store No.:End--%><%--Store Status:End--%><ext:DateColumn Header="報表創建日期" Hidden="true" DataIndex="RptDate" Format="yyyy-MM-dd" /></Columns></ColumnModel><LoadMask ShowMask="true" /><View><ext:GroupingView runat="server"><%--隱藏列在分組標頭中，仍占用列數--%><%--一個HeaderGroupRows表示一行--%><HeaderGroupRows><ext:HeaderGroupRow><Columns><ext:HeaderGroupColumn Header="<font class='headRows1'>National</font>" Align="Center" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows1'>New Store</font>"ColSpan="17" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows1'>Upgrading</font>"ColSpan="4" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows1'>Closure</font>"ColSpan="3" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows1'>Store Status</font>"ColSpan="5" /><ext:HeaderGroupColumn Align="Center" /></Columns></ext:HeaderGroupRow></HeaderGroupRows><HeaderGroupRows><ext:HeaderGroupRow><Columns><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows2'>Year/Month</font>" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows2'>Target</font>"ColSpan="5" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows2'>Actual Store opened</font>"ColSpan="6" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows2'>Contract Signed</font>"ColSpan="3" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows2'>Under Deco</font>"ColSpan="3" /><ext:HeaderGroupColumn Align="Center" ColSpan="4" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows2'>Drop-Out</font>"ColSpan="3" /><ext:HeaderGroupColumn Align="Center" /><ext:HeaderGroupColumn Align="Center" Header="<font class='headRows2'>Store No.</font>"ColSpan="4" /><ext:HeaderGroupColumn Align="Center" /></Columns></ext:HeaderGroupRow></HeaderGroupRows></ext:GroupingView></View><TopBar><ext:Toolbar ID="Toolbar1" runat="server"><Items><ext:ToolbarSpacer Width="10" runat="server" /><ext:NumberField runat="server" LabelWidth="74" ID="txtYear" Width="162" MinLength="4"MinLengthText="輸入的年份必須為四位數！" MaxLength="4" FieldLabel="請輸入年份" /><ext:ToolbarSpacer ID="ToolbarSpacer1" Width="10" runat="server" /><ext:ComboBox ID="cboMonth" LabelWidth="74" EmptyText="請選擇月份！" FieldLabel="請選擇月份"Editable="false" runat="server"><Items><ext:ListItem Text="01" Value="1" /><ext:ListItem Text="02" Value="2" /><ext:ListItem Text="03" Value="3" /><ext:ListItem Text="04" Value="4" /><ext:ListItem Text="05" Value="5" /><ext:ListItem Text="06" Value="6" /><ext:ListItem Text="07" Value="7" /><ext:ListItem Text="08" Value="8" /><ext:ListItem Text="09" Value="9" /><ext:ListItem Text="10" Value="10" /><ext:ListItem Text="11" Value="11" /><ext:ListItem Text="12" Value="12" /><ext:ListItem Text="ALL" Value=" " /></Items></ext:ComboBox><ext:ToolbarSpacer ID="ToolbarSpacer2" Width="10" runat="server" /><ext:Button ID="btnSearch" runat="server" Text="搜索" Icon="PageRefresh"><Listeners><Click Handler="if(#{txtYear}.getValue()==''){Ext.MessageBox.alert('溫馨提示', '請輸入年份！');}else{#{Store1}.reload();#{GridPanel1}.getColumnModel().setColumnHeader(0,#{txtYear}.getValue());}" /></Listeners></ext:Button><ext:ToolbarFill runat="server" /><ext:Button ID="btnExport" runat="server" Text="導出Excel" Icon="PageExcel"><Listeners><Click Handler="var downLoadUrl='/FormServerTemplates/DownLoad.aspx?year='+#{txtYear}.getValue()+'&month='+#{cboMonth}.getValue();try{window.open(downLoadUrl,'_newtab');}catch(e){window.lcation.href=downLoadUrl;}" /></Listeners></ext:Button></Items></ext:Toolbar></TopBar></ext:GridPanel></Items> </ext:Viewport>

然后只需要完善Httphandler類就好了。這個報表只是在列頭的組合上稍微有點難度，其實也沒難度，看我的代碼，應該是很清晰的。

2）現在開始說第二個報表了。再看看圖二：

這個報表難度其實也不大，主要有這么幾個地方值得注意：

• 列頭合并。前面以后說過了。很簡單的配置。
• 列合計。待會看源碼。
• 過濾掉0。如果是0，則什么都不顯示，否則顯示藍色的數字。因為這個報表測試數據干了，我又懶，所以大家想象一下數據就好了。據說畫餅充饑是有效果的，當然不是我說的。信不信由你，反正我是相信了。
• 注意列頭的HTML編碼。別把任意字符都往列頭加，列頭會表示有壓力的，并且會導致頁面空白而且無異常。所以注意把特殊字符進行編碼。

這個報表雖然復雜了一點點，但是也很簡單。現在一起來ViewCode：

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <style type="text/css">.total-field{background-color: #fff;font-weight: bold !important;color: #000;padding: 2px;margin-right: 5px;}.headRows1{color: Green;font-weight: bolder;}.headRows2{color: Blue;font-weight: bolder;}.x-grid3-cell-inner{font-family: "segoe ui" ,tahoma, arial, sans-serif;}.x-grid-group-hd div{font-family: "segoe ui" ,tahoma, arial, sans-serif;}.x-grid3-hd-inner{font-family: "segoe ui" ,tahoma, arial, sans-serif;font-size: 12px;}.x-grid3-body .x-grid3-td-Cost{background-color: #f1f2f4;}.x-grid3-summary-row .x-grid3-td-Cost{background-color: #e1e2e4;} </style><script type="text/javascript">var template = '<b style="color:blue;">{0}</b>';var fifterZero = function (value, metadata, record, rowIndex, colIndex, store) {if (value > 0)return String.format(template, value);elsereturn '';};var updateTotal = function (grid) {var fbar = grid.getBottomToolbar(),column,field,width,data = {},c,cs = grid.view.getColumnData();for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) {var r = grid.store.getAt(j);for (var i = 0, len = cs.length; i < len; i++) {c = cs[i];if (j == 0)data[c.name] = 0;if (c.name == "Region")data[c.name] = "總計：";elsedata[c.name] += r.get(c.name);}}for (var i = 0; i < grid.getColumnModel().columns.length; i++) {column = grid.getColumnModel().columns[i];if (column.dataIndex != grid.store.groupField) {field = fbar.findBy(function (item) {return item.dataIndex === column.dataIndex;})[0];c = cs[i];fbar.remove(field, false);fbar.insert(i, field);width = grid.getColumnModel().getColumnWidth(i);field.setWidth(width - 5);field.setValue((column.summaryRenderer || c.renderer)(data[c.name], {}, {}, 0, i, grid.store));}}fbar.doLayout();} </script><ext:GridPanel ID="GridPanel1" AutoScroll="true" TrackMouseOver="true" runat="server"ColumnLines="true" StripeRows="true" AutoHeight="true" Title="Decoration Status"Icon="Bookmark"><Store><ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="true" runat="server"><Reader><ext:JsonReader><Fields><ext:RecordField Name="Region" /><ext:RecordField Name="ncsnew" Type="Int" /><ext:RecordField Name="h_bnew" Type="Int" /><ext:RecordField Name="updatencs" Type="Int" /><ext:RecordField Name="updateh_b" Type="Int" /><ext:RecordField Name="ncsnewnext1" Type="Int" /><ext:RecordField Name="h_bnewnext1" Type="Int" /><ext:RecordField Name="updatencsnext1" Type="Int" /><ext:RecordField Name="updateh_bnext1" Type="Int" /><ext:RecordField Name="ncsnewnext2" Type="Int" /><ext:RecordField Name="h_bnewnext2" Type="Int" /><ext:RecordField Name="updatencsnext2" Type="Int" /><ext:RecordField Name="updateh_bnext2" Type="Int" /><ext:RecordField Name="ncsnewnext3" Type="Int" /><ext:RecordField Name="h_bnewnext3" Type="Int" /><ext:RecordField Name="updatencsnext3" Type="Int" /><ext:RecordField Name="updateh_bnext3" Type="Int" /><ext:RecordField Name="ncsnewCertificated" Type="Int" /><ext:RecordField Name="h_bnewCertificated" Type="Int" /><ext:RecordField Name="updatencsCertificated" Type="Int" /><ext:RecordField Name="updateh_bCertificated" Type="Int" /></Fields></ext:JsonReader></Reader></ext:Store></Store><LoadMask ShowMask="true" /><ColumnModel ID="ctl120"><Columns><ext:Column DataIndex="Region" Header="Region" /><ext:Column DataIndex="ncsnew" Header="New NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="h_bnew" Header="New H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updatencs" Header="Upgrading NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updateh_b" Header="Upgrading H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="ncsnewnext1" Header="New NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="h_bnewnext1" Header="New H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updatencsnext1" Header="Upgrading NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updateh_bnext1" Header="Upgrading H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="ncsnewnext2" Header="New NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="h_bnewnext2" Header="New H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updatencsnext2" Header="Upgrading NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updateh_bnext2" Header="Upgrading H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="ncsnewnext3" Header="New NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="h_bnewnext3" Header="New H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updatencsnext3" Header="Upgrading NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updateh_bnext3" Header="Upgrading H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="ncsnewCertificated" Header="New NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="h_bnewCertificated" Header="New H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updatencsCertificated" Header="Upgrading NCS"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column><ext:Column DataIndex="updateh_bCertificated" Header="Upgrading H&amp;B"><Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" /></ext:Column></Columns></ColumnModel><Listeners><ColumnResize Handler="updateTotal(this);" /><AfterRender Handler="updateTotal(this);" Delay="100" /></Listeners><View><ext:GroupingView ID="gvColumns" runat="server" /></View><BottomBar><ext:Toolbar ID="Toolbar1" runat="server"><Items><ext:DisplayField ID="DisplayField1" runat="server" Cls="total-field" Text="-" DataIndex="Region" /><ext:DisplayField ID="DisplayField2" runat="server" Cls="total-field" Text="-" DataIndex="ncsnew" /><ext:DisplayField ID="DisplayField3" runat="server" Cls="total-field" Text="-" DataIndex="h_bnew" /><ext:DisplayField ID="DisplayField4" runat="server" Cls="total-field" Text="-" DataIndex="updatencs" /><ext:DisplayField ID="DisplayField5" runat="server" Cls="total-field" Text="-" DataIndex="updateh_b" /><ext:DisplayField ID="DisplayField6" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewnext1" /><ext:DisplayField ID="DisplayField7" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewnext1" /><ext:DisplayField ID="DisplayField8" runat="server" Cls="total-field" Text="-" DataIndex="updatencsnext1" /><ext:DisplayField ID="DisplayField9" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bnext1" /><ext:DisplayField ID="DisplayField10" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewnext2" /><ext:DisplayField ID="DisplayField11" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewnext2" /><ext:DisplayField ID="DisplayField12" runat="server" Cls="total-field" Text="-" DataIndex="updatencsnext2" /><ext:DisplayField ID="DisplayField13" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bnext2" /><ext:DisplayField ID="DisplayField14" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewnext3" /><ext:DisplayField ID="DisplayField15" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewnext3" /><ext:DisplayField ID="DisplayField16" runat="server" Cls="total-field" Text="-" DataIndex="updatencsnext3" /><ext:DisplayField ID="DisplayField17" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bnext3" /><ext:DisplayField ID="DisplayField18" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewCertificated" /><ext:DisplayField ID="DisplayField19" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewCertificated" /><ext:DisplayField ID="DisplayField20" runat="server" Cls="total-field" Text="-" DataIndex="updatencsCertificated" /><ext:DisplayField ID="DisplayField21" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bCertificated" /></Items></ext:Toolbar></BottomBar> </ext:GridPanel>

該說的都說了，注釋也懶得寫了。現在想說的是下面幾點：

首先來看記錄集（RecordField）。注意字段的類型（Type="Int"）。比如你的數據中有DateTime類型、Int類型的數據，最好設置下類型，這樣的話，就可以避免出現undefined。而且也方便格式轉換。

Store。這個Store為什么沒有設置URL呢？在《EXT.NET高效開發（一）——概述》我說過，“7）數據交換更簡單”。應該是“數據交互”，本人比較懶，只在這里更正申明下好了，我也是剛看到。這里的Store，是在后臺賦值的。如下面代碼：

var qList = _db.SelectReportMonthDataForUnderDeco().ToList();Store1.DataSource = qList;Store1.DataBind();

統計怎么算的？注意updateTotal函數。“總計”兩個字是怎么加上去的，答曰：“敲上去的”。再注意BottomBar（想當然的，這就是底部工具條），這里就是顯示統計的數據的。

估計看官會有這么一個疑問，列頭分組怎么分的，木有見代碼。代碼是有的，只是還木有貼出來，因為我寫在后臺，這種方式也挺直觀方便的。當然蘿卜白菜各有所愛了：

var _headGroupRow = new HeaderGroupRow(){Columns ={new HeaderGroupColumn(){Header = "<font class='headRows1'></font>",Align = Alignment.Center,ColSpan = 1}}};_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows1'>{0}</font>","Under Deco."),Align = Alignment.Center,ColSpan = 4,});var _currentMonth = Convert.ToInt32(qList.First().monthnum.Trim());for (int i = 0; i < 3; i++){_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows1'>{0}</font>",GetEnglishMonth((_currentMonth + i).ToString())),Align = Alignment.Center,ColSpan = 4,});}_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows1'>{0}</font>","Certificated"),Align = Alignment.Center,ColSpan = 4,});gvColumns.HeaderGroupRows.Add(_headGroupRow);

這個就說到這里了。

3)這個相對來說，比上兩個都復雜。但是我畫起來，比上兩個都快。一個是更熟練了，第二個是生成了很多東西。

先看頁面代碼（頁面代碼很簡潔）：

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <style type="text/css">.headRows1{color: Green;font-weight: bolder;}.headRows2{color: Purple;font-weight: bolder;} </style><script type="text/javascript">var template = '<b style="color:blue;">{0}</b>';var fifterZero = function(value) {if (value > 0)return String.format(template, value);elsereturn '';};function search() {if (ddlArea.getValue() != '' && ddlYear.getValue() != '' && ddlMonth.getValue() != '') {window.location.href = '<%=CurrentUrl %>' + "?newarea=" + escape(ddlArea.getValue()) + "&newyear=" + ddlYear.getValue() + "&newmonth=" + ddlMonth.getValue();} else {alert("請選擇區域-年份-月份！");}} </script><div style="margin-left:10px;"><ext:ResourceManager ID="ResourceManager1" runat="server" /><ext:FieldSet Collapsible="true" ID="Panel1" Border="true" Width="800" runat="server"Title="搜索條件" AutoHeight="true"><Items><ext:TableLayout ID="TableLayout1" runat="server" Columns="3"><Cells><ext:Cell><ext:ComboBox ID="ddlArea" Width="235" IDMode="Static" FieldLabel="區域" Editable="false"runat="server" /></ext:Cell><ext:Cell><ext:ComboBox ID="ddlYear" Width="235" IDMode="Static" FieldLabel="年份" Editable="false"runat="server" /></ext:Cell><ext:Cell><ext:ComboBox ID="ddlMonth" Width="235" IDMode="Static" FieldLabel="月份" Editable="false"runat="server" /></ext:Cell></Cells></ext:TableLayout></Items><BottomBar><ext:Toolbar ID="tbSearch" runat="server"><Items><ext:Button ID="btnSearch" runat="server" Text="查詢" Icon="ArrowRefresh" LabelAlign="Left"Type="Button" AutoPostBack="false"><Listeners><Click Handler="search();" /></Listeners></ext:Button></Items></ext:Toolbar></BottomBar></ext:FieldSet><ext:GridPanel ID="GridPanel1" AutoScroll="true" TrackMouseOver="true" runat="server"ColumnLines="true" StripeRows="true" AutoHeight="true" Title="ShopStatus" Icon="Date"><Store><ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="true" runat="server" /></Store><LoadMask ShowMask="true" /><ColumnModel ID="ctl120" /><View><ext:GroupingView ID="gvColumns" runat="server" /></View><BottomBar><ext:Toolbar ID="Toolbar1" runat="server" Margins="0,0,0,0"><Items><ext:GridPanel ID="gpItems" AutoScroll="true" TrackMouseOver="true" runat="server" Margins="0,0,0,0"HideHeaders="true" ColumnLines="true" StripeRows="true" AutoHeight="true" Title="Jun"Icon="DateGo"><Store><ext:Store ID="storeItems" ShowWarningOnFailure="false" AutoLoad="true" runat="server" /></Store><LoadMask ShowMask="true" /><ColumnModel /></ext:GridPanel></Items></ext:Toolbar></BottomBar></ext:GridPanel> </div><script type="text/javascript">Ext.onReady(function() {$(function() {setTimeout("setLabelClass()", 300);});});function setLabelClass() {$("table.x-table-layout").attr("width", "100%");} </script> 仔細看起來，發現這個頁面代碼并沒啥東西。只能隱約的看到，一個GridPanel底部放了一個GridPanel。看來真不是個東西。這里暫不作解釋，繼續貼碼： /// <summary>/// 獲取當前URL/// </summary>public string CurrentUrl{get { return Request.Path; }}protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){ResourceManager1.BuildAllPrivilegesForExtNET();//注冊JQuery腳本this.Page.ClientScript.RegisterClientScriptInclude("JQuery4.4", "/js/jquery-1.4.4.min.js");#region 綁定年月for (int i = 0; i < 20; i++){ddlYear.Items.Add(new ListItem(DateTime.Now.AddYears(-i).Year.ToString()));}for (int i = 1; i <= 12; i++){ddlMonth.Items.Add(new ListItem(i.ToString()));} #endregion#region 綁定區域using (var _db = new NBShopDataContext()){var _lstArea = _db.SelectArea().ToList();foreach (var areaResult in _lstArea){ddlArea.Items.Add(new ListItem(areaResult.AreaName));}ddlArea.Items.Add(new ListItem("全國"));} #endregionvar _cm = new CommonService();#region 獲取搜索條件var _month = string.IsNullOrEmpty(Request.QueryString["newmonth"])? (Request.QueryString["month"] ?? DateTime.Now.Month.ToString()): Request.QueryString["newmonth"];var _areaName = string.IsNullOrEmpty(Request.QueryString["newarea"])? (Request.QueryString["area"] ?? "全國"): Request.QueryString["newarea"];var _year = string.IsNullOrEmpty(Request.QueryString["newyear"])? (Request.QueryString["year"] ?? DateTime.Now.Year.ToString()): Request.QueryString["newyear"];var _dic = new Dictionary<string, string>(){{"@areaname", _areaName},{"@monthnum", _month},{"@yearnum", _year}}; #endregion#region 選擇相應的值ddlArea.SelectedItem.Value = _areaName;ddlMonth.SelectedItem.Value = _month;ddlYear.SelectedItem.Value = _year; #endregion#region 如果不是全國，區域就無法選擇if (Request.QueryString["area"] != "全國"){ddlArea.Disabled = true;} #endregion#region 獲取數據DataTable _dt = _cm.SelectReportByStoredName("SelectMonthDataAndWeekData", _dic);if (_dt == null || _dt.Rows.Count == 0){X.Msg.Alert("溫馨提示", "沒有數據可供顯示！").Show();GridPanel1.RemoveAll();return;} #endregion#region 綁定數據BingData(_dt.AsEnumerable().Where(p => p[0].ToString().IndexOf("-") == -1 && p[0].ToString() != "MTD" && p[0].ToString() != "Drop Out" && p[0].ToString() != "Net").AsDataView(), GridPanel1, Store1);BingData(_dt.AsEnumerable().Where(p => p[0].ToString().Contains("-") || p[0].ToString() == "MTD" || p[0].ToString() == "Drop Out" || p[0].ToString() == "Net").AsDataView(), gpItems, storeItems); #endregionGridPanel1.Header = false;//綁定子版塊標題（當前月）gpItems.Title = GetEnglishMonth(_month);#region 設置列頭if (GridPanel1.ColumnModel.Columns.Count >= 17){GridPanel1.ColumnModel.Columns[0].Header = _areaName;GridPanel1.ColumnModel.Columns[1].Header = "NCS";GridPanel1.ColumnModel.Columns[2].Header = Server.HtmlEncode("H&B");GridPanel1.ColumnModel.Columns[3].Header = Server.HtmlEncode("Others");GridPanel1.ColumnModel.Columns[4].Header = Server.HtmlEncode("Total Franchise");GridPanel1.ColumnModel.Columns[5].Header = Server.HtmlEncode("New Prospects / Application Completed");GridPanel1.ColumnModel.Columns[6].Header = Server.HtmlEncode("Contract Approved/ No Deco.");GridPanel1.ColumnModel.Columns[7].Header = Server.HtmlEncode("Under Deco");GridPanel1.ColumnModel.Columns[8].Header = Server.HtmlEncode("New Prospects / Application Completed");GridPanel1.ColumnModel.Columns[9].Header = Server.HtmlEncode("Contract Approved/ No Deco.");GridPanel1.ColumnModel.Columns[10].Header = Server.HtmlEncode("Under Deco");GridPanel1.ColumnModel.Columns[11].Header = Server.HtmlEncode("New Prospects / Application Completed");GridPanel1.ColumnModel.Columns[12].Header = Server.HtmlEncode("Contract Approved/ No Deco.");GridPanel1.ColumnModel.Columns[13].Header = Server.HtmlEncode("Under Deco");GridPanel1.ColumnModel.Columns[14].Header = Server.HtmlEncode("New Prospects / Application Completed");GridPanel1.ColumnModel.Columns[15].Header = Server.HtmlEncode("Contract Approved/ No Deco.");GridPanel1.ColumnModel.Columns[16].Header = Server.HtmlEncode("Under Deco");GridPanel1.ColumnModel.Columns[17].Header = Server.HtmlEncode("New NCS");GridPanel1.ColumnModel.Columns[18].Header = Server.HtmlEncode("New H&B");GridPanel1.ColumnModel.Columns[19].Header = Server.HtmlEncode("Upgrading");GridPanel1.ColumnModel.Columns[20].Header = Server.HtmlEncode("Upgrading H&B");}#endregion#region 設置合并的列頭var _headGroupRow = new HeaderGroupRow(){Columns ={new HeaderGroupColumn(){Header = "<font class='headRows1'></font>",Align = Alignment.Center,ColSpan = 1}}};_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows1'>{0}</font>","In operation"),Align = Alignment.Center,ColSpan = 4,});_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows2'>{0}</font>","New NCS"),Align = Alignment.Center,ColSpan = 3,});_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows2'>{0}</font>",Server.HtmlEncode("New H&B")),Align = Alignment.Center,ColSpan = 3,});_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows2'>{0}</font>","Upgrades--NCS"),Align = Alignment.Center,ColSpan = 3,});_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows2'>{0}</font>",Server.HtmlEncode("Upgrades--H&B")),Align = Alignment.Center,ColSpan = 3,});_headGroupRow.Columns.Add(new HeaderGroupColumn(){Header =string.Format("<font class='headRows1'>{0}</font>","Certificated"),Align = Alignment.Center,ColSpan = 4,});gvColumns.HeaderGroupRows.Add(_headGroupRow);#endregion_dt.Dispose();}}/// <summary>/// 生成字段和列，并綁定數據源/// </summary>/// <param name="_rptData"></param>/// <param name="_gp"></param>/// <param name="_store"></param>private void BingData(System.Data.DataView _rptData, GridPanel _gp, Store _store){var _jsonReader = new JsonReader();foreach (DataColumn _dataColumn in _rptData.Table.Columns){//創建字段if (_dataColumn.ColumnName == "timecol"){_jsonReader.Fields.Add(new RecordField(_dataColumn.ColumnName));}else{_jsonReader.Fields.Add(new RecordField(_dataColumn.ColumnName));}//創建列var _column = new Column{Header = _dataColumn.ColumnName,DataIndex = _dataColumn.ColumnName,};//過濾0，調用fifterZero函數if (_column.Header != "timecol"){_column.Renderer.Fn = "fifterZero";_column.Renderer.Args = new string[] { "value" };}_gp.ColumnModel.Columns.Add(_column);}_store.Reader.Add(_jsonReader);_store.DataSource = _rptData;_store.DataBind();} 代碼貼上去了，發現木有，也不是很多，這里我順便解釋解釋：

點擊【查詢】按鈕后，刷新頁面獲取數據。當然您也可以改成不刷新的，也很簡單的，這里我是為了更簡單。 不過在這方面，我要說一下：你可以使用X.IsAjaxRequest來判斷是否是EXT的Ajax請求，別重復執行了Page_load事件里面的代碼。

數據源是直接綁的，使用的是DataTable。然后在綁定的時候，使用LINQ to DataTable進行了過濾。這個報表不會有多少數據。 當然如果你喜歡2.0的話，也可以用那個Select啊，DataView的RowFilter等來過濾。

數據集、字段、列是動態加的，列頭是手動寫的。因為列頭不一樣，而且有特殊字符。也就是說，如果可以，你完全可以動態生成整個GridPanel。

最后說點。Extjs與JQuery框架是不沖突的，井水不犯河水。

封裝點函數，整個動態生成，也是一種高效的開發，這也是我EXT.NET高效開發系列所推崇的（EXT.NET高效開發（二）——封裝函數）。 也許有人會說點性能問題什么的，我個人認為，生活總是有所取舍的，至于如何取舍，就需要根據個人的環境來判斷了，不要撿了芝麻丟了西瓜就行了。 再套用一句，勿以BUG小而為之，勿以Code小而不為。 總算寫完了。有時間的話，我會繼續…

轉載于:https://www.cnblogs.com/codelove/archive/2011/07/27/2118492.html

總結

以上是生活随笔為你收集整理的EXT.NET复杂布局（二）——报表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。