本次開發的項目是一個有關工作流程相關的項目，其中一塊就涉及到查看流程進度的查看。類似網上貨物訂單進度查看，但是又有一定的區別，我們除了要顯示流程走到了哪一步，還要顯示每一步是由誰操作的，操作的時間，流程任務狀態等等相關資訊。
因為使用的是ext.net，所以首先想到的是重繪ext.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="width: 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 != null23 && 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中的模板，這個沒問題。
但是還是有些問題達不到我要的要求：
綜上所述，只好放棄使用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; width: 46px; height: 48px;margin-top: 20px;'><div style='margin: 16px 10px'>開始</div></div>";15 html += "<div style='float: left; width: 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 != null18 && 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; width: 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; width: 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; width: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; width: 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 }
哈哈，這下達到了我的要求了，如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
