ext.net 关于panel template 重绘

　　本次开发的项目是一个有关工作流相关的项目，其中一块就涉及到查看流程进度的查看。类似网上货物订单进度查看，但是又有一定的区别，我们除了要显示流程走到了哪一步，还要显示每一步是由谁操作的，操作的时间，流程任务状态等等相关信息。

　　因为使用的是ext.net，所以首先想到的是重绘ext.Panel的模板来实现。请看我最先设计的方案：

  1. 在相关位置预设一个Panel控件；
  2. 设置一个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="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 != 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中的模板，这个没问题。

但是还是有些问题达不到我要的要求：

  1. 它的排版方式是从上向下依次排列的；
  2. 此外我们会增加一个开始、结束的状态图在Panel中，这个又不是根据数据集合来重复产生的，因此使用这个Xtemplate也是不可能实现的；
  3. 每一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; 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 != 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; 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 }

哈哈，这下达到了我的要求了，截图如下：   

posted @ 2012-06-29 11:26  rpoplar  阅读(527)  评论(0)  编辑  收藏  举报