本次开发的项目是一个有关工作流相关的项目，其中一块就涉及到查看流程进度的查看。类似网上货物订单进度查看，但是又有一定的区别，我们除了要显示流程走到了哪一步，还要显示每一步是由谁操作的，操作的时间，流程任务状态等等相关信息。
因为使用的是ext.net，所以首先想到的是重绘ext.Panel的模板来实现。请看我最先设计的方案：
- 在相关位置预设一个Panel控件；
- 设置一个Ext.XTemplate设置Panel的模板；(代码如下)
前台相关代码
1 Panel: 2 3 <ext:Panel runat="server" ID="wfDetailsPanel" Title="流程进度" /> 4 5 Template： 6 7 <ext:XTemplate ID="template" runat="server"> 8 <Html> 9 <tpl for="."> 10 <div style=" 180px; height: 80px; background: url(http://www.cnblogs.com/Content/themes/base/images/user.png) no-repeat; border: 1px solid red; 11 margin: 5px;font-size: 12px"> 12 <div style="margin: 5px 5px 5px 45px"> 13 <span>状态：</span>{AState}<br /> 14 <span>办理人：</span>{AProcessorName}<br /> 15 <span>办理时间：</span>{AFinishedTime}<br /> 16 </div> 17 </div> 18 </tpl> 19 </Html> 20 </ext:XTemplate>
js设置更新Panel的模板
1 /*record 是GrdiPanel的一条数据记录*/ 2 function SelectWFChanged(record) { 3 var wfTempId = record.data.WFTemplateID; 4 var wfId = record.data.WFInstanceID; 5 hdSelectRow.setValue(wfId); 6 TaskDetails.store.load({ params: { wfInsId: wfId} }); 7 8 Ext.Ajax.request( 9 { 10 url: '/Process/GetWfTaskTemplate', 11 params: { wfTempId: wfTempId, wfInsId: wfId }, 12 success: function (data) { 13 var response = Ext.util.JSON.decode(data.responseText); 14 response = response.result; 15 for (var i = 0; i < response.length; i++) { 16 if (response[i].AState == true) { 17 response[i].AState = "已办理"; 18 } 19 else { 20 response[i].AState = "未办理"; 21 } 22 if (response[i].AFinishedTime != null 23 && response[i].AFinishedTime != "") { 24 response[i].AFinishedTime = FormatDate(response[i].AFinishedTime); 25 } 26 } 27 template.compile(); 28 template.overwrite(wfDetailsPanel.body, response); 29 }, 30 failure: function (response, options) { 31 alert(response.responseText); 32 } 33 }); 34 }
通过这样初步测试Panel会根据获取的数据集合重复的产生对应的Xtemplate中的模板，这个没问题。
但是还是有些问题达不到我要的要求：
- 它的排版方式是从上向下依次排列的；
- 此外我们会增加一个开始、结束的状态图在Panel中，这个又不是根据数据集合来重复产生的，因此使用这个Xtemplate也是不可能实现的；
- 每一Xtemplate之后还要产生一个箭头图标表示间隔，这个使用Xtemplate也不好实现；
综上所述，只好放弃使用Xtemplate来实现了。
那么我们这么来实现呢？其实在我们使用Panel的过程中会发现Panel有一个html属性，它的内容其实就是Panel所包含的内容，因此我们可以借助这个属性来自定义其中的html代码来实现Panel中的内容样式。好吧，找到了方法那我们就开始搞吧：
删除前台的Xtemplate代码段，只保留Panel的代码，修改Js代码：
JS代码控制Panel模板数据
1 function SelectWFChanged(record) { 2 var wfTempId = record.data.WFTemplateID; 3 var wfId = record.data.WFInstanceID; 4 hdSelectRow.setValue(wfId); 5 TaskDetails.store.load({ params: { wfInsId: wfId} }); 6 7 Ext.Ajax.request( 8 { 9 url: '/Process/GetWfTaskTemplate', 10 params: { wfTempId: wfTempId, wfInsId: wfId }, 11 success: function (data) { 12 var response = Ext.util.JSON.decode(data.responseText); 13 response = response.result; 14 var html = "<div style='font-size: 12px; margin:10px;'><div style='background: url(http://www.cnblogs.com/Content/themes/base/images/begin.png) no-repeat; float: left; 46px; height: 48px;margin-top: 20px;'><div style='margin: 16px 10px'>开始</div></div>"; 15 html += "<div style='float: left; 58px; height: 12px; margin-top: 40px; background: url(http://www.cnblogs.com/Content/themes/base/images/brn.png) no-repeat;'></div>"; 16 for (var i = 0; i < response.length; i++) { 17 if (response[i].AFinishedTime != null 18 && response[i].AFinishedTime != "") { 19 response[i].AFinishedTime = FormatDate(response[i].AFinishedTime); 20 } 21 if (response[i].AState == true) { 22 response[i].AState = "已办理"; 23 html += "<div style=' float: left; 160px; height: 80px; background: #ccee88 url(http://www.cnblogs.com/Content/themes/base/images/user.png) no-repeat left; border: 1px solid black; margin: 1px;'> <div style='margin: 15px 5px 5px 45px'> <div style='margin: 5px 0;'>状态：【" + response[i].AState + "】</div><div style='margin: 5px 0;'>办理人：" + response[i].AProcessorName + "</div > </div> <div style='margin: 17px 0 5px 5px;'>办理时间：" + response[i].AFinishedTime + "</div></div>"; 24 } 25 else { 26 response[i].AState = "未办理"; 27 html += "<div style=' float: left; 120px; height: 80px; background: #c8c8c8 url(http://www.cnblogs.com/Content/themes/base/images/user.png) no-repeat left; border: 1px solid black; margin: 1px;'> <div style='margin: 30px 5px 5px 45px'>等待办理</div></div>"; 28 } 29 html += "<div style='float: left; 58px; height: 12px; margin-top: 40px; background: url(http://www.cnblogs.com/Content/themes/base/images/brn.png) no-repeat;'></div>"; 30 } 31 html += "<div style='background: url(http://www.cnblogs.com/Content/themes/base/images/end.png) no-repeat; float: left; 46px; height: 48px;margin-top: 20px;'><div style='margin: 16px 10px'>结束</div></div></div>"; 32 wfDetailsPanel.body.update(html); 33 }, 34 failure: function (response, options) { 35 alert(response.responseText); 36 } 37 }); 38 }
哈哈，这下达到了我的要求了，截图如下：
