EXT.NET复杂布局（一）——工作台-CSDN博客

本文详细介绍了如何使用EXT.NET组件与ExtJS库结合，创建复杂且动态的Web界面。通过具体案例，展示了如何利用EXT.NET简化AJAX请求，以及如何在布局设计中运用ExtJS，特别关注了资源管理器的使用、自定义JavaScript函数和页面代码的编写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面已经提到过EXT.NET了。EXT.NET是一组基于ExtJS库开发的开源的ASP.NET组件。

使用Ext.NET开发，比直接写JS更利于维护，也更方便开发。由于官方没有文档（只有DEMO），很多情况下只能看看DEMO并且结合Extjs的 API来摸索了。因此，在开发一些相对复杂的布局的界面时，还是有一定难度的。接下来，笔者将一一讲述自己在开发过程中设计的一些相对复制的布局的界面，权且作为自我总结，也给新人接手时留点文档。如有不足之处，请回复。由于一直都很忙，不一定会回复。编写此文，也是断断续续的。

下面就从工作台开始吧，如以下界面：

当点击其他折叠面板时，如【可撤销事务】，该面板就会展开，并刷新数据:

那么具体是怎么实现的呢，下面来分析代码吧。

(一)首先，将EXT.NET控件添加到网页，并指定前缀。并添加ResourceManager控件。

具体代码如下：

view sourceprint?1 <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

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

至于将EXT.NET控件添加到项目等等步骤，笔者就不介绍了。

ResourceManager控件是Extjs整个AJAX请求的核心。在添加任何Ext.NET控件前，都需要先添加ResourceManager控件。

（二）接下来，就需要编写一些JS了。

使用EXT.NET就不代表不需要写EXTJS,更不代表不需要了解Extjs。你会发现，在使用EXT.NET的过程中，也会对Extjs有一定的了解。下面先将JS贴上来：

view sourceprint?001 <script type="text/javascript">

002 function ShowWin(title, url, width, height, isModal, id, scrolling) {

003 if (url.indexOf('?') == -1) {

004 url += "?rand=" + Math.round(Math.random() * 10000);

005 }

006 else {

007 url += "&rand=" + Math.round(Math.random() * 10000);

008 }

009 var win = new top.Ext.Window({

010 id: id,

011 title: title,

012 width: width,

013 height: height,

014 iconCls: "addicon",

015 resizable: false,

016 draggable: true,

017 defaultType: "textfield",

018 labelWidth: 100,

019 collapsible: false,

020 closeAction: 'close',

021 closable: true,

022 maximizable: true,

023 modal: isModal,

024 buttonAlign: "center",

025 bodyStyle: "padding:0 0 0 0",

026 listeners: {

027 "beforedestroy": function(obj) {

028 <%=Store1.ClientID %>.reload();

029 }

030 },

031 html: '<iframe scrolling="' + scrolling + '" style="margin-left:0px;margin-top:0px;border:0;' +

032 'border-style:solid;border-color:red;" width="100%" height="100%" ' +

033 ' id="frmWin' + id + '" src="' + url + '" name="' + id + '" />'

034 });

035 win.show();

036 return win;

037 }

038

039 function toExcuteOperations(recodes,common)

040 {

041 ExcuteOperations(null,recodes,common);

042 }

043 function updateStore() {

044 <%=PagingToolbar1.ClientID %>.doLoad(0);//0表示第一页

045 Store2.reload();

046 Store6.reload();

047 }

048 function ExcuteCommand(c,r) {

049 if (c == 'View') {

050 var pageUrl = "/FormServerTemplates/TransferPage.aspx?PEId=" + r.data.DriverId

051 + "&PEName=" + escape(r.data.TaskTitel)

052 + "&ActionName=" + escape(r.data.ActionName)

053 + "&EventAttributeName=" + escape(r.data.FileTypeName)

054 + "&PhasesId=" + r.data.PhasesId

055 + '&PTCode='+r.data.PTCode

056 + '&ObjectID='+r.data.ObjectId

057 + '&taskId='+r.data.TaskId

058 + '&action=' + escape(r.data.FileTypeName)

059 + '&ShopId='+r.data.ObjectId

060 + '&PTID='+r.data.PTID

061 + '&viewtype='+(r.data.TaskBeginDate==0?"add":"view")

062 + '&source=workbench'

063 + '&DriverPhasesid='+r.data.DriverPhasesid

064 + '&ids='+escape(r.data.ObjectId+','+r.data.PNID+','+r.data.PhasesId);

065 ShowWin(r.data.TaskTitel, pageUrl, 850, 420, true, "frmStatesRequestList");

066 }else if(c=='Remark')

067 {

068 Ext.MessageBox.alert('批注', r.data.Remark);

069 }else if(c=='ExamineList')

070 {

071 var pageUrl='/FormServerTemplates/ExamineList.aspx?TaskId='+r.data.TaskId+'&PEName='+r.data.TaskTitel+'&EventAttributeName='+r.data.FileTypeName+'&PhasesId='+r.data.PhasesId+'&PTCode='+r.data.PTCode+'&ObjectID='+r.data.ObjectId+'&TypeId=1';

072 ShowWin(r.data.TaskTitel+"——审批历史", pageUrl, 850, 420, true, "frmStatesRequestList");

073 }

074 }

075 function getPageSize1()

076 {

077 try

078 {

079 var pageSize=<%=PagingToolbar1.ClientID %>.pageSize;

080 if(pageSize==null || pageSize=='undefined')

081 pageSize=50;

082 }

083 catch(e)

084 {

085 pageSize=50;

086 }

087 return pageSize;

088 }

089 function getPageSize3()

090 {

091 try

092 {

093 var pageSize=<%=PagingToolbar3.ClientID %>.pageSize;

094 if(pageSize==null || pageSize=='undefined')

095 pageSize=50;

096 }

097 catch(e)

098 {

099 pageSize=50;

100 }

101 return pageSize;

102 }

103 function getPageSize4()

104 {

105 try

106 {

107 var pageSize=<%=PagingToolbar4.ClientID %>.pageSize;

108 if(pageSize==null || pageSize=='undefined')

109 pageSize=50;

110 }

111 catch(e)

112 {

113 pageSize=50;

114 }

115 return pageSize;

116 }

117 function getPageSize5()

118 {

119 try

120 {

121 var pageSize=<%=PagingToolbar5.ClientID %>.pageSize;

122 if(pageSize==null || pageSize=='undefined')

123 pageSize=50;

124 }

125 catch(e)

126 {

127 pageSize=50;

128 }

129 return pageSize;

130 }

131 var prepareCommand = function (grid, command, record, row) {

132 if(command.command=='View')

133 {

134 if(record.data.TaskBeginDate!=0)

135 {

136 command.text="查看";

137 }

138 else if(record.data.FileTypeName=="附件")

139 {

140 command.text="上传";

141 }

142 else

143 {

144 command.text="填写";

145 }

146 }

147 };

148 // var checkboxSelectionRenderer=function(value,metaData,record){

149 // if(record.data.TaskBeginDate==0){

150 // return;

151 // }else{

152 // return Ext.grid.CheckboxSelectionModel.prototype.renderer.apply(this,arguments);

153 // }

154 // }

155 var checkboxBeforerowselect=function(SelectionModel,rowIndex,keepExisting,record){

156 if(record.data.TaskBeginDate==null || record.data.TaskBeginDate==''){

157 Ext.MessageBox.alert('警告','不能选择该任务（此任务不能审核）。');

158 return false;//不能进行选择

159 }else{

160 return true;

161 }

162 }

163 var template = '{0}';

164 var setTitle = function(value, metadata, record, rowIndex, colIndex, store) {

165 if (record.data.overtimeflag == "1")

166 return String.format(template, value, 'red');

167 else

168 return value;

169 };

170 </script>
view sourceprint?1 下面就一一说明这些JS函数：
view sourceprint?1 ShowWin：打开一个新的带关闭按钮、最大化、最小化的模式窗口。listeners里面添加了beforedestroy事件，该事件在窗口关闭时触发。
view sourceprint?1 “<%=Store1.ClientID %>.reload();”用于刷新“待处理事务”的数据。当服务器控件放在用户控件或者母版页里面时，注意使用服务器标记来获取客户端 ID。
view sourceprint?1 toExcuteOperations：封装在另外的JS文件里，用于处理每项事务，由于代码量多，就不贴出来了。
view sourceprint?1 updateStore：更新数据。有的控件设置了IDMode="Static"，</EM& gt;故可以直接使用控件的服务器ID来获取对象。
view sourceprint?1 ExcuteCommand：执行命令。当为View时，打开相应的窗口。
view sourceprint?1 getPageSize1：获取分页数。
view sourceprint?1 checkboxBeforerowselect：在选择行首的复选框时的判断。即在某种情况下不可选。
view sourceprint?1 setTitle：设置列显示的html。这里是当overtimeflag为1时，该行该列的数据加粗变红。引用地方如下：
view sourceprint?1 <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">

2 <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />
view sourceprint?1 （三）然后，就需要编写页面代码了。先贴出代码：
view sourceprint?001 <ext:Viewport runat="server" ID="Viewport1">

002 <Items>

003 <ext:Panel runat="server" Layout="Accordion" ID="pnlView">

004 <LayoutConfig>

005 <ext:AccordionLayoutConfig Animate="true" AutoWidth="true" Fill="true" />

006 </LayoutConfig>

007 <Items>

008 <ext:GridPanel ID="GridPanel1" IDMode="Static" runat="server" Collapsible="true" StripeRows="true"

009 Title="待处理事务" AutoWidth="true" Icon="ClockRed" AutoExpandColumn="TaskTitel">

010 <Store>

011 <%--GroupField：分组的字段--%>

012 <ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="true" runat="server"

013 GroupField="ShopName">

014 <Proxy>

015 <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />

016 </Proxy>

017 <Reader>

018 <ext:JsonReader TotalProperty="total" Root="data">

019 <Fields>

020 <%--任务ID--%>

021 <ext:RecordField Name="TaskId" />

022 <%--流程阶段--%>

023 <ext:RecordField Name="FSname" />

024 <%--门店名称--%>

025 <ext:RecordField Name="ShopName" />

026 <%--提交日期--%>

027 <ext:RecordField Name="TaskBeginDate" />

028 <%--任务名称--%>

029 <ext:RecordField Name="TaskTitel" />

030 <%--提交人--%>

031 <ext:RecordField Name="UserName" />

032 <%--审核人--%>

033 <ext:RecordField Name="DealUserid" />

034 <%--门店ID--%>

035 <ext:RecordField Name="ObjectId" />

036 <%--事件ID--%>

037 <ext:RecordField Name="DriverId" />

038 <%--阶段ID--%>

039 <ext:RecordField Name="PhasesId" />

040 <%--业务模板ID--%>

041 <ext:RecordField Name="PTCode">

042 </ext:RecordField>

043 <%--文件类型ID--%>

044 <ext:RecordField Name="FileTypeId" />

045 <%--文件类型名称--%>

046 <ext:RecordField Name="FileTypeName" />

047 <%--<ext:RecordField Name="Remark" />--%>

048 <ext:RecordField Name="ShopType" />

049 <ext:RecordField Name="PNID" />

050 <ext:RecordField Name="PTID" />

051 <ext:RecordField Name="DriverPhasesid" />

052 <ext:RecordField Name="overtimeflag" />

053 </Fields>

054 </ext:JsonReader>

055 </Reader>

056 <SortInfo Field="ShopName" Direction="ASC" />

057 <BaseParams>

058 <ext:Parameter Name="start" Value="0" Mode="Raw" />

059 <ext:Parameter Name="limit" Value="getPageSize1()" Mode="Raw" />

060 <ext:Parameter Name="type" Value="GetTaskList" Mode="Value" />

061 </BaseParams>

062 <Listeners>

063 <Load Handler="#{GridPanel1}.setTitle('待处理事务（'+# {Store1}.getTotalCount()+'）'); " />

064 </Listeners>

065 </ext:Store>

066 </Store>

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

068 <Columns>

069 <ext:RowNumbererColumn />

070 <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">

071 </ext:Column>

072 <ext:Column ColumnID="ShopName" Header="门店名称"

073 DataIndex="ShopName" />

074 <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">

075 <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />

076 </ext:Column>

077 <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />

078 <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />

079 <ext:Column Header="提交人" DataIndex="UserName" />

080 <ext:Column Header="店铺类型" DataIndex="ShopType" />

081 <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false" />

082 <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false" />

083 <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false" />

084 <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false">

085 </ext:Column>

086 <ext:ImageCommandColumn Header="操作" DataIndex="FileTypeName">

087 <Commands>

088 <ext:ImageCommand CommandName="View" Icon="TableEdit" />

089 </Commands>

090 <PrepareCommand Fn="prepareCommand" />

091 </ext:ImageCommandColumn>

092 <ext:ImageCommandColumn Header="审批历史">

093 <Commands>

094 <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">

095 <ToolTip Text="审批历史" />

096 </ext:ImageCommand>

097 </Commands>

098 </ext:ImageCommandColumn>

099 </Columns>

100 </ColumnModel>

101 <SelectionModel>

102 <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">

103 <Listeners>

104 <%--<Render Fn="checkboxSelectionRenderer" />--%>

105 <BeforeRowSelect Fn="checkboxBeforerowselect" />

106 </Listeners>

107 </ext:CheckboxSelectionModel>

108 </SelectionModel>

109 <Listeners>

110 <Command Handler="ExcuteCommand(command,record);" />

111 <GroupCommand Handler="if(command === 'SelectGroup'){ this.getSelectionModel().selectRecords(records, true); return;}else if(command=='UnSelectGroup'){this.getSelectionModel().clearSelections(); return;} else{toExcuteOperations(this.getSelectionModel().getSelections(),command);}" />

112 <Expand Handler="#{Store1}.reload();" />

113 </Listeners>

114 <LoadMask ShowMask="true" />

115 <TopBar>

116 <ext:Toolbar ID="Toolbar1" runat="server" />

117 </TopBar>

118 <BottomBar>

119 <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="50">

120 <Items>

121 <ext:Label ID="Label1" runat="server" Text="分页数:" />

122 <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />

123 <ext:ComboBox ID="ComboBox1" runat="server" Width="80">

124 <Items>

125 <ext:ListItem Text="10" />

126 <ext:ListItem Text="20" />

127 <ext:ListItem Text="30" />

128 <ext:ListItem Text="50" />

129 </Items>

130 <SelectedItem Value="50" />

131 <Listeners>

132 <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />

133 </Listeners>

134 </ext:ComboBox>

135 </Items>

136 </ext:PagingToolbar>

137 </BottomBar>

138 <View>

139 <ext:GroupingView ID="GroupingView1" HideGroupedColumn="true" StartCollapsed="true"

140 runat="server" ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'

141 GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true" EnableGrouping="true">

142 </ext:GroupingView>

143 </View>

144 </ext:GridPanel>

145 <ext:GridPanel ID="GridPanel2" IDMode="Static" runat="server" Collapsible="true"

146 StripeRows="true" Title="可撤销事务" Icon="ClockError" AutoWidth="true" AutoExpandColumn="TaskTitel">

147 <Store>

148 <%--GroupField：分组的字段--%>

149 <ext:Store ID="Store2" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="true"

150 runat="server" GroupField="ShopName">

151 <Proxy>

152 <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />

153 </Proxy>

154 <Reader>

155 <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">

156 <Fields>

157 <%--任务ID--%>

158 <ext:RecordField Name="TaskId" />

159 <%--流程阶段--%>

160 <ext:RecordField Name="FSname" />

161 <%--门店名称--%>

162 <ext:RecordField Name="ShopName" />

163 <%--提交日期--%>

164 <ext:RecordField Name="TaskBeginDate" />

165 <%--任务名称--%>

166 <ext:RecordField Name="TaskTitel" />

167 <%--提交人--%>

168 <ext:RecordField Name="UserName" />

169 <%--审核人--%>

170 <ext:RecordField Name="DealUserid" />

171 <%--门店ID--%>

172 <ext:RecordField Name="ObjectId" />

173 <%--事件ID--%>

174 <ext:RecordField Name="DriverId" />

175 <%--阶段ID--%>

176 <ext:RecordField Name="PhasesId">

177 </ext:RecordField>

178 <%--业务模板ID--%>

179 <ext:RecordField Name="PTCode">

180 </ext:RecordField>

181 <%--文件类型ID--%>

182 <ext:RecordField Name="FileTypeId" />

183 <%--文件类型名称--%>

184 <ext:RecordField Name="FileTypeName" />

185 <%--<ext:RecordField Name="Remark" />--%>

186 <ext:RecordField Name="ShopType" />

187 <ext:RecordField Name="PNID" />

188 <ext:RecordField Name="PTID" />

189 <ext:RecordField Name="DriverPhasesid" />

190 <ext:RecordField Name="overtimeflag" />

191 </Fields>

192 </ext:JsonReader>

193 </Reader>

194 <BaseParams>

195 <ext:Parameter Name="start" Value="0" Mode="Raw" />

196 <ext:Parameter Name="limit" Value="50" Mode="Raw" />

197 <ext:Parameter Name="type" Value="ReRepeal" Mode="Value" />

198 </BaseParams>

199 <Listeners>

200 <Load Handler="GridPanel2.setTitle('可撤销事务（'+Store2.getTotalCount()+'）& lt;/font>'); " />

201 </Listeners>

202 </ext:Store>

203 </Store>

204 <ColumnModel IDMode="Static" ID="ColumnModel2" runat="server">

205 <Columns>

206 <ext:RowNumbererColumn />

207 <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">

208 </ext:Column>

209 <ext:Column ColumnID="ShopName" Header="门店名称"

210 DataIndex="ShopName" />

211 <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel" />

212 <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />

213 <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />

214 <ext:Column Header="提交人" DataIndex="UserName" />

215 <ext:Column Header="店铺类型" DataIndex="ShopType" />

216 <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">

217 </ext:Column>

218 <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">

219 </ext:Column>

220 <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">

221 </ext:Column>

222 <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false" />

223 </Columns>

224 </ColumnModel>

225 <SelectionModel>

226 <ext:CheckboxSelectionModel runat="server" />

227 </SelectionModel>

228 <Listeners>

229 <Command Handler="ExcuteCommand(command,record);" />

230 <Expand Handler="Store2.reload();" />

231 </Listeners>

232 <LoadMask ShowMask="true" />

233 <BottomBar>

234 <ext:PagingToolbar IDMode="Static" ID="PagingToolbar2" runat="server" PageSize="50" />

235 </BottomBar>

236 <TopBar>

237 <ext:Toolbar runat="server">

238 <Items>

239 <ext:Button runat="server" Icon="PageBack" Text="撤销">

240 <Listeners>

241 <Click Handler="toExcuteOperations(GridPanel2.getSelectionModel().getSelections(),'Repeal');" />

242 </Listeners>

243 </ext:Button>

244 </Items>

245 </ext:Toolbar>

246 </TopBar>

247 <View>

248 <ext:GroupingView ID="GroupingView2" IDMode="Static" HideGroupedColumn="true" runat="server"

249 ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'

250 GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">

251 </ext:GroupingView>

252 </View>

253 </ext:GridPanel>

254 <ext:GridPanel ID="GridPanel6" IDMode="Static" runat="server" Collapsible="true"

255 StripeRows="true" Title="已撤销事务" Icon="ClockStop2" AutoWidth="true" AutoExpandColumn="TaskTitel">

256 <Store>

257 <%--GroupField：分组的字段--%>

258 <ext:Store ID="Store6" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="true"

259 runat="server" GroupField="ShopName">

260 <Proxy>

261 <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />

262 </Proxy>

263 <Reader>

264 <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">

265 <Fields>

266 <%--任务ID--%>

267 <ext:RecordField Name="TaskId" />

268 <%--流程阶段--%>

269 <ext:RecordField Name="FSname" />

270 <%--门店名称--%>

271 <ext:RecordField Name="ShopName" />

272 <%--提交日期--%>

273 <ext:RecordField Name="TaskBeginDate" />

274 <%--任务名称--%>

275 <ext:RecordField Name="TaskTitel" />

276 <%--提交人--%>

277 <ext:RecordField Name="UserName" />

278 <%--审核人--%>

279 <ext:RecordField Name="DealUserid" />

280 <%--门店ID--%>

281 <ext:RecordField Name="ObjectId" />

282 <%--事件ID--%>

283 <ext:RecordField Name="DriverId" />

284 <%--阶段ID--%>

285 <ext:RecordField Name="PhasesId">

286 </ext:RecordField>

287 <%--业务模板ID--%>

288 <ext:RecordField Name="PTCode">

289 </ext:RecordField>

290 <%--文件类型ID--%>

291 <ext:RecordField Name="FileTypeId" />

292 <%--文件类型名称--%>

293 <ext:RecordField Name="FileTypeName" />

294 <%--<ext:RecordField Name="Remark" />--%>

295 <ext:RecordField Name="ShopType" />

296 <ext:RecordField Name="PNID" />

297 <ext:RecordField Name="PTID" />

298 <ext:RecordField Name="DriverPhasesid" />

299 <ext:RecordField Name="overtimeflag" />

300 </Fields>

301 </ext:JsonReader>

302 </Reader>

303 <BaseParams>

304 <ext:Parameter Name="start" Value="0" Mode="Raw" />

305 <ext:Parameter Name="limit" Value="50" Mode="Raw" />

306 <ext:Parameter Name="type" Value="Repeal" Mode="Value" />

307 </BaseParams>

308 <Listeners>

309 <Load Handler="GridPanel6.setTitle('已撤销事务（'+Store6.getTotalCount()+'）& lt;/font>'); " />

310 </Listeners>

311 </ext:Store>

312 </Store>

313 <ColumnModel IDMode="Static" ID="ColumnModel6" runat="server">

314 <Columns>

315 <ext:RowNumbererColumn />

316 <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">

317 </ext:Column>

318 <ext:Column ColumnID="ShopName" Header="门店名称"

319 DataIndex="ShopName" />

320 <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel" />

321 <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />

322 <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />

323 <ext:Column Header="提交人" DataIndex="UserName" />

324 <ext:Column Header="店铺类型" DataIndex="ShopType" />

325 <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">

326 </ext:Column>

327 <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">

328 </ext:Column>

329 <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">

330 </ext:Column>

331 <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false" />

332 <ext:ImageCommandColumn Header="操作" DataIndex="FileTypeName">

333 <Commands>

334 <ext:ImageCommand CommandName="View" Icon="TableEdit" />

335 </Commands>

336 <PrepareCommand Fn="prepareCommand" />

337 </ext:ImageCommandColumn>

338 <ext:ImageCommandColumn Header="审批历史">

339 <Commands>

340 <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">

341 <ToolTip Text="审批历史" />

342 </ext:ImageCommand>

343 </Commands>

344 </ext:ImageCommandColumn>

345 </Columns>

346 </ColumnModel>

347 <SelectionModel>

348 <ext:CheckboxSelectionModel ID="CheckboxSelectionModel6" runat="server" />

349 </SelectionModel>

350 <Listeners>

351 <Command Handler="ExcuteCommand(command,record);" />

352 <Expand Handler="Store6.reload();" />

353 </Listeners>

354 <LoadMask ShowMask="true" />

355 <BottomBar>

356 <ext:PagingToolbar IDMode="Static" ID="PagingToolbar6" runat="server" PageSize="50" />

357 </BottomBar>

358 <TopBar>

359 <ext:Toolbar ID="tbButtons" runat="server" />

360 </TopBar>

361 <View>

362 <ext:GroupingView ID="GroupingView6" IDMode="Static" HideGroupedColumn="true" runat="server"

363 ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'

364 GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">

365 </ext:GroupingView>

366 </View>

367 </ext:GridPanel>

368 <ext:GridPanel ID="GridPanel3" IDMode="Static" runat="server" Collapsible="true" StripeRows="true"

369 Title="待补齐资料事宜" AutoWidth="true" Icon="ClockEdit" AutoExpandColumn="TaskTitel">

370 <Store>

371 <%--GroupField：分组的字段--%>

372 <ext:Store ID="Store3" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="true" runat="server"

373 GroupField="ShopName">

374 <Proxy>

375 <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />

376 </Proxy>

377 <Reader>

378 <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">

379 <Fields>

380 <%--任务ID--%>

381 <ext:RecordField Name="TaskId" />

382 <%--流程阶段--%>

383 <ext:RecordField Name="FSname" />

384 <%--门店名称--%>

385 <ext:RecordField Name="ShopName" />

386 <%--提交日期--%>

387 <ext:RecordField Name="TaskBeginDate" />

388 <%--任务名称--%>

389 <ext:RecordField Name="TaskTitel" />

390 <%--提交人--%>

391 <ext:RecordField Name="UserName" />

392 <%--审核人--%>

393 <ext:RecordField Name="DealUserid" />

394 <%--门店ID--%>

395 <ext:RecordField Name="ObjectId" />

396 <%--事件ID--%>

397 <ext:RecordField Name="DriverId" />

398 <%--阶段ID--%>

399 <ext:RecordField Name="PhasesId">

400 </ext:RecordField>

401 <%--业务模板ID--%>

402 <ext:RecordField Name="PTCode">

403 </ext:RecordField>

404 <%--文件类型ID--%>

405 <ext:RecordField Name="FileTypeId" />

406 <%--文件类型名称--%>

407 <ext:RecordField Name="FileTypeName" />

408 <%--<ext:RecordField Name="Remark" />--%>

409 <ext:RecordField Name="ShopType" />

410 <ext:RecordField Name="PNID" />

411 <ext:RecordField Name="PTID" />

412 <ext:RecordField Name="DriverPhasesid" />

413 <ext:RecordField Name="overtimeflag" />

414 </Fields>

415 </ext:JsonReader>

416 </Reader>

417 <BaseParams>

418 <ext:Parameter Name="start" Value="0" Mode="Raw" />

419 <ext:Parameter Name="limit" Value="getPageSize3()" Mode="Raw" />

420 <ext:Parameter Name="type" Value="ToFillNeatMaterialMatters" Mode="Value" />

421 </BaseParams>

422 <Listeners>

423 <Load Handler="GridPanel3.setTitle('待补齐资料事宜（'+Store3.getTotalCount()+'）& lt;/font>'); " />

424 </Listeners>

425 </ext:Store>

426 </Store>

427 <ColumnModel ID="ColumnModel3" runat="server">

428 <Columns>

429 <ext:RowNumbererColumn />

430 <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">

431 </ext:Column>

432 <ext:Column ColumnID="ShopName" Header="门店名称"

433 DataIndex="ShopName" />

434 <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">

435 <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />

436 </ext:Column>

437 <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />

438 <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />

439 <ext:Column Header="提交人" DataIndex="UserName" />

440 <ext:Column Header="店铺类型" DataIndex="ShopType" />

441 <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">

442 </ext:Column>

443 <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">

444 </ext:Column>

445 <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">

446 </ext:Column>

447 <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false">

448 </ext:Column>

449 <ext:ImageCommandColumn Header="操作">

450 <Commands>

451 <ext:ImageCommand CommandName="View" Icon="TableEdit" Text="查看">

452 <ToolTip Text="查看" />

453 </ext:ImageCommand>

454 <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">

455 <ToolTip Text="审批历史" />

456 </ext:ImageCommand>

457 </Commands>

458 </ext:ImageCommandColumn>

459 <%-- <ext:Column Header="状态" DataIndex="ActionName">

460 <Renderer Fn="CaoZuo" Args="value, metadata, record, rowIndex, colIndex, store" />

461 </ext:Column>--%>

462 <%-- <ext:CommandColumn Hidden="true">

463 <GroupCommands>

464 <ext:GridCommand Icon="TableRow" CommandName="SelectGroup" Text="选择当前组">

465 <ToolTip Title="选择" Text="选择当前组的所有行" />

466 </ext:GridCommand>

467 <ext:GridCommand Icon="Decline" CommandName="UnSelectGroup" Text="取消选择">

468 <ToolTip Title="取消选择" Text="取消当前组的所有选择" />

469 </ext:GridCommand>

470

471 <ext:GridCommand Icon="PageBack" CommandName="Reject" Text="退回">

472 <ToolTip Title="退回" Text="退回所选任务" />

473 </ext:GridCommand>

474 <ext:GridCommand Icon="BookAdd" CommandName="Submit" Text="提交">

475 <ToolTip Title="提交" Text="提交所选任务" />

476 </ext:GridCommand>

477 <ext:CommandFill />

478 </GroupCommands>

479 </ext:CommandColumn>--%>

480 </Columns>

481 </ColumnModel>

482 <SelectionModel>

483 <ext:CheckboxSelectionModel ID="CheckboxSelectionModel3" runat="server" />

484 </SelectionModel>

485 <Listeners>

486 <Command Handler="ExcuteCommand(command,record);" />

487 <GroupCommand Handler="if(command === 'SelectGroup'){ this.getSelectionModel().selectRecords(records, true); return;}else if(command=='UnSelectGroup'){this.getSelectionModel().clearSelections(); return;} else{toExcuteOperations(this.getSelectionModel().getSelections(),command);}" />

488 <Expand Handler="Store3.reload();" />

489 </Listeners>

490 <LoadMask ShowMask="true" />

491 <BottomBar>

492 <ext:PagingToolbar ID="PagingToolbar3" runat="server" PageSize="50">

493 <Items>

494 <ext:Label ID="Label3" runat="server" Text="分页数:" />

495 <ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" Width="10" />

496 <ext:ComboBox ID="ComboBox3" runat="server" Width="80">

497 <Items>

498 <ext:ListItem Text="10" />

499 <ext:ListItem Text="20" />

500 <ext:ListItem Text="30" />

501 <ext:ListItem Text="50" />

502 </Items>

503 <SelectedItem Value="50" />

504 <Listeners>

505 <Select Handler="#{PagingToolbar3}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />

506 </Listeners>

507 </ext:ComboBox>

508 </Items>

509 </ext:PagingToolbar>

510 </BottomBar>

511 <View>

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

513 GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'

514 GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">

515 </ext:GroupingView>

516 </View>

517 </ext:GridPanel>

518 <ext:GridPanel ID="GridPanel4" IDMode="Static" runat="server" Collapsible="true"

519 StripeRows="true" Title="会办跟踪" Icon="ClockPlay" AutoWidth="true" AutoExpandColumn="TaskTitel"

520 Hidden="true">

521 <Store>

522 <%--GroupField：分组的字段--%>

523 <ext:Store ID="Store4" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="false"

524 runat="server" GroupField="ShopName">

525 <Proxy>

526 <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />

527 </Proxy>

528 <Reader>

529 <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">

530 <Fields>

531 <%--任务ID--%>

532 <ext:RecordField Name="TaskId" />

533 <%--流程阶段--%>

534 <ext:RecordField Name="FSname" />

535 <%--门店名称--%>

536 <ext:RecordField Name="ShopName" />

537 <%--提交日期--%>

538 <ext:RecordField Name="TaskBeginDate" />

539 <%--任务名称--%>

540 <ext:RecordField Name="TaskTitel" />

541 <%--提交人--%>

542 <ext:RecordField Name="UserName" />

543 <%--审核人--%>

544 <ext:RecordField Name="DealUserid" />

545 <%--门店ID--%>

546 <ext:RecordField Name="ObjectId" />

547 <%--事件ID--%>

548 <ext:RecordField Name="DriverId" />

549 <%--阶段ID--%>

550 <ext:RecordField Name="PhasesId">

551 </ext:RecordField>

552 <%--业务模板ID--%>

553 <ext:RecordField Name="PTCode">

554 </ext:RecordField>

555 <%--文件类型ID--%>

556 <ext:RecordField Name="FileTypeId" />

557 <%--文件类型名称--%>

558 <ext:RecordField Name="FileTypeName" />

559 <%--<ext:RecordField Name="Remark" />--%>

560 <ext:RecordField Name="ShopType" />

561 <ext:RecordField Name="PNID" />

562 <ext:RecordField Name="PTID" />

563 <ext:RecordField Name="DriverPhasesid" />

564 <ext:RecordField Name="overtimeflag" />

565 </Fields>

566 </ext:JsonReader>

567 </Reader>

568 <BaseParams>

569 <ext:Parameter Name="start" Value="0" Mode="Raw" />

570 <ext:Parameter Name="limit" Value="getPageSize4()" Mode="Raw" />

571 <ext:Parameter Name="type" Value="WillDoTracking" Mode="Value" />

572 </BaseParams>

573 <Listeners>

574 <Load Handler="GridPanel4.setTitle('会办跟踪（'+Store4.getTotalCount()+'）& lt;/font>'); " />

575 </Listeners>

576 </ext:Store>

577 </Store>

578 <ColumnModel IDMode="Static" ID="ColumnModel4" runat="server">

579 <Columns>

580 <ext:RowNumbererColumn />

581 <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">

582 </ext:Column>

583 <ext:Column ColumnID="ShopName" Header="门店名称"

584 DataIndex="ShopName" />

585 <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel" />

586 <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />

587 <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />

588 <ext:Column Header="会办人" DataIndex="UserName" />

589 <ext:Column Header="店铺类型" DataIndex="ShopType" />

590 <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">

591 </ext:Column>

592 <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">

593 </ext:Column>

594 <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">

595 </ext:Column>

596 <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false">

597 </ext:Column>

598 </Columns>

599 </ColumnModel>

600 <SelectionModel>

601 <ext:RowSelectionModel IDMode="Static" ID="RowSelectionModel4" runat="server" />

602 </SelectionModel>

603 <Listeners>

604 <Command Handler="ExcuteCommand(command,record);" />

605 <GroupCommand Handler="if(command === 'SelectGroup'){ this.getSelectionModel().selectRecords(records, true); return;}else if(command=='UnSelectGroup'){this.getSelectionModel().clearSelections(); return;} else{toExcuteOperations(this.getSelectionModel().getSelections(),command);}" />

606 <Expand Handler="Store4.reload();" />

607 </Listeners>

608 <LoadMask ShowMask="true" />

609 <BottomBar>

610 <ext:PagingToolbar IDMode="Static" ID="PagingToolbar4" runat="server" PageSize="50">

611 <Items>

612 <ext:Label ID="Label4" runat="server" Text="分页数:" />

613 <ext:ToolbarSpacer ID="ToolbarSpacer4" IDMode="Static" runat="server" Width="10" />

614 <ext:ComboBox ID="ComboBox4" IDMode="Static" runat="server" Width="80">

615 <Items>

616 <ext:ListItem Text="10" />

617 <ext:ListItem Text="20" />

618 <ext:ListItem Text="30" />

619 <ext:ListItem Text="50" />

620 </Items>

621 <SelectedItem Value="50" />

622 <Listeners>

623 <Select Handler="PagingToolbar4.pageSize = parseInt(this.getValue()); PagingToolbar4.doLoad();" />

624 </Listeners>

625 </ext:ComboBox>

626 </Items>

627 </ext:PagingToolbar>

628 </BottomBar>

629 <View>

630 <ext:GroupingView ID="GroupingView4" IDMode="Static" HideGroupedColumn="true" runat="server"

631 ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'

632 GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">

633 </ext:GroupingView>

634 </View>

635 </ext:GridPanel>

636 <ext:GridPanel ID="GridPanel5" IDMode="Static" runat="server" Collapsible="true" StripeRows="true"

637 Title="已办事务" Icon="ClockPause" AutoWidth="true" AutoExpandColumn="TaskTitel">

638 <Store>

639 <%--GroupField：分组的字段--%>

640 <ext:Store ID="Store5" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="false" runat="server"

641 GroupField="ShopName">

642 <Proxy>

643 <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />

644 </Proxy>

645 <Reader>

646 <ext:JsonReader TotalProperty="total" Root="data">

647 <Fields>

648 <%--店铺名称--%>

649 <ext:RecordField Name="ShopName" />

650 <%--状态名称--%>

651 <ext:RecordField Name="FSname" />

652 <%--所属阶段--%>

653 <ext:RecordField Name="PhasesName" />

654 <%--任务创建日期--%>

655 <ext:RecordField Name="TaskBeginDate" Type="Date" />

656 <%--提交时间--%>

657 <ext:RecordField Name="BeginDate" Type="Date" />

658 <%--任务名称--%>

659 <ext:RecordField Name="TaskTitel" />

660 <%--提交人--%>

661 <ext:RecordField Name="UserName" />

662 <ext:RecordField Name="TaskEndDate" Type="Date" />

663 <%--主持老师--%>

664 <ext:RecordField Name="ShopkeeperName" />

665 <%--处理时长--%>

666 <ext:RecordField Name="DealHours" />

667 <%--任务时长--%>

668 <ext:RecordField Name="TaskHours" />

669 <%--处理日期--%>

670 <ext:RecordField Name="DealDate" Type="Date" />

671 <%--批注--%>

672 <ext:RecordField Name="Remark" />

673 <%--处理动作ID--%>

674 <ext:RecordField Name="DealFAID" />

675 <%--动作名称--%>

676 <ext:RecordField Name="FAName" />

677 <%--处理状态--%>

678 <ext:RecordField Name="DealFSID" />

679 </Fields>

680 </ext:JsonReader>

681 </Reader>

682 <BaseParams>

683 <ext:Parameter Name="start" Value="0" Mode="Raw" />

684 <ext:Parameter Name="limit" Value="getPageSize5()" Mode="Raw" />

685 <ext:Parameter Name="type" Value="AlreadyDoTask" Mode="Value" />

686 </BaseParams>

687 <Listeners>

688 <Load Handler="GridPanel5.setTitle('已办事项（'+Store5.getTotalCount()+'）& lt;/font>'); " />

689 </Listeners>

690 </ext:Store>

691 </Store>

692 <ColumnModel ID="ColumnModel5" runat="server">

693 <Columns>

694 <ext:RowNumbererColumn />

695 <ext:Column DataIndex="ShopName" Header="店铺名称" />

696 <ext:Column Header="任务名称" DataIndex="TaskTitel" />

697 <ext:Column Header="操作名称" DataIndex="FAName" />

698 <ext:Column Header="状态名称" DataIndex="FSname" />

699 <ext:Column Header="批注" DataIndex="Remark" />

700 <ext:DateColumn Header="处理开始时间" DataIndex="BeginDate" Width="109" Format="yy-MM-dd hh:mm:ss" />

701 <ext:DateColumn Header="处理结束时间" DataIndex="DealDate" Width="109" Format="yy-MM-dd hh:mm:ss" />

702 <ext:Column Header="处理时长（天）" DataIndex="DealHours" />

703 <ext:Column Header="提交人" DataIndex="UserName" />

704 <ext:DateColumn Header="任务创建时间" DataIndex="TaskBeginDate" Width="109" Format="yy-MM-dd hh:mm:ss" />

705 <ext:DateColumn Header="任务结束时间" DataIndex="TaskEndDate" Width="109" Format="yy-MM-dd hh:mm:ss" />

706 <ext:Column Header="任务时长（天）" DataIndex="TaskHours" />

707 </Columns>

708 </ColumnModel>

709 <SelectionModel>

710 <ext:RowSelectionModel ID="RowSelectionModel5" runat="server" />

711 </SelectionModel>

712 <Listeners>

713 <Command Handler="ExcuteCommand(command,record);" />

714 <Expand Handler="Store5.reload();" />

715 </Listeners>

716 <LoadMask ShowMask="true" />

717 <BottomBar>

718 <ext:PagingToolbar ID="PagingToolbar5" IDMode="Static" runat="server" PageSize="50">

719 <Items>

720 <ext:Label ID="Label5" runat="server" Text="分页数:" />

721 <ext:ToolbarSpacer ID="ToolbarSpacer5" runat="server" Width="10" />

722 <ext:ComboBox ID="ComboBox5" runat="server" Width="80">

723 <Items>

724 <ext:ListItem Text="10" />

725 <ext:ListItem Text="20" />

726 <ext:ListItem Text="30" />

727 <ext:ListItem Text="50" />

728 </Items>

729 <SelectedItem Value="50" />

730 <Listeners>

731 <Select Handler="PagingToolbar5.pageSize = parseInt(this.getValue()); PagingToolbar5.doLoad();" />

732 </Listeners>

733 </ext:ComboBox>

734 </Items>

735 </ext:PagingToolbar>

736 </BottomBar>

737 <View>

738 <ext:GroupingView ID="GroupingView5" StartCollapsed="true" HideGroupedColumn="true"

739 runat="server" ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'

740 GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">

741 </ext:GroupingView>

742 </View>

743 </ext:GridPanel>

744 </Items>

745 </ext:Panel>

746 </Items>

747 <Listeners>

748 <AfterLayout Handler="var vHeight= #{Viewport1}.getHeight();

749 #{pnlView}.setHeight(vHeight);

750 vHeight=vHeight-60;

751 GridPanel1.setHeight(vHeight);

752 GridPanel3.setHeight(vHeight);

753 GridPanel4.setHeight(vHeight);

754 GridPanel2.setHeight(vHeight);

755 GridPanel6.setHeight(vHeight);

756 GridPanel5.setHeight(vHeight);

757 " />

758 </Listeners>

759 </ext:Viewport>

配置比较多，但是并不复杂。这种配置，比写js配置容易多了。而且更易于维护。都写这么多了，我也不过多讲解了。就简单说明下好了。

1）首先介绍下Viewport。ViewPort会随着浏览器显示区域的大小自动改变，它代表整个浏览器的显示区域。Viewport不需要指定renderTo，因为它直接渲染到页面的body区域，所以在一个页面中就只能有一个ViewPort实例。在自适应浏览器方面，使用Viewport很方便。接下来再看下面的配置：

view sourceprint?01 <Listeners>

02 <AfterLayout Handler="var vHeight= #{Viewport1}.getHeight();

03 #{pnlView}.setHeight(vHeight);

04 vHeight=vHeight-60;

05 GridPanel1.setHeight(vHeight);

06 GridPanel3.setHeight(vHeight);

07 GridPanel4.setHeight(vHeight);

08 GridPanel2.setHeight(vHeight);

09 GridPanel6.setHeight(vHeight);

10 GridPanel5.setHeight(vHeight);

11 " />

12 </Listeners>

在Viewport的AfterLayout 事件触发后，设置了所有的GridPanel的高度。

2）折叠面板：

view sourceprint?1 <ext:Panel runat="server" Layout="Accordion" ID="pnlView">

3）获取数据。注意Store控件，这部分可以参考ExtjsAPI。

GroupField属性：分组的字段。

HttpProxy控件：HttpProxy用于请求远程数据，Url属性可以指定页面路径。

JsonReader控件：用于读取Json数据。注意属性TotalProperty和Root，分别是设置总记录数和根元素的，如果设置不正确，将读取不到数据。

BaseParams属性：用于设置请求的参数。在任何请求时都会发送，不同于AutoLoadParams属性。

Httphandler类部分代码如下：

view sourceprint?01 /// 已办任务列表

02 /// </summary>

03 private void GetAlreadyDoTaskList()

04 {

05 //设置JSON数据格式

06 this.context.Response.ContentType = "text/json";

07 TaskServices _ts = new TaskServices();

08 var result = _ts.SelectTaskApproval();

09 var pagingEmployees = new Paging<NewShopTaskList>(result, result.Count);

10 var _json = JSON.Serialize(from e in pagingEmployees.Data

12 select new

13 {

14 e.TaskTitel,

15 e.FSname,

16 e.TaskBeginDate,

17 e.TaskEndDate,

18 e.TaskHours,

19 e.UserName,

20 e.BeginDate,

21 e.ShopkeeperName,

22 e.PhasesId,

23 e.PhasesName,

24 e.DealHours,

25 e.DealDate,

26 e.Remark,

27 e.DealFAID,

28 e.FAName,

29 e.DealFSID,

30 e.ShopName,

31 e.PNID,

32 e.PTID,

33 e.overtimeflag

34 });

35 StoreResponseData sr = new StoreResponseData

36 {

37 Total = pagingEmployees.TotalRecords,

38 Data = _json

39 };

40 sr.Return();

41 }

4）设置GridPanel的标题以及记录总数。

view sourceprint?1 <Listeners>

2 <Load Handler="#{GridPanel1}.setTitle('待处理事务（'+# {Store1}.getTotalCount()+'）'); " />

3 </Listeners>

5）任务名在一定条件下变红。

view sourceprint?1 <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">

2 <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />

3 </ext:Column>

setTitle函数上面介绍过，就不赘述了。

6）设置命令。

先设置命令列（ImageCommandColumn）：

view sourceprint?01 <ext:ImageCommandColumn Header="操作" DataIndex="FileTypeName">

02 <Commands>

03 <ext:ImageCommand CommandName="View" Icon="TableEdit" />

04 </Commands>

05 <PrepareCommand Fn="prepareCommand" />

06 </ext:ImageCommandColumn>

07 <ext:ImageCommandColumn Header="审批历史">

08 <Commands>

09 <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">

10 <ToolTip Text="审批历史" />

11 </ext:ImageCommand>

12 </Commands>

13 </ext:ImageCommandColumn>

然后设置GridPanel的Listeners属性。

view sourceprint?1 <Listeners>

2 <Command Handler="ExcuteCommand(command,record);" />

3 <GroupCommand Handler="if(command === 'SelectGroup'){ this.getSelectionModel().selectRecords(records, true); return;}else if(command=='UnSelectGroup'){this.getSelectionModel().clearSelections(); return;} else{toExcuteOperations(this.getSelectionModel().getSelections(),command);}" />

4 <Expand Handler="#{Store1}.reload();" />

5 </Listeners>

7）满足一定条件的复选框才允许选择。

SelectionModel属性用于设置GridPanel的选择模型，有行选择、复选框选择等模型。这里的checkboxBeforerowselect函数已经介绍过，就不赘述了。

8）顶部工具条设置。这里的按钮是根据登陆角色结合任务来控制的。这部分在后台设置。具体如下：

view sourceprint?001 protected void Page_Load(object sender, EventArgs e)

002 {

003 if (!IsPostBack)

004 {

005 ResourceManager1.BuildAllPrivilegesForExtNET();

006 //获取当前用户的登陆信息

007 UserService userServices = new UserService();

008 UserInfo userinfo = userServices.SelectUserbySharePointId();

009 using (NBShopDataContext _db = new NBShopDataContext())

010 {

011 //获取操作Code列表

012 var _FACodeLst = _db.SelectFacodeForTasklist(userinfo.UserId).ToList();

013 if (_FACodeLst != null && _FACodeLst.Count > 0)

014 {

015 Toolbar1.Items.Clear();

016 tbButtons.Items.Clear();

017 foreach (var item in _FACodeLst)

018 {

019 //转换成操作枚举

020 FACodeEnum _face = (FACodeEnum)System.Enum.Parse(typeof(FACodeEnum), item.facode);

021 switch (_face)

022 {

023 #region 取消

024 //取消

025 case FACodeEnum.Cancel:

026 SetButton(Icon.Cancel, "取消", FACodeEnum.Cancel, Toolbar1, "GridPanel1");

027 SetButton(Icon.Cancel, "取消", FACodeEnum.Cancel, tbButtons,"GridPanel6");

028 break;

029 #endregion

030 #region 保存

031 //保存

032 case FACodeEnum.Save:

033 SetButton(Icon.PageSave, "保存", FACodeEnum.Save, Toolbar1, "GridPanel1");

034 SetButton(Icon.PageSave, "保存", FACodeEnum.Save, tbButtons, "GridPanel6");

035 break;

036 #endregion

037 case FACodeEnum.New:

038 break;

039 #region 退回

040 //退回

041 case FACodeEnum.Reject:

042 SetButton(Icon.PageBack, "退回", FACodeEnum.Reject, Toolbar1, "GridPanel1");

043 SetButton(Icon.PageBack, "退回", FACodeEnum.Reject, tbButtons, "GridPanel6");

044 break;

045 #endregion

046 #region 等待

047 //等待

048 case FACodeEnum.Wait:

049 SetButton(Icon.PackageGo, "等待", FACodeEnum.Wait, Toolbar1, "GridPanel1");

050 SetButton(Icon.PackageGo, "等待", FACodeEnum.Wait, tbButtons, "GridPanel6");

051 break;

052 #endregion

053 #region 通知

054 //通知

055 case FACodeEnum.Notice:

056 SetButton(Icon.NoteGo, "通知", FACodeEnum.Notice, Toolbar1, "GridPanel1");

057 SetButton(Icon.NoteGo, "通知", FACodeEnum.Notice, tbButtons, "GridPanel6");

058 break;

059 #endregion

060 //编辑

061 case FACodeEnum.Edit:

062 break;

063 #region 提交

064 //提交

065 case FACodeEnum.Submit:

066 SetButton(Icon.PageAdd, "提交", FACodeEnum.Submit, Toolbar1, "GridPanel1");

067 SetButton(Icon.PageAdd, "提交", FACodeEnum.Submit, tbButtons, "GridPanel6");

068 break;

069 #endregion

070 #region 同意

071 //同意

072 case FACodeEnum.Approve:

073 SetButton(Icon.Accept, "同意", FACodeEnum.Approve, Toolbar1, "GridPanel1");

074 SetButton(Icon.PageAdd, "同意", FACodeEnum.Approve, tbButtons, "GridPanel6");

075 break;

076 #endregion

077 default:

078 break;

079 }

080 }

081 }

082 }

083 //TODO:后期改为有数据则显示，无数据不显示

084 if (userinfo.RoleCode == "Signingmember")

085 {

086 Store4.AutoLoad = true;

087 GridPanel4.Hidden = false;

088 }

089

090 }

091 }

092

093 /// <summary>

094 /// 向工具条添加按钮

095 /// </summary>

096 /// <param name="icon">图标</param>

097 /// <param name="text">文本</param>

098 /// <param name="facode">操作Code</param>

099 /// <param name="toolbar">工具条</param>

100 /// <param name="_panelName">容器ID</param>

101 private static void SetButton(Icon icon, string text, FACodeEnum facode, Toolbar toolbar, string _panelName)

102 {

103 if (toolbar == null) throw new ArgumentNullException("toolbar");

104 var _btn = new Ext.Net.Button

105 {

106 Icon = icon,

107 Text = text,

108 Listeners =

109 {

110 Click =

111 {

112 Handler =

113 string.Format("toExcuteOperations(#{{{0}}}.getSelectionModel().getSelections(),'{1}');", _panelName, facode.ToString())

114 }

115 }

116 };

117 //设置Click事件的Handler，用于操作所选项。操作参数（所选记录集、操作Code）

118 if (toolbar.Items.Count > 0)

119 toolbar.Items.Add(new ToolbarSeparator());

120 toolbar.Items.Add(_btn);

121 }

9）底部分页工具条。

view sourceprint?01 <BottomBar>

02 <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="50">

03 <Items>

04 <ext:Label ID="Label1" runat="server" Text="分页数:" />

05 <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />

06 <ext:ComboBox ID="ComboBox1" runat="server" Width="80">

07 <Items>

08 <ext:ListItem Text="10" />

09 <ext:ListItem Text="20" />

10 <ext:ListItem Text="30" />

11 <ext:ListItem Text="50" />

12 </Items>

13 <SelectedItem Value="50" />

14 <Listeners>

15 <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />

16 </Listeners>

17 </ext:ComboBox>

18 </Items>

19 </ext:PagingToolbar>

20 </BottomBar>
view sourceprint?1 注意“#{PagingToolbar1}”。在EXT.NET里面，所有的Listeners事件都有Handler属性。在Handler属性里面写脚本，可以使用"#{ID}"来获取控件的客户端ID，
view sourceprint?1 这里没有设置IDMode="Static"，所以当放置在用户控件或者母版页中的时候，会添加很多前缀，导致JS执行出错。
view sourceprint?1 10）视图。这里用的是组视图（GroupingView）。如：

<View>
 <ext:GroupingView ID="GroupingView1" HideGroupedColumn="true" StartCollapsed="true"
 runat="server" ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
 GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true" EnableGrouping="true">
 </ext:GroupingView>
</View>

这里的文字最好设置下，不然显示的是E文。

11）展开时刷新数据。

view sourceprint?1 <Expand Handler="Store2.reload();" />

基本上都介绍完了，还有不明白的，就看看EXTJS的API以及EXT.NET的在线示例吧。

转载于:https://www.cnblogs.com/zwkBlog/archive/2012/01/13/2321285.html