Ext文件系统
- Haides - 博客园-首页原创精华区 虽然从Ext2到Ext4，找数据的方式发生了变化，但是，磁盘的布局还是非常相似的. 其实这个东西也不需要变化，因为现在也没什么特别巧妙的方式，而且磁盘的吞吐量、效率的瓶颈也不在这里. 当然，这里排除那些根据自身文件特点设计的数据库，毕竟还是为了支持通用文件. Boot在第一个块，放的应该是引导程序，超级块就放在了第二个块上，如果不是可以在mount的时候通过参数sb来设置.
EXT.NET复杂布局（二）——报表
标签：
ext
net
复杂
| 发表时间：2011-07-27 15:52 | 作者：雪雁 華
出处：http://www.cnblogs.com/
前面提到过工作台（《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);
else
return '';
};
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] = "总计：";
else
data[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&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&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&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&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&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&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&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&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&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&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);
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" 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("全国"));
}
#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.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);
#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.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小而不为。
总算写完了。有时间的话，我会继续…
作者: 雪雁 发表于 2011-07-27 15:52 原文链接
最新新闻：
· Android侵犯甲骨文专利案：Sun前CEO曾默许(2011-07-28 08:49)
· 今年手机四分之一都是智能的(2011-07-28 08:47)
· 邹涛：金山CEO人选最好从外面找 最好别折腾(2011-07-28 08:46)
· 电子书行业迎来大洗牌：传方正爱国者将陆续退出(2011-07-28 08:41)
· 人人网发力移动电子商务：试水SNS+LBS新模式(2011-07-28 08:40)
编辑推荐：.NET程序员，我们应该更专业点
相关 [ext net 复杂] 推荐：
[Ext JS 4] MVC 应用程序框架
- - CSDN博客Web前端推荐文章大型客户端应用程序总是很难编写，很难组织和很难维护. 随着功能的增加和更多的开发人员加入项目，对项目的控制也越来越困难了. Ext JS 4 提供了一个新的应用程序框架帮助组织代码. 模型 - 一组栏位和数据的集合. Model （在Ext JS 3中使用Record class）. 视图 - 组件类型, grids,trees 和 panels 都是属于试图.
(转）使用mysqladmin ext了解MySQL运行状态
- - jackyrongmysqladmin是MySQL一个重要的客户端，最常见的是使用它来关闭数据库，除此，该命令还可以了解MySQL运行状态、进程信息、进程杀死等. 本文介绍一下如何使用mysqladmin extended-status(因为没有"歧义"，所以可以使用ext代替)了解MySQL的运行状态. 使用mysqladmin extended-status命令可以获得所有MySQL性能指标，即show global status的输出，不过，因为多数这些指标都是累计值，如果想了解当前的状态，则需要进行一次差值计算，这就是mysqladmin extended-status的一个额外功能，非常实用.
Debugging .NET Core on Linux with LLDB | RayDBG
- -The LLDB debugger is conceptually similar to the native Windows debugging tools in that it is a low level and command live driven debugger. Part of the reason the .NET Core team chose the LLDB debugger was for its extensibility points that allowed them to create the SOS plugin which can be used to debug .NET core applications.
Microsoft .NET Gadgeteer 简介及其它
- 王雪松 - 博客园-首页原创精华区 Microsoft .NET Gadgeteer 为开发小型电子模块或嵌入式设备的用户，提供一个快速构建原型机的平台. 它结合了面向对象编程的优点，提供一系列电子模块，可以快速地用这些模块进行计算机辅助设计. 通过.NET Gadgeteer模块可以很容易的构建简单或复杂的设备.
Windows 8将Silverlight和.Net打入冷宫？
- Will - ITeye资讯频道微软近期在D9和Computex 2011大会上演示了Windows 8，普通用户对于Windows 8的全新界面和触摸功能相比是欣喜不已，但是有那么一群人，却倍感沮丧和担忧. 他们就是Silverlight和.Net开发人员，Windows 8会采用什么样的开发平台呢. 是不是会将Silverlight和.Net打入冷宫.
微软推出开源平台.NET Gadgeteer
- dydso - Solidot微软推出了一个开源软件和开源硬件平台.NET Gadgeteer，但兼容.NET Gadgeteer的硬件价格不菲. .NET Gadgeteer是一套用于创造不同用途的小型电子设备的开源工具集，使用.NET Micro Framework和Visual Studio/Visual C# Express，结合硬件模块和.NET软件，让用户能在不十分了解硬件知识的情况下，在数小时内创造出智能电子设备，制造出快速原型设备，帮助教师设计新颖的交互教育仪器，帮助业余爱好者创造出想象中的事物.
Visual Studio 2012和.NET Framework 4.5发布
- - 博客 - 伯乐在线摘要：好消息，微软负责Visual Studio部门的公司副总裁Jason Zander发表博客，宣布Visual Studio 2012和.NET Framework 4.5现在已经可以下载，同时提供MSDN订户、付费版本、试用版和免费Express版. 此外，他还列举了升级到Visual Studio 2012的十二大理由.
微软宣布将开源.NET
- - Solidot微软宣布它计划在MIT许可证下开源.NET软件架构，源代码（项目页面目前只有文档）将托管在GitHub上. .NET架构目前只支持在Windows上运行，微软表示它计划让.NET跨平台支持OS X和Linux. 微软计划在下一个版本中开源整个.NET服务器堆栈，从 ASP.NET 5到通用语言运行库到基础类库.
说说.NET反编译工具
- - 标点符自己都不会.NET，但是目前团队里都是使用的.NET开发，整理一些.NET相关的知识，以便和团队一起成长. .NET和先前我接触的PHP、Python不一样的是代码需要经过编译，很多提供到网站的组件都是编译过的，很难看到源代码. 所以造成了一部分反编译工具的流行. Reflector应该是最为熟知的.NET反编译工具，最早由微软员工Lutz Roeder编写并免费提供，它除了能将IL转换为C#或Visual Basic以外，Reflector还能够提供程序集中类及其成员的概要信息、提供查看程序集中IL的能力以及提供对第三方插件的支持.