前面提到过工作台（《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-col: ＃fff;
font-weight: bold !imptant;
col: ＃000;
bder: solid 1px silver;
padding: 2px;
margin-right: 5px;
}
.headRows1
{
col: Green;
font-weight: bolder;
}
.headRows2
{
col: 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:Viewpt runat="server" ID="Viewpt1" Layout="Fit">
<Items>
<ext:GridPanel ID="GridPanel1" Width="400" Height="230" TrackMouseOver="true" runat="server"
StripeRows="true" Title="店铺状态统计表" Header="false" AutoExpColumn="RptId" Frame="true">
<Ste>
<ext:Ste ID="Ste1" ShowWarningOnFailure="false" AutoLoad="false" runat="server">
<Proxy>
<ext:HttpProxy runat="server" Method="POST" Url="/Ajax/Repts.ashx">
</ext:HttpProxy>
</Proxy>
<Reader>
<ext:JsonReader IDProperty="RptId" TotalProperty="total" Root="data">
<Fields>
<％--RptId 标识 店铺状态统计表--％>
<ext:RecdField Name="RptId" />
<％--报表年份--％>
<ext:RecdField Name="RptYear" />
<％--报表月份--％>
<ext:RecdField Name="RptMonth" />
<％--新概念店目标--％>
<ext:RecdField Name="TargetNewEntrant" />
<％--其他品牌转新概念店目标--％>
<ext:RecdField Name="TargetOM" />
<％--家乐福店目标--％>
<ext:RecdField Name="TargetC4" />
<％--总数目标--％>
<ext:RecdField Name="TargetTotal" />
<％--新概念店开店数--％>
<ext:RecdField Name="NewSteNewEntrant" />
<％--其他品牌转新概念店开店数--％>
<ext:RecdField Name="NewSteOM" />
<％--家乐福开店数--％>
<ext:RecdField Name="NewSteC4" />
<％--新概念店开店总数--％>
<ext:RecdField Name="NewSteNCSTotal" />
<％--美丽健康店开店数--％>
<ext:RecdField Name="NewSteHB" />
<％--开店总数--％>
<ext:RecdField Name="NewSteTotal" />
<％--新概念店签约数--％>
<ext:RecdField Name="ContractSignedNCS" />
<％--美丽健康店签约数--％>
<ext:RecdField Name="ContractSignedHB" />
<％--签约总数--％>
<ext:RecdField Name="ContractSignedTotal" />
<％--新概念店施工数--％>
<ext:RecdField Name="UnderDecoNCS" />
<％--美丽康店施工数--％>
<ext:RecdField Name="UnderDecoHB" />
<％--施工总数--％>
<ext:RecdField Name="UnderDecoTotal" />
<％--改型店目标--％>
<ext:RecdField Name="UpgradingTarget" />
<％--改型店数--％>
<ext:RecdField Name="UpgradingInOperation" />
<％--改型店签约数--％>
<ext:RecdField Name="UpgradingContractSigned" />
<％--改型店施工数--％>
<ext:RecdField Name="UpgradingUnderDeco" />
<％--自动解约数--％>
<ext:RecdField Name="ClosureNonPerfm" />
<％--公司解约数--％>
<ext:RecdField Name="ClosureFcedAttrition" />
<％--解约总数--％>
<ext:RecdField Name="ClosureTotal" />
<％--净店数--％>
<ext:RecdField Name="SteStatusNetSte" />
<％--新概念店总数--％>
<ext:RecdField Name="SteStatusSteNoNCS" />
<％--美丽健康店总数--％>
<ext:RecdField Name="SteStatusSteNoHB" />
<％--老店总数--％>
<ext:RecdField Name="SteStatusSteNoOld" />
<％--总店数--％>
<ext:RecdField Name="SteStatusSteNoTotal" />
<％--报表创建日期--％>
<ext:RecdField Name="RptDate" Type="Date" />
<ext:RecdField 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:Ste>
</Ste>
<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" />--％>
<％--NewSte: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 Ste opened:Start--％>
<ext:Column Header="NewEntrant" Hideable="true" DataIndex="NewSteNewEntrant" />
<ext:Column Header="OM" Hideable="true" DataIndex="NewSteOM" />
<ext:Column Header="C4" Hideable="true" DataIndex="NewSteC4" />
<ext:Column Header="Total" Hideable="true" DataIndex="NewSteNCSTotal" />
<ext:Column Header="H&B" Hideable="true" DataIndex="NewSteHB" />
<ext:Column Header="Total" Hideable="true" DataIndex="NewSteTotal" />
<％-----------Actual Ste 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--％>
<％--NewSte: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="NonPerfm" Hideable="true" DataIndex="ClosureNonPerfm" />
<ext:Column Header="FcedAttrition" Hideable="true" DataIndex="ClosureFcedAttrition" />
<ext:Column Header="Total" Hideable="true" DataIndex="ClosureTotal" />
<％----------- Drop-Out:End--％>
<％--Closure:End--％>
<％--Ste Status:Start--％>
<ext:Column Header="NetSte" Hideable="true" DataIndex="SteStatusNetSte" />
<％----------- Ste No.:Start--％>
<ext:Column Header="NCS" Hideable="true" DataIndex="SteStatusSteNoNCS" />
<ext:Column Header="H&B" Hideable="true" DataIndex="SteStatusSteNoHB" />
<ext:Column Header="Old" Hideable="true" DataIndex="SteStatusSteNoOld" />
<ext:Column Header="Total" Hideable="true" DataIndex="SteStatusSteNoTotal" />
<％----------- Ste No.:End--％>
<％--Ste Status:End--％>
<ext:DateColumn Header="报表创建日期" Hidden="true" DataIndex="RptDate" Fmat="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 Ste</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"">Ste 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 Ste 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"">Ste 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 Hler="if（＃{txtYear}.getValue（）==""""）{Ext.MessageBox.alert（""温馨提示""， ""请输入年份！""）;}else{＃{Ste1}.reload（）;＃{GridPanel1}.getColumnModel（）.setColumnHeader（0，＃{txtYear}.getValue（））;}" />
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server" />
<ext:Button ID="btnExpt" runat="server" Text="导出Excel" Icon="PageExcel">
<Listeners>
<Click Hler="
var downLoadUrl=""/FmServerTemplates/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:Viewpt>
然后只需要完善Httphler类就好了。这个报表只是在列头的组合上稍微有点难度，其实也没难度，看我的代码，应该是很清晰的。
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-col: ＃fff;
font-weight: bold !imptant;
col: ＃000;
padding: 2px;
margin-right: 5px;
}
.headRows1
{
col: Green;
font-weight: bolder;
}
.headRows2
{
col: 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-col: ＃f1f2f4;
}
.x-grid3-summary-row .x-grid3-td-Cost
{
background-col: ＃e1e2e4;
}
</style>
<script type="text/javascript">
var template = ""<b style="col:blue;">{0}</b>"";
var fifterZero = function （value， metadata， recd， rowIndex， colIndex， ste） {
if （value > 0）
return String.fmat（template， value）;
else
return """";
};
var Total = function （grid） {
var fbar = grid.getBottomToolbar（），
column，
field，
width，
data = {}，
c，
cs = grid.view.getColumnData（）;
f （var j = 0， jlen = grid.ste.getCount（）; j < jlen; j++） {
var r = grid.ste.getAt（j）;
f （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] = "总计：";
else
data[c.name] += r.get（c.name）;
}
}
f （var i = 0; i < grid.getColumnModel（）.columns.length; i++） {
column = grid.getColumnModel（）.columns[i];
if （column.dataIndex != grid.ste.groupField） {
field = fbar.findBy（function （item） {
return item.dataIndex === column.dataIndex;
}）[0];
c = cs[i];
fbar.remove（field， false）;
fbar.（i， field）;
width = grid.getColumnModel（）.getColumnWidth（i）;
field.setWidth（width - 5）;
field.setValue（（column.summaryRenderer || c.renderer）（data[c.name]， {}， {}， 0， i， grid.ste））;
}
}
fbar.doLayout（）;
}
</script>
<ext:GridPanel ID="GridPanel1" AutoScroll="true" TrackMouseOver="true" runat="server"
ColumnLines="true" StripeRows="true" AutoHeight="true" Title="Decation Status"
Icon="Bookmark">
<Ste>
<ext:Ste ID="Ste1" ShowWarningOnFailure="false" AutoLoad="true" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecdField Name="Region" />
<ext:RecdField Name="ncsnew" Type="Int" />
<ext:RecdField Name="h_bnew" Type="Int" />
<ext:RecdField Name="ncs" Type="Int" />
<ext:RecdField Name="h_b" Type="Int" />
<ext:RecdField Name="ncsnewnext1" Type="Int" />
<ext:RecdField Name="h_bnewnext1" Type="Int" />
<ext:RecdField Name="ncsnext1" Type="Int" />
<ext:RecdField Name="h_bnext1" Type="Int" />
<ext:RecdField Name="ncsnewnext2" Type="Int" />
<ext:RecdField Name="h_bnewnext2" Type="Int" />
<ext:RecdField Name="ncsnext2" Type="Int" />
<ext:RecdField Name="h_bnext2" Type="Int" />
<ext:RecdField Name="ncsnewnext3" Type="Int" />
<ext:RecdField Name="h_bnewnext3" Type="Int" />
<ext:RecdField Name="ncsnext3" Type="Int" />
<ext:RecdField Name="h_bnext3" Type="Int" />
<ext:RecdField Name="ncsnewCertificated" Type="Int" />
<ext:RecdField Name="h_bnewCertificated" Type="Int" />
<ext:RecdField Name="ncsCertificated" Type="Int" />
<ext:RecdField Name="h_bCertificated" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Ste>
</Ste>
<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， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnew" Header="New H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncs" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_b" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsnewnext1" Header="New NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnewnext1" Header="New H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsnext1" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnext1" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsnewnext2" Header="New NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnewnext2" Header="New H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsnext2" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnext2" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsnewnext3" Header="New NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnewnext3" Header="New H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsnext3" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnext3" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsnewCertificated" Header="New NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bnewCertificated" Header="New H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="ncsCertificated" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
<ext:Column DataIndex="h_bCertificated" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value， metadata， recd， rowIndex， colIndex， ste" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<ColumnResize Hler="Total（this）;" />
<AfterRender Hler="Total（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="ncs" />
<ext:DisplayField ID="DisplayField5" runat="server" Cls="total-field" Text="-" DataIndex="h_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="ncsnext1" />
<ext:DisplayField ID="DisplayField9" runat="server" Cls="total-field" Text="-" DataIndex="h_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="ncsnext2" />
<ext:DisplayField ID="DisplayField13" runat="server" Cls="total-field" Text="-" DataIndex="h_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="ncsnext3" />
<ext:DisplayField ID="DisplayField17" runat="server" Cls="total-field" Text="-" DataIndex="h_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="ncsCertificated" />
<ext:DisplayField ID="DisplayField21" runat="server" Cls="total-field" Text="-" DataIndex="h_bCertificated" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
该说的都说了，注释也懒得写了。现在想说的是下面几点：
-
-
- 首先来看记录集（RecdField）。注意字段的类型（Type="Int"）。比如你的数据中有DateTime类型、Int类型的数据，最好设置下类型，这样的话，就可以避免出现undefined。而且也方便格式转换。
-
-
-
- Ste。这个Ste为什么没有设置URL呢？在《EXT.NET高效开发（一）——概述》我说过，“7）数据交换更简单”。应该是“数据交互”，本人比较懒，只在这里更正申明下好了，我也是刚看到。这里的Ste，是在后台赋值的。如下面代码：
-
var qList = _db.SelectReptMonthDataFUnderDeco（）.ToList（）;
Ste1.DataSource = qList;
Ste1.DataBind（）;-
-
- 统计怎么算的？注意Total函数。“总计”两个字是怎么加上去的，答曰：“敲上去的”。再注意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.Fmat（"<font class=""headRows1"">{0}</font>"，
"Under Deco."），
Align = Alignment.Center，
ColSpan = 4，
}）;
var _currentMonth = Convert.ToInt32（qList.First（）.monthnum.Trim（））;
f （int i = 0; i < 3; i++）
{
_headGroupRow.Columns.Add（new HeaderGroupColumn（）
{
Header =
string.Fmat（"<font class=""headRows1"">{0}</font>"，
GetEnglishMonth（（_currentMonth + i）.ToString（））），
Align = Alignment.Center，
ColSpan = 4，
}）;
}
_headGroupRow.Columns.Add（new HeaderGroupColumn（）
{
Header =
string.Fmat（"<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
{
col: Green;
font-weight: bolder;
}
.headRows2
{
col: Purple;
font-weight: bolder;
}
</style>
<script type="text/javascript">
var template = ""<b style="col:blue;">{0}</b>"";
var fifterZero = function（value） {
if （value > 0）
return String.fmat（template， value）;
else
return """";
};
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" Bder="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 Hler="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">
<Ste>
<ext:Ste ID="Ste1" ShowWarningOnFailure="false" AutoLoad="true" runat="server" />
</Ste>
<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">
<Ste>
<ext:Ste ID="steItems" ShowWarningOnFailure="false" AutoLoad="true" runat="server" />
</Ste>
<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.BuildAllPrivilegesFExtNET（）;
//注册JQuery脚本
this.Page.ClientScript.RegisterClientScriptInclude（"JQuery4.4"， "/js/jquery-1.4.4.min.js"）;
＃region 绑定年月
f （int i = 0; i < 20; i++）
{
ddlYear.Items.Add（new ListItem（DateTime.Now.AddYears（-i）.Year.ToString（）））;
}
f （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（）;
feach （var areaResult in _lstArea）
{
ddlArea.Items.Add（new ListItem（areaResult.AreaName））;
}
ddlArea.Items.Add（new ListItem（"全国"））;
}
＃endregion
var _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.SelectReptByStedName（"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， Ste1）;
BingData（_dt.AsEnumerable（）.Where（p => p[0].ToString（）.Contains（"-"） || p[0].ToString（） == "MTD" || p[0].ToString（） == "Drop Out" || p[0].ToString（） == "Net"）.AsDataView（）， gpItems， steItems）;
＃endregion
GridPanel1.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.Fmat（"<font class=""headRows1"">{0}</font>"，
"In operation"），
Align = Alignment.Center，
ColSpan = 4，
}）;
_headGroupRow.Columns.Add（new HeaderGroupColumn（）
{
Header =
string.Fmat（"<font class=""headRows2"">{0}</font>"，
"New NCS"），
Align = Alignment.Center，
ColSpan = 3，
}）;
_headGroupRow.Columns.Add（new HeaderGroupColumn（）
{
Header =
string.Fmat（"<font class=""headRows2"">{0}</font>"，
Server.HtmlEncode（"New H&B"）），
Align = Alignment.Center，
ColSpan = 3，
}）;
_headGroupRow.Columns.Add（new HeaderGroupColumn（）
{
Header =
string.Fmat（"<font class=""headRows2"">{0}</font>"，
"Upgrades--NCS"），
Align = Alignment.Center，
ColSpan = 3，
}）;
_headGroupRow.Columns.Add（new HeaderGroupColumn（）
{
Header =
string.Fmat（"<font class=""headRows2"">{0}</font>"，
Server.HtmlEncode（"Upgrades--H&B"）），
Align = Alignment.Center，
ColSpan = 3，
}）;
_headGroupRow.Columns.Add（new HeaderGroupColumn（）
{
Header =
string.Fmat（"<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="_ste"></param>
private void BingData（System.Data.DataView _rptData， GridPanel _gp， Ste _ste）
{
var _jsonReader = new JsonReader（）;
feach （DataColumn _dataColumn in _rptData.Table.Columns）
{
//创建字段
if （_dataColumn.ColumnName == "timecol"）
{
_jsonReader.Fields.Add（new RecdField（_dataColumn.ColumnName））;
}
else
{
_jsonReader.Fields.Add（new RecdField（_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）;
}
_ste.Reader.Add（_jsonReader）;
_ste.DataSource = _rptData;
_ste.DataBind（）;
}
代码贴上去了，发现木有，也不是很多，这里我顺便解释解释：-
点击【查询】按钮后，刷新页面获取数据。当然您也可以改成不刷新的，也很简单的，这里我是为了更简单。不过在这方面，我要说一下：你可以使用X.IsAjaxRequest来判断是否是EXT的Ajax请求，别重新执行了Page_load事件。
-
数据源是直接绑的，使用的是DataTable。然后在绑定的时候，使用LINQ to DataTable进行了过滤。这个报表不会有多少数据。当然如果你喜欢2.0的话，也可以用那个Select啊，DataView的RowFilter等来过滤。
-
数据集、字段、列是动态加的，列头是手动写的。因为列头不一样，而且有特殊字符。也就是说，如果可以，你完全可以动态生成整个GridPanel。
-
最后说点。Extjs与JQuery框架是不冲突的，井水不犯河水。
封装点函数，整个动态生成，也是一种高效的开发，这也是我EXT.NET高效开发系列所推崇的（EXT.NET高效开发（二）——封装函数）。
扫一扫
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
