.FileTypeName=="附件")
                {
                     command.text="上传";
                }
                else
                {
                     command.text="填写";
                }
            }
        };
//        var checkboxSelectionRenderer=function(value,metaData,record){ 
//            if(record.data.TaskBeginDate==0){ 
//                return; 
//            }else{ 
//                return Ext.grid.CheckboxSelectionModel.prototype.renderer.apply(this,arguments); 
//            } 
//        }
        var checkboxBeforerowselect=function(SelectionModel,rowIndex,keepExisting,record){ 
            if(record.data.TaskBeginDate==null || record.data.TaskBeginDate==''){ 
                Ext.MessageBox.alert('警告','不能选择该任务（此任务不能审核）。');
                return false;//不能进行选择 
            }else{ 
                return true; 
            } 
        }
    var template = '<b >{0}</b>';
    var setTitle = function(value, metadata, record, rowIndex, colIndex, store) {
        if (record.data.overtimeflag == "1")
            return String.format(template, value, 'red');
        else
            return value;
    };
</script>
1
下面就一一说明这些JS函数：
1
<strong>ShowWin：打开一个新的带关闭按钮、最大化、最小化的模式窗口。listeners里面添加了beforedestroy事件，该事件在窗口关闭时触发。</strong>
1
<strong>“<%=Store1.ClientID %>.reload();”用于刷新“待处理事务”的数据。当服务器控件放在用户控件或者母版页里面时，注意使用服务器标记来获取客户端ID。</strong>
1
<strong>toExcuteOperations：封装在另外的JS文件里，用于处理每项事务，由于代码量多，就不贴出来了。</strong>
1
<strong>updateStore：更新数据。有的控件设置了<em>IDMode="Static"，</em>故可以直接使用控件的服务器ID来获取对象。</strong>
1
<strong>ExcuteCommand：执行命令。当为View时，打开相应的窗口。</strong>
1
<strong>getPageSize1：获取分页数。</strong>
1
<strong>checkboxBeforerowselect：在选择行首的复选框时的判断。即在某种情况下不可选。</strong>
1
<strong>setTitle：设置列显示的html。这里是当overtimeflag为1时，该行该列的数据加粗变红。引用地方如下：</strong>
1
2
<ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">
    <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />
1
<strong>（三）然后，就需要编写页面代码了。先贴出代码：</strong>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
<ext:Viewport runat="server" ID="Viewport1">
    <Items>
        <ext:Panel runat="server" Layout="Accordion" ID="pnlView">
            <LayoutConfig>
                <ext:AccordionLayoutConfig Animate="true" AutoWidth="true" Fill="true" />
            </LayoutConfig>
            <Items>
                <ext:GridPanel ID="GridPanel1" IDMode="Static" runat="server" Collapsible="true" StripeRows="true"
                    Title="待处理事务" AutoWidth="true" Icon="ClockRed" AutoExpandColumn="TaskTitel">
                    <Store>
                        <%--GroupField：分组的字段--%>
                        <ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="true" runat="server"
                            GroupField="ShopName">
                            <Proxy>
                                <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader TotalProperty="total" Root="data">
                                    <Fields>
                                        <%--任务ID--%>
                                        <ext:RecordField Name="TaskId" />
                                        <%--流程阶段--%>
                                        <ext:RecordField Name="FSname" />
                                        <%--门店名称--%>
                                        <ext:RecordField Name="ShopName" />
                                        <%--提交日期--%>
                                        <ext:RecordField Name="TaskBeginDate" />
                                        <%--任务名称--%>
                                        <ext:RecordField Name="TaskTitel" />
                                        <%--提交人--%>
                                        <ext:RecordField Name="UserName" />
                                        <%--审核人--%>
                                        <ext:RecordField Name="DealUserid" />
                                        <%--门店ID--%>
                                        <ext:RecordField Name="ObjectId" />
                                        <%--事件ID--%>
                                        <ext:RecordField Name="DriverId" />
                                        <%--阶段ID--%>
                                        <ext:RecordField Name="PhasesId" />
                                        <%--业务模板ID--%>
                                        <ext:RecordField Name="PTCode">
                                        </ext:RecordField>
                                        <%--文件类型ID--%>
                                        <ext:RecordField Name="FileTypeId" />
                                        <%--文件类型名称--%>
                                        <ext:RecordField Name="FileTypeName" />
                                        <%--<ext:RecordField Name="Remark" />--%>
                                        <ext:RecordField Name="ShopType" />
                                        <ext:RecordField Name="PNID" />
                                        <ext:RecordField Name="PTID" />
                                        <ext:RecordField Name="DriverPhasesid" />
                                        <ext:RecordField Name="overtimeflag" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <SortInfo Field="ShopName" Direction="ASC" />
                            <BaseParams>
                                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                <ext:Parameter Name="limit" Value="getPageSize1()" Mode="Raw" />
                                <ext:Parameter Name="type" Value="GetTaskList" Mode="Value" />
                            </BaseParams>
                            <Listeners>
                                <Load Handler="#{GridPanel1}.setTitle('待处理事务<font style=color:green;font-weight:bolder;>（'+#{Store1}.getTotalCount()+'）</font>'); " />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:RowNumbererColumn />
                            <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">
                            </ext:Column>
                            <ext:Column ColumnID="ShopName" Header="<font style='color:Silver;'>门店名称</font>"
                                DataIndex="ShopName" />
                            <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">
                                <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />
                            </ext:Column>
                            <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />
                            <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />
                            <ext:Column Header="提交人" DataIndex="UserName" />
                            <ext:Column Header="店铺类型" DataIndex="ShopType" />
                            <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false" />
                            <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false" />
                            <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false" />
                            <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false">
                            </ext:Column>
                            <ext:ImageCommandColumn Header="操作" DataIndex="FileTypeName">
                                <Commands>
                                    <ext:ImageCommand CommandName="View" Icon="TableEdit" />
                                </Commands>
                                <PrepareCommand Fn="prepareCommand" />
                            </ext:ImageCommandColumn>
                            <ext:ImageCommandColumn Header="审批历史">
                                <Commands>
                                    <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">
                                        <ToolTip Text="审批历史" />
                                    </ext:ImageCommand>
                                </Commands>
                            </ext:ImageCommandColumn>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
                            <Listeners>
                                <%--<Render Fn="checkboxSelectionRenderer" />--%>
                                <BeforeRowSelect Fn="checkboxBeforerowselect" />
                            </Listeners>
                        </ext:CheckboxSelectionModel>
                    </SelectionModel>
                    <Listeners>
                        <Command Handler="ExcuteCommand(command,record);" />
                        <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);}" />
                        <Expand Handler="#{Store1}.reload();" />
                    </Listeners>
                    <LoadMask ShowMask="true" />
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server" />
                    </TopBar>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="50">
                            <Items>
                                <ext:Label ID="Label1" runat="server" Text="分页数:" />
                                <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                                <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                                    <Items>
                                        <ext:ListItem Text="10" />
                                        <ext:ListItem Text="20" />
                                        <ext:ListItem Text="30" />
                                        <ext:ListItem Text="50" />
                                    </Items>
                                    <SelectedItem Value="50" />
                                    <Listeners>
                                        <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <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>
                </ext:GridPanel>
                <ext:GridPanel ID="GridPanel2" IDMode="Static" runat="server" Collapsible="true"
                    StripeRows="true" Title="可撤销事务" Icon="ClockError" AutoWidth="true" AutoExpandColumn="TaskTitel">
                    <Store>
                        <%--GroupField：分组的字段--%>
                        <ext:Store ID="Store2" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="true"
                            runat="server" GroupField="ShopName">
                            <Proxy>
                                <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">
                                    <Fields>
                                        <%--任务ID--%>
                                        <ext:RecordField Name="TaskId" />
                                        <%--流程阶段--%>
                                        <ext:RecordField Name="FSname" />
                                        <%--门店名称--%>
                                        <ext:RecordField Name="ShopName" />
                                        <%--提交日期--%>
                                        <ext:RecordField Name="TaskBeginDate" />
                                        <%--任务名称--%>
                                        <ext:RecordField Name="TaskTitel" />
                                        <%--提交人--%>
                                        <ext:RecordField Name="UserName" />
                                        <%--审核人--%>
                                        <ext:RecordField Name="DealUserid" />
                                        <%--门店ID--%>
                                        <ext:RecordField Name="ObjectId" />
                                        <%--事件ID--%>
                                        <ext:RecordField Name="DriverId" />
                                        <%--阶段ID--%>
                                        <ext:RecordField Name="PhasesId">
                                        </ext:RecordField>
                                        <%--业务模板ID--%>
                                        <ext:RecordField Name="PTCode">
                                        </ext:RecordField>
                                        <%--文件类型ID--%>
                                        <ext:RecordField Name="FileTypeId" />
                                        <%--文件类型名称--%>
                                        <ext:RecordField Name="FileTypeName" />
                                        <%--<ext:RecordField Name="Remark" />--%>
                                        <ext:RecordField Name="ShopType" />
                                        <ext:RecordField Name="PNID" />
                                        <ext:RecordField Name="PTID" />
                                        <ext:RecordField Name="DriverPhasesid" />
                                        <ext:RecordField Name="overtimeflag" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <BaseParams>
                                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                <ext:Parameter Name="limit" Value="50" Mode="Raw" />
                                <ext:Parameter Name="type" Value="ReRepeal" Mode="Value" />
                            </BaseParams>
                            <Listeners>
                                <Load Handler="GridPanel2.setTitle('可撤销事务<font style=color:green;font-weight:bolder;>（'+Store2.getTotalCount()+'）</font>'); " />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel IDMode="Static" ID="ColumnModel2" runat="server">
                        <Columns>
                            <ext:RowNumbererColumn />
                            <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">
                            </ext:Column>
                            <ext:Column ColumnID="ShopName" Header="<font style='color:Silver;'>门店名称</font>"
                                DataIndex="ShopName" />
                            <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel" />
                            <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />
                            <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />
                            <ext:Column Header="提交人" DataIndex="UserName" />
                            <ext:Column Header="店铺类型" DataIndex="ShopType" />
                            <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel runat="server" />
                    </SelectionModel>
                    <Listeners>
                        <Command Handler="ExcuteCommand(command,record);" />
                        <Expand Handler="Store2.reload();" />
                    </Listeners>
                    <LoadMask ShowMask="true" />
                    <BottomBar>
                        <ext:PagingToolbar IDMode="Static" ID="PagingToolbar2" runat="server" PageSize="50" />
                    </BottomBar>
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Icon="PageBack" Text="撤销">
                                    <Listeners>
                                        <Click Handler="toExcuteOperations(GridPanel2.getSelectionModel().getSelections(),'Repeal');" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <View>
                        <ext:GroupingView ID="GroupingView2" IDMode="Static" HideGroupedColumn="true" runat="server"
                            ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
                            GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">
                        </ext:GroupingView>
                    </View>
                </ext:GridPanel>
                <ext:GridPanel ID="GridPanel6" IDMode="Static" runat="server" Collapsible="true"
                    StripeRows="true" Title="已撤销事务" Icon="ClockStop2" AutoWidth="true" AutoExpandColumn="TaskTitel">
                    <Store>
                        <%--GroupField：分组的字段--%>
                        <ext:Store ID="Store6" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="true"
                            runat="server" GroupField="ShopName">
                            <Proxy>
                                <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">
                                    <Fields>
                                        <%--任务ID--%>
                                        <ext:RecordField Name="TaskId" />
                                        <%--流程阶段--%>
                                        <ext:RecordField Name="FSname" />
                                        <%--门店名称--%>
                                        <ext:RecordField Name="ShopName" />
                                        <%--提交日期--%>
                                        <ext:RecordField Name="TaskBeginDate" />
                                        <%--任务名称--%>
                                        <ext:RecordField Name="TaskTitel" />
                                        <%--提交人--%>
                                        <ext:RecordField Name="UserName" />
                                        <%--审核人--%>
                                        <ext:RecordField Name="DealUserid" />
                                        <%--门店ID--%>
                                        <ext:RecordField Name="ObjectId" />
                                        <%--事件ID--%>
                                        <ext:RecordField Name="DriverId" />
                                        <%--阶段ID--%>
                                        <ext:RecordField Name="PhasesId">
                                        </ext:RecordField>
                                        <%--业务模板ID--%>
                                        <ext:RecordField Name="PTCode">
                                        </ext:RecordField>
                                        <%--文件类型ID--%>
                                        <ext:RecordField Name="FileTypeId" />
                                        <%--文件类型名称--%>
                                        <ext:RecordField Name="FileTypeName" />
                                        <%--<ext:RecordField Name="Remark" />--%>
                                        <ext:RecordField Name="ShopType" />
                                        <ext:RecordField Name="PNID" />
                                        <ext:RecordField Name="PTID" />
                                        <ext:RecordField Name="DriverPhasesid" />
                                        <ext:RecordField Name="overtimeflag" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <BaseParams>
                                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                <ext:Parameter Name="limit" Value="50" Mode="Raw" />
                                <ext:Parameter Name="type" Value="Repeal" Mode="Value" />
                            </BaseParams>
                            <Listeners>
                                <Load Handler="GridPanel6.setTitle('已撤销事务<font style=color:green;font-weight:bolder;>（'+Store6.getTotalCount()+'）</font>'); " />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel IDMode="Static" ID="ColumnModel6" runat="server">
                        <Columns>
                            <ext:RowNumbererColumn />
                            <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">
                            </ext:Column>
                            <ext:Column ColumnID="ShopName" Header="<font style='color:Silver;'>门店名称</font>"
                                DataIndex="ShopName" />
                            <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel" />
                            <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />
                            <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />
                            <ext:Column Header="提交人" DataIndex="UserName" />
                            <ext:Column Header="店铺类型" DataIndex="ShopType" />
                            <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false" />
                            <ext:ImageCommandColumn Header="操作" DataIndex="FileTypeName">
                                <Commands>
                                    <ext:ImageCommand CommandName="View" Icon="TableEdit" />
                                </Commands>
                                <PrepareCommand Fn="prepareCommand" />
                            </ext:ImageCommandColumn>
                            <ext:ImageCommandColumn Header="审批历史">
                                <Commands>
                                    <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">
                                        <ToolTip Text="审批历史" />
                                    </ext:ImageCommand>
                                </Commands>
                            </ext:ImageCommandColumn>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel6" runat="server" />
                    </SelectionModel>
                    <Listeners>
                        <Command Handler="ExcuteCommand(command,record);" />
                        <Expand Handler="Store6.reload();" />
                    </Listeners>
                    <LoadMask ShowMask="true" />
                    <BottomBar>
                        <ext:PagingToolbar IDMode="Static" ID="PagingToolbar6" runat="server" PageSize="50" />
                    </BottomBar>
                    <TopBar>
                        <ext:Toolbar ID="tbButtons" runat="server" />
                    </TopBar>
                    <View>
                        <ext:GroupingView ID="GroupingView6" IDMode="Static" HideGroupedColumn="true" runat="server"
                            ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
                            GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">
                        </ext:GroupingView>
                    </View>
                </ext:GridPanel>
                <ext:GridPanel ID="GridPanel3" IDMode="Static" runat="server" Collapsible="true" StripeRows="true"
                    Title="待补齐资料事宜" AutoWidth="true" Icon="ClockEdit" AutoExpandColumn="TaskTitel">
                    <Store>
                        <%--GroupField：分组的字段--%>
                        <ext:Store ID="Store3" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="true" runat="server"
                            GroupField="ShopName">
                            <Proxy>
                                <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">
                                    <Fields>
                                        <%--任务ID--%>
                                        <ext:RecordField Name="TaskId" />
                                        <%--流程阶段--%>
                                        <ext:RecordField Name="FSname" />
                                        <%--门店名称--%>
                                        <ext:RecordField Name="ShopName" />
                                        <%--提交日期--%>
                                        <ext:RecordField Name="TaskBeginDate" />
                                        <%--任务名称--%>
                                        <ext:RecordField Name="TaskTitel" />
                                        <%--提交人--%>
                                        <ext:RecordField Name="UserName" />
                                        <%--审核人--%>
                                        <ext:RecordField Name="DealUserid" />
                                        <%--门店ID--%>
                                        <ext:RecordField Name="ObjectId" />
                                        <%--事件ID--%>
                                        <ext:RecordField Name="DriverId" />
                                        <%--阶段ID--%>
                                        <ext:RecordField Name="PhasesId">
                                        </ext:RecordField>
                                        <%--业务模板ID--%>
                                        <ext:RecordField Name="PTCode">
                                        </ext:RecordField>
                                        <%--文件类型ID--%>
                                        <ext:RecordField Name="FileTypeId" />
                                        <%--文件类型名称--%>
                                        <ext:RecordField Name="FileTypeName" />
                                        <%--<ext:RecordField Name="Remark" />--%>
                                        <ext:RecordField Name="ShopType" />
                                        <ext:RecordField Name="PNID" />
                                        <ext:RecordField Name="PTID" />
                                        <ext:RecordField Name="DriverPhasesid" />
                                        <ext:RecordField Name="overtimeflag" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <BaseParams>
                                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                <ext:Parameter Name="limit" Value="getPageSize3()" Mode="Raw" />
                                <ext:Parameter Name="type" Value="ToFillNeatMaterialMatters" Mode="Value" />
                            </BaseParams>
                            <Listeners>
                                <Load Handler="GridPanel3.setTitle('待补齐资料事宜<font style=color:green;font-weight:bolder;>（'+Store3.getTotalCount()+'）</font>'); " />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel3" runat="server">
                        <Columns>
                            <ext:RowNumbererColumn />
                            <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">
                            </ext:Column>
                            <ext:Column ColumnID="ShopName" Header="<font style='color:Silver;'>门店名称</font>"
                                DataIndex="ShopName" />
                            <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">
                                <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />
                            </ext:Column>
                            <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />
                            <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />
                            <ext:Column Header="提交人" DataIndex="UserName" />
                            <ext:Column Header="店铺类型" DataIndex="ShopType" />
                            <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false">
                            </ext:Column>
                            <ext:ImageCommandColumn Header="操作">
                                <Commands>
                                    <ext:ImageCommand CommandName="View" Icon="TableEdit" Text="查看">
                                        <ToolTip Text="查看" />
                                    </ext:ImageCommand>
                                    <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">
                                        <ToolTip Text="审批历史" />
                                    </ext:ImageCommand>
                                </Commands>
                            </ext:ImageCommandColumn>
                            <%-- <ext:Column Header="状态" DataIndex="ActionName">
                    <Renderer Fn="CaoZuo" Args="value, metadata, record, rowIndex, colIndex, store" />
                </ext:Column>--%>
                            <%-- <ext:CommandColumn Hidden="true">
                    <GroupCommands>
                        <ext:GridCommand Icon="TableRow" CommandName="SelectGroup" Text="选择当前组">
                            <ToolTip Title="选择" Text="选择当前组的所有行" />
                        </ext:GridCommand>
                        <ext:GridCommand Icon="Decline" CommandName="UnSelectGroup" Text="取消选择">
                            <ToolTip Title="取消选择" Text="取消当前组的所有选择" />
                        </ext:GridCommand>
                        
                        <ext:GridCommand Icon="PageBack" CommandName="Reject" Text="退回">
                            <ToolTip Title="退回" Text="退回所选任务" />
                        </ext:GridCommand>
                        <ext:GridCommand Icon="BookAdd" CommandName="Submit" Text="提交">
                            <ToolTip Title="提交" Text="提交所选任务" />
                        </ext:GridCommand>
                        <ext:CommandFill />
                    </GroupCommands>
                </ext:CommandColumn>--%>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel3" runat="server" />
                    </SelectionModel>
                    <Listeners>
                        <Command Handler="ExcuteCommand(command,record);" />
                        <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);}" />
                        <Expand Handler="Store3.reload();" />
                    </Listeners>
                    <LoadMask ShowMask="true" />
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar3" runat="server" PageSize="50">
                            <Items>
                                <ext:Label ID="Label3" runat="server" Text="分页数:" />
                                <ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" Width="10" />
                                <ext:ComboBox ID="ComboBox3" runat="server" Width="80">
                                    <Items>
                                        <ext:ListItem Text="10" />
                                        <ext:ListItem Text="20" />
                                        <ext:ListItem Text="30" />
                                        <ext:ListItem Text="50" />
                                    </Items>
                                    <SelectedItem Value="50" />
                                    <Listeners>
                                        <Select Handler="#{PagingToolbar3}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GroupingView ID="GroupingView3" HideGroupedColumn="true" runat="server" ForceFit="true"
                            GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
                            GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">
                        </ext:GroupingView>
                    </View>
                </ext:GridPanel>
                <ext:GridPanel ID="GridPanel4" IDMode="Static" runat="server" Collapsible="true"
                    StripeRows="true" Title="会办跟踪" Icon="ClockPlay" AutoWidth="true" AutoExpandColumn="TaskTitel"
                    Hidden="true">
                    <Store>
                        <%--GroupField：分组的字段--%>
                        <ext:Store ID="Store4" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="false"
                            runat="server" GroupField="ShopName">
                            <Proxy>
                                <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader IDProperty="TaskId" TotalProperty="total" Root="data">
                                    <Fields>
                                        <%--任务ID--%>
                                        <ext:RecordField Name="TaskId" />
                                        <%--流程阶段--%>
                                        <ext:RecordField Name="FSname" />
                                        <%--门店名称--%>
                                        <ext:RecordField Name="ShopName" />
                                        <%--提交日期--%>
                                        <ext:RecordField Name="TaskBeginDate" />
                                        <%--任务名称--%>
                                        <ext:RecordField Name="TaskTitel" />
                                        <%--提交人--%>
                                        <ext:RecordField Name="UserName" />
                                        <%--审核人--%>
                                        <ext:RecordField Name="DealUserid" />
                                        <%--门店ID--%>
                                        <ext:RecordField Name="ObjectId" />
                                        <%--事件ID--%>
                                        <ext:RecordField Name="DriverId" />
                                        <%--阶段ID--%>
                                        <ext:RecordField Name="PhasesId">
                                        </ext:RecordField>
                                        <%--业务模板ID--%>
                                        <ext:RecordField Name="PTCode">
                                        </ext:RecordField>
                                        <%--文件类型ID--%>
                                        <ext:RecordField Name="FileTypeId" />
                                        <%--文件类型名称--%>
                                        <ext:RecordField Name="FileTypeName" />
                                        <%--<ext:RecordField Name="Remark" />--%>
                                        <ext:RecordField Name="ShopType" />
                                        <ext:RecordField Name="PNID" />
                                        <ext:RecordField Name="PTID" />
                                        <ext:RecordField Name="DriverPhasesid" />
                                        <ext:RecordField Name="overtimeflag" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <BaseParams>
                                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                <ext:Parameter Name="limit" Value="getPageSize4()" Mode="Raw" />
                                <ext:Parameter Name="type" Value="WillDoTracking" Mode="Value" />
                            </BaseParams>
                            <Listeners>
                                <Load Handler="GridPanel4.setTitle('会办跟踪<font style=color:green;font-weight:bolder;>（'+Store4.getTotalCount()+'）</font>'); " />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel IDMode="Static" ID="ColumnModel4" runat="server">
                        <Columns>
                            <ext:RowNumbererColumn />
                            <ext:Column Header="任务ID" Hidden="true" DataIndex="TaskId">
                            </ext:Column>
                            <ext:Column ColumnID="ShopName" Header="<font style='color:Silver;'>门店名称</font>"
                                DataIndex="ShopName" />
                            <ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel" />
                            <ext:Column ColumnID="FSname" Header="单据状态" DataIndex="FSname" />
                            <ext:Column Header="提交日期" DataIndex="TaskBeginDate" />
                            <ext:Column Header="会办人" DataIndex="UserName" />
                            <ext:Column Header="店铺类型" DataIndex="ShopType" />
                            <ext:Column Header="DriverId" Hidden="true" DataIndex="DriverId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="ObjectId" Hidden="true" DataIndex="ObjectId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeId" Hidden="true" DataIndex="FileTypeId" Hideable="false">
                            </ext:Column>
                            <ext:Column Header="FileTypeName" Hidden="true" DataIndex="FileTypeName" Hideable="false">
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel IDMode="Static" ID="RowSelectionModel4" runat="server" />
                    </SelectionModel>
                    <Listeners>
                        <Command Handler="ExcuteCommand(command,record);" />
                        <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);}" />
                        <Expand Handler="Store4.reload();" />
                    </Listeners>
                    <LoadMask ShowMask="true" />
                    <BottomBar>
                        <ext:PagingToolbar IDMode="Static" ID="PagingToolbar4" runat="server" PageSize="50">
                            <Items>
                                <ext:Label ID="Label4" runat="server" Text="分页数:" />
                                <ext:ToolbarSpacer ID="ToolbarSpacer4" IDMode="Static" runat="server" Width="10" />
                                <ext:ComboBox ID="ComboBox4" IDMode="Static" runat="server" Width="80">
                                    <Items>
                                        <ext:ListItem Text="10" />
                                        <ext:ListItem Text="20" />
                                        <ext:ListItem Text="30" />
                                        <ext:ListItem Text="50" />
                                    </Items>
                                    <SelectedItem Value="50" />
                                    <Listeners>
                                        <Select Handler="PagingToolbar4.pageSize = parseInt(this.getValue()); PagingToolbar4.doLoad();" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GroupingView ID="GroupingView4" IDMode="Static" HideGroupedColumn="true" runat="server"
                            ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
                            GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">
                        </ext:GroupingView>
                    </View>
                </ext:GridPanel>
                <ext:GridPanel ID="GridPanel5" IDMode="Static" runat="server" Collapsible="true" StripeRows="true"
                    Title="已办事务" Icon="ClockPause" AutoWidth="true" AutoExpandColumn="TaskTitel">
                    <Store>
                        <%--GroupField：分组的字段--%>
                        <ext:Store ID="Store5" IDMode="Static" ShowWarningOnFailure="false" AutoLoad="false" runat="server"
                            GroupField="ShopName">
                            <Proxy>
                                <ext:HttpProxy Method="POST" Url="/Ajax/Workbench.ashx" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader TotalProperty="total" Root="data">
                                    <Fields>
                                        <%--店铺名称--%>
                                        <ext:RecordField Name="ShopName" />
                                        <%--状态名称--%>
                                        <ext:RecordField Name="FSname" />
                                        <%--所属阶段--%>
                                        <ext:RecordField Name="PhasesName" />
                                        <%--任务创建日期--%>
                                        <ext:RecordField Name="TaskBeginDate" Type="Date" />
                                        <%--提交时间--%>
                                        <ext:RecordField Name="BeginDate" Type="Date" />
                                        <%--任务名称--%>
                                        <ext:RecordField Name="TaskTitel" />
                                        <%--提交人--%>
                                        <ext:RecordField Name="UserName" />
                                        <ext:RecordField Name="TaskEndDate" Type="Date" />
                                        <%--主持老师--%>
                                        <ext:RecordField Name="ShopkeeperName" />
                                        <%--处理时长--%>
                                        <ext:RecordField Name="DealHours" />
                                        <%--任务时长--%>
                                        <ext:RecordField Name="TaskHours" />
                                        <%--处理日期--%>
                                        <ext:RecordField Name="DealDate" Type="Date" />
                                        <%--批注--%>
                                        <ext:RecordField Name="Remark" />
                                        <%--处理动作ID--%>
                                        <ext:RecordField Name="DealFAID" />
                                        <%--动作名称--%>
                                        <ext:RecordField Name="FAName" />
                                        <%--处理状态--%>
                                        <ext:RecordField Name="DealFSID" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                            <BaseParams>
                                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                <ext:Parameter Name="limit" Value="getPageSize5()" Mode="Raw" />
                                <ext:Parameter Name="type" Value="AlreadyDoTask" Mode="Value" />
                            </BaseParams>
                            <Listeners>
                                <Load Handler="GridPanel5.setTitle('已办事项<font style=color:green;font-weight:bolder;>（'+Store5.getTotalCount()+'）</font>'); " />
                            </Listeners>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel5" runat="server">
                        <Columns>
                            <ext:RowNumbererColumn />
                            <ext:Column DataIndex="ShopName" Header="店铺名称" />
                            <ext:Column Header="任务名称" DataIndex="TaskTitel" />
                            <ext:Column Header="操作名称" DataIndex="FAName" />
                            <ext:Column Header="状态名称" DataIndex="FSname" />
                            <ext:Column Header="批注" DataIndex="Remark" />
                            <ext:DateColumn Header="处理开始时间" DataIndex="BeginDate" Width="109" Format="yy-MM-dd hh:mm:ss" />
                            <ext:DateColumn Header="处理结束时间" DataIndex="DealDate" Width="109" Format="yy-MM-dd hh:mm:ss" />
                            <ext:Column Header="处理时长（天）" DataIndex="DealHours" />
                            <ext:Column Header="提交人" DataIndex="UserName" />
                            <ext:DateColumn Header="任务创建时间" DataIndex="TaskBeginDate" Width="109" Format="yy-MM-dd hh:mm:ss" />
                            <ext:DateColumn Header="任务结束时间" DataIndex="TaskEndDate" Width="109" Format="yy-MM-dd hh:mm:ss" />
                            <ext:Column Header="任务时长（天）" DataIndex="TaskHours" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel5" runat="server" />
                    </SelectionModel>
                    <Listeners>
                        <Command Handler="ExcuteCommand(command,record);" />
                        <Expand Handler="Store5.reload();" />
                    </Listeners>
                    <LoadMask ShowMask="true" />
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar5" IDMode="Static" runat="server" PageSize="50">
                            <Items>
                                <ext:Label ID="Label5" runat="server" Text="分页数:" />
                                <ext:ToolbarSpacer ID="ToolbarSpacer5" runat="server" Width="10" />
                                <ext:ComboBox ID="ComboBox5" runat="server" Width="80">
                                    <Items>
                                        <ext:ListItem Text="10" />
                                        <ext:ListItem Text="20" />
                                        <ext:ListItem Text="30" />
                                        <ext:ListItem Text="50" />
                                    </Items>
                                    <SelectedItem Value="50" />
                                    <Listeners>
                                        <Select Handler="PagingToolbar5.pageSize = parseInt(this.getValue()); PagingToolbar5.doLoad();" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Items>
                        </ext:PagingToolbar>
                    </BottomBar>
                    <View>
                        <ext:GroupingView ID="GroupingView5" StartCollapsed="true" HideGroupedColumn="true"
                            runat="server" ForceFit="true" GroupTextTpl='{text} ({[values.rs.length]} {[values.rs.length > 1 ? "项" : "项"]})'
                            GroupByText="按当前列分组" ShowGroupsText="是否分组" EnableRowBody="true">
                        </ext:GroupingView>
                    </View>
                </ext:GridPanel>
            </Items>
        </ext:Panel>
    </Items>
    <Listeners>
        <AfterLayout Handler="var vHeight= #{Viewport1}.getHeight();
                                #{pnlView}.setHeight(vHeight);
                                vHeight=vHeight-60;
                                GridPanel1.setHeight(vHeight);
                                GridPanel3.setHeight(vHeight);
                                GridPanel4.setHeight(vHeight);
                                GridPanel2.setHeight(vHeight);
                                GridPanel6.setHeight(vHeight);
                                GridPanel5.setHeight(vHeight);
                                " />
    </Listeners>
</ext:Viewport>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
<Listeners>
    <AfterLayout Handler="var vHeight= #{Viewport1}.getHeight();
                            #{pnlView}.setHeight(vHeight);
                            vHeight=vHeight-60;
                            GridPanel1.setHeight(vHeight);
                            GridPanel3.setHeight(vHeight);
                            GridPanel4.setHeight(vHeight);
                            GridPanel2.setHeight(vHeight);
                            GridPanel6.setHeight(vHeight);
                            GridPanel5.setHeight(vHeight);
                            " />
</Listeners>

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

2）折叠面板：

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

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

GroupField属性：分组的字段。

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

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

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

Httphandler类部分代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/// 已办任务列表
/// </summary>
private void GetAlreadyDoTaskList()
{
    //设置JSON数据格式
    this.context.Response.ContentType = "text/json";
    TaskServices _ts = new TaskServices();
    var result = _ts.SelectTaskApproval();
    var pagingEmployees = new Paging<NewShopTaskList>(result, result.Count);
    var _json = JSON.Serialize(from e in pagingEmployees.Data
 
                               select new
                                          {
                                              e.TaskTitel,
                                              e.FSname,
                                              e.TaskBeginDate,
                                              e.TaskEndDate,
                                              e.TaskHours,
                                              e.UserName,
                                              e.BeginDate,
                                              e.ShopkeeperName,
                                              e.PhasesId,
                                              e.PhasesName,
                                              e.DealHours,
                                              e.DealDate,
                                              e.Remark,
                                              e.DealFAID,
                                              e.FAName,
                                              e.DealFSID,
                                              e.ShopName,
                                              e.PNID,
                                              e.PTID,
                                              e.overtimeflag
                                          });
    StoreResponseData sr = new StoreResponseData
                               {
                                   Total = pagingEmployees.TotalRecords,
                                   Data = _json
                               };
    sr.Return();
}

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

1
2
3
<Listeners>
    <Load Handler="#{GridPanel1}.setTitle('待处理事务<font style=color:green;font-weight:bolder;>（'+#{Store1}.getTotalCount()+'）</font>'); " />
</Listeners>

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

1
2
3
<ext:Column ColumnID="TaskTitel" Header="任务名称" DataIndex="TaskTitel">
    <Renderer Fn="setTitle" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>

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

6）设置命令。

先设置命令列（ImageCommandColumn）：

1
2
3
4
5
6
7
8
9
10
11
12
13
<ext:ImageCommandColumn Header="操作" DataIndex="FileTypeName">
    <Commands>
        <ext:ImageCommand CommandName="View" Icon="TableEdit" />
    </Commands>
    <PrepareCommand Fn="prepareCommand" />
</ext:ImageCommandColumn>
<ext:ImageCommandColumn Header="审批历史">
    <Commands>
        <ext:ImageCommand CommandName="ExamineList" Icon="ApplicationViewList" Text="审批历史">
            <ToolTip Text="审批历史" />
        </ext:ImageCommand>
    </Commands>
</ext:ImageCommandColumn>

然后设置GridPanel的Listeners属性。

1
2
3
4
5
<Listeners>
    <Command Handler="ExcuteCommand(command,record);" />
    <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);}" />
    <Expand Handler="#{Store1}.reload();" />
</Listeners>

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

<SelectionModel> 
    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server"> 
        <Listeners> 
            <%--<Render Fn="checkboxSelectionRenderer" />--%> 
            <BeforeRowSelect Fn="checkboxBeforerowselect" /> 
        </Listeners> 
    </ext:CheckboxSelectionModel> 
</SelectionModel>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ResourceManager1.BuildAllPrivilegesForExtNET();
        //获取当前用户的登陆信息
        UserService userServices = new UserService();
        UserInfo userinfo = userServices.SelectUserbySharePointId();
        using (NBShopDataContext _db = new NBShopDataContext())
        {
            //获取操作Code列表
            var _FACodeLst = _db.SelectFacodeForTasklist(userinfo.UserId).ToList();
            if (_FACodeLst != null && _FACodeLst.Count > 0)
            {
                Toolbar1.Items.Clear();
                tbButtons.Items.Clear();
                foreach (var item in _FACodeLst)
                {
                    //转换成操作枚举
                    FACodeEnum _face = (FACodeEnum)System.Enum.Parse(typeof(FACodeEnum), item.facode);
                    switch (_face)
                    {
                        #region 取消
                        //取消
                        case FACodeEnum.Cancel:
                            SetButton(Icon.Cancel, "取消", FACodeEnum.Cancel, Toolbar1, "GridPanel1");
                            SetButton(Icon.Cancel, "取消", FACodeEnum.Cancel, tbButtons,"GridPanel6");
                            break;
                        #endregion
                        #region 保存
                        //保存
                        case FACodeEnum.Save:
                            SetButton(Icon.PageSave, "保存", FACodeEnum.Save, Toolbar1, "GridPanel1");
                            SetButton(Icon.PageSave, "保存", FACodeEnum.Save, tbButtons, "GridPanel6");
                            break;
                        #endregion
                        case FACodeEnum.New:
                            break;
                        #region 退回
                        //退回
                        case FACodeEnum.Reject:
                            SetButton(Icon.PageBack, "退回", FACodeEnum.Reject, Toolbar1, "GridPanel1");
                            SetButton(Icon.PageBack, "退回", FACodeEnum.Reject, tbButtons, "GridPanel6");
                            break;
                        #endregion
                        #region 等待
                        //等待
                        case FACodeEnum.Wait:
                            SetButton(Icon.PackageGo, "等待", FACodeEnum.Wait, Toolbar1, "GridPanel1");
                            SetButton(Icon.PackageGo, "等待", FACodeEnum.Wait, tbButtons, "GridPanel6");
                            break;
                        #endregion
                        #region 通知
                        //通知
                        case FACodeEnum.Notice:
                            SetButton(Icon.NoteGo, "通知", FACodeEnum.Notice, Toolbar1, "GridPanel1");
                            SetButton(Icon.NoteGo, "通知", FACodeEnum.Notice, tbButtons, "GridPanel6");
                            break;
                        #endregion
                        //编辑
                        case FACodeEnum.Edit:
                            break;
                        #region 提交
                        //提交
                        case FACodeEnum.Submit:
                            SetButton(Icon.PageAdd, "提交", FACodeEnum.Submit, Toolbar1, "GridPanel1");
                            SetButton(Icon.PageAdd, "提交", FACodeEnum.Submit, tbButtons, "GridPanel6");
                            break;
                        #endregion
                        #region 同意
                        //同意
                        case FACodeEnum.Approve:
                            SetButton(Icon.Accept, "同意", FACodeEnum.Approve, Toolbar1, "GridPanel1");
                            SetButton(Icon.PageAdd, "同意", FACodeEnum.Approve, tbButtons, "GridPanel6");
                            break;
                        #endregion
                        default:
                            break;
                    }
                }
            }
        }
        //TODO:后期改为有数据则显示，无数据不显示
        if (userinfo.RoleCode == "Signingmember")
        {
            Store4.AutoLoad = true;
            GridPanel4.Hidden = false;
        }
 
    }
}
 
/// <summary>
/// 向工具条添加按钮
/// </summary>
/// <param name="icon">图标</param>
/// <param name="text">文本</param>
/// <param name="facode">操作Code</param>
/// <param name="toolbar">工具条</param>
/// <param name="_panelName">容器ID</param>
private static void SetButton(Icon icon, string text, FACodeEnum facode, Toolbar toolbar, string _panelName)
{
    if (toolbar == null) throw new ArgumentNullException("toolbar");
    var _btn = new Ext.Net.Button
                  {
                      Icon = icon,
                      Text = text,
                      Listeners =
                          {
                              Click =
                                  {
                                      Handler =
                                          string.Format("toExcuteOperations(#{{{0}}}.getSelectionModel().getSelections(),'{1}');", _panelName, facode.ToString())
                                  }
                          }
                  };
    //设置Click事件的Handler，用于操作所选项。操作参数（所选记录集、操作Code）
    if (toolbar.Items.Count > 0)
        toolbar.Items.Add(new ToolbarSeparator());
    toolbar.Items.Add(_btn);
}

9）底部分页工具条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<BottomBar>
    <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="50">
        <Items>
            <ext:Label ID="Label1" runat="server" Text="分页数:" />
            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
            <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                <Items>
                    <ext:ListItem Text="10" />
                    <ext:ListItem Text="20" />
                    <ext:ListItem Text="30" />
                    <ext:ListItem Text="50" />
                </Items>
                <SelectedItem Value="50" />
                <Listeners>
                    <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
                </Listeners>
            </ext:ComboBox>
        </Items>
    </ext:PagingToolbar>
</BottomBar>
1
注意“#{PagingToolbar1}”。在EXT.NET里面，所有的Listeners事件都有Handler属性。在Handler属性里面写脚本，可以使用"#{ID}"来获取控件的客户端ID，
1
这里没有设置IDMode="Static"，所以当放置在用户控件或者母版页中的时候，会添加很多前缀，导致JS执行出错。
1
<strong>10）视图。这里用的是组视图（GroupingView）。如：</strong>

<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）展开时刷新数据。

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

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

http://dev.sencha.com/deploy/ext-4.0.2a/examples/index.html（ExtJS示例）

http://docs.sencha.com/ext-js/4-0/（ExtJS API。仅供参考，嘿嘿，因为EXT.NET使用的Ext版本还比较低）

http://www.ext.net（Ext.NET）

http://examples.ext.net/（Ext.NET示例）

Ext.net的更多相关文章

  1. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  2. sencha ext js 6 入门

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...

  3. Ext JS - 问答

    Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...

  4. Ext动态加载Toolbar

    在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...

  5. Ext分页实现(前台与后台)

    Ext分页实现(前台与后台)Spring+Mybatis 一.项目背景 关于Ext的分页网上有很多博客都有提到,但是作为Ext新手来说,并不能很容易的在自己的项目中得以应用.因为,大多数教程以及博客基 ...

  6. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

  7. [转]extjs grid的Ext.grid.CheckboxSelectionModel默认选中解决方法

    原文地址:http://379548695.iteye.com/blog/1167234 grid的复选框定义如下:   var sm = new Ext.grid.CheckboxSelection ...

  8. Ext.js细节:在MVC中处理Widget Column，GetCmp和ComponentQuery， Id和ItemId

    针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...

  9. 2017年第1贴：EXT.JS使用MVC模式时，注意如何协调MODEL, STORE,VIEW,CONTROLLER的关系

    也调了快一天,死活找不到窍门. MODEL, STORE,VIEW的调置测试了很久,试了N种方法,不得其果. 最后,试着在APPLICATION里加入CONTROLLER, 在CONTROLLER里加 ...

  10. EXT.NET 使用总结（3）--动态图表

    动态生成雷达图--Radar 效果图: aspx页面代码: <ext:Panel ID="ResultPanel" Border="true" runat ...

随机推荐

  1. XTU 1242 Yada Number 容斥

    Yada Number Problem Description: Every positive integer can be expressed by multiplication of prime ...

  2. 【Tyvj】1473校门外的树3 线段树/树状数组 <区间修改+单点访问>

    描述  校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的……如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作:K=1,读入l,r表示在l ...

  3. 使用Spring的jdbcTemplate进一步简化JDBC操作

    先看applicationContext.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <b ...

  4. Memcached GUI工具

    1, http://www.junopen.com/memadmin/   或 https://github.com/junstor/memadmin 帐号和密码都是:admin 在左下的数据读取里面 ...

  5. json学习系列（6）JSONObject和JSONArray是JDK的集合部分延伸

    我一直觉得JSONObject和JSONArray是JDK集合部分的延伸,它们与JDK的List和Map一脉相承.通过研究JSONObject和JSONArray的结构,我们顺便也复习一下JDK的内容 ...

  6. DFS(剪枝) POJ 1724 ROADS

    题目传送门 题意:问从1到n的最短路径,同时满足花费总值小于等于k 分析:深搜+剪枝,如果之前走过该点或者此时的路劲长度大于最小值就不进行搜索. /************************** ...

  7. Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后使用 ObjectContext对象

    Visual Studio 2013 EF5实体数据模型 EDMX 使用 T4模板生成后的继承对象为DbContext,以前的熟悉的ObjectContext对象不见了,当然使用ObjectConte ...

  8. 打包apk

    apk 配置环境变量 打开"终端",输入"pico .bash_profile"命令 export ANDROID_SDK_ROOT=/Users/sun/Do ...

  9. 洛谷 P1147 连续自然数和 Label:等差数列

    题目描述 对一个给定的自然数M,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为M. 例子:1998+1999+2000+2001+2002 = 10000,所以从1998到2002的一个 ...

  10. 【BZOJ】1180: [CROATIAN2009]OTOCI & 2843: 极地旅行社（lct）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1180 今天状态怎么这么不好..................................... ...