Pager save state - xpages

Question

I am using this Ext Lib (8.5.2) custom controls viewpanel, pager save state and dyanmic content. Does pager save state works with View panel.
If yes, pls look at my code here. I do not know why it is not working.
I am in the learning curve of xpages.
Thank you in advance.
Jason
This my custom control
<xe:pagerSaveState id="pagerSaveState1" globalRows="true"
for="viewPanel1">
</xe:pagerSaveState>
<xp:this.resources>
<xp:styleSheet href="/tablelayout.css"></xp:styleSheet>
</xp:this.resources>
<xe:dynamicContent id="dynContent" defaultFacet="viewpnl"
useHash="true">
<xe:this.facets>
<xp:panel xp:key="viewpnl" id="viewpnl">
<xp:viewPanel rows="30" id="viewPanel1" var="rowData"
columnClasses="evencol,oddcol" rowClasses="evenrow,oddrow"
binding="#{javascript:viewStateBean.restoreState}">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1"
categoryFilter="#{javascript:sessionScope.searchValue}"
expandLevel="1" viewName="#{javascript:viewScope.vName}">
</xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="Urgency" id="viewColumn1"
expandedImage="/Collapse+Icon" collapsedImage="/Expand+Icon">
<xp:viewColumnHeader value="Urgency" id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="From1" id="viewColumn2"
displayAs="link">
<xp:viewColumnHeader value="From" id="viewColumnHeader2">
</xp:viewColumnHeader>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:executeScript
script="#{javascript:viewScope.docUnid = rowData.getNoteID();}">
</xp:executeScript>
<xe:changeDynamicContentAction
facetName="form1" for="dynContent">
</xe:changeDynamicContentAction>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:viewColumn>
<xp:viewColumn columnName="SubDateTime" id="viewColumn3">
<xp:this.converter>
<xp:convertDateTime type="both" timeStyle="short">
</xp:convertDateTime>
</xp:this.converter>
<xp:viewColumnHeader value="Time of Call" id="viewColumnHeader3">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Category" id="viewColumn4">
<xp:viewColumnHeader value="Category" id="viewColumnHeader4">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="JobStatus" id="viewColumn5">
<xp:viewColumnHeader value="Status" id="viewColumnHeader5">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn id="viewColumn6">
<xp:this.value><![CDATA[#{javascript:if (rowData.isCategory()){return rowData.getColumnValue("Total")
}}]]></xp:this.value>
<xp:this.converter>
<xp:convertNumber type="number" integerOnly="true">
</xp:convertNumber>
</xp:this.converter>
<xp:viewColumnHeader id="viewColumnHeader6"
value="Total">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
</xp:panel>
<xc:xp_serviceRequestform xp:key="form1"></xc:xp_serviceRequestform>
</xe:this.facets>
</xe:dynamicContent>
This is the form cancel button
<xp:button value="Cancel" id="cancelbut">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" immediate="true" save="false">
<xp:this.action>
<xp:actionGroup>
<xe:changeDynamicContentAction
facetName="viewpnl" for="dynContent">
</xe:changeDynamicContentAction>
<xp:executeScript
script="#{javascript:viewStateBean.restoreState = true}">
</xp:executeScript>
</xp:actionGroup>
</xp:this.action></xp:eventHandler>