Ext.net

.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>

下面就一一说明这些JS函数：

<strong>ShowWin：打开一个新的带关闭按钮、最大化、最小化的模式窗口。listeners里面添加了beforedestroy事件，该事件在窗口关闭时触发。</strong>

<strong>“<%=Store1.ClientID %>.reload();”用于刷新“待处理事务”的数据。当服务器控件放在用户控件或者母版页里面时，注意使用服务器标记来获取客户端ID。</strong>

<strong>toExcuteOperations：封装在另外的JS文件里，用于处理每项事务，由于代码量多，就不贴出来了。</strong>

<strong>updateStore：更新数据。有的控件设置了<em>IDMode="Static"，</em>故可以直接使用控件的服务器ID来获取对象。</strong>

<strong>ExcuteCommand：执行命令。当为View时，打开相应的窗口。</strong>

<strong>getPageSize1：获取分页数。</strong>

<strong>checkboxBeforerowselect：在选择行首的复选框时的判断。即在某种情况下不可选。</strong>

<strong>setTitle：设置列显示的html。这里是当overtimeflag为1时，该行该列的数据加粗变红。引用地方如下：</strong>

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

<strong>（三）然后，就需要编写页面代码了。先贴出代码：</strong>

<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很方便。接下来再看下面的配置：

<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）折叠面板：

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

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

GroupField属性：分组的字段。

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

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

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

Httphandler类部分代码如下：

/// 已办任务列表
/// </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的标题以及记录总数。

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

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

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

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

6）设置命令。

先设置命令列（ImageCommandColumn）：

<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属性。

<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属性用于设置GridPanel的选择模型，有行选择、复选框选择等模型。这里的checkboxBeforerowselect函数已经介绍过，就不赘述了。

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

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）底部分页工具条。

<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>

注意“#{PagingToolbar1}”。在EXT.NET里面，所有的Listeners事件都有Handler属性。在Handler属性里面写脚本，可以使用"#{ID}"来获取控件的客户端ID，

这里没有设置IDMode="Static"，所以当放置在用户控件或者母版页中的时候，会添加很多前缀，导致JS执行出错。

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

<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示例）

相关阅读:
poj3348 Cow
poj3348 Cow
日常。。。强行续
 日常。。。又又续
 日常。。。又又续
 日常。。。又续
 内存检索
 MyLayer MyScene
冒泡排序
 Array数组的排序与二分查字法
原文地址：https://www.cnblogs.com/jinhaoObject/p/4433654.html