Dec 04, 2014, 4:20 AM
GridPanel Filter Header
I am working on grid filter but it is giving error that 'div is not defined', after giving error of javascript page does not open. below are the code of it.
Error
ReferenceError: div is not defined
...(var jj=0;jj<c2.length;jj++){col=c2[jj],div;if(!Ext.isEmpty(col.component)){div=...
Javascript coded
Error
ReferenceError: div is not defined
...(var jj=0;jj<c2.length;jj++){col=c2[jj],div;if(!Ext.isEmpty(col.component)){div=...
Javascript coded
var applyFilter = function (field) {
var store = #{grdEmpType}.getStore();
store.suspendEvents();
store.filterBy(getRecordFilter());
store.resumeEvents();
#{grdEmpType}.getView().refresh(false);
};
var clearFilter = function () {
#{TextField2}.reset();
#{PriceFilter}.reset();
#{ChangeFilter}.reset();
#{PctChangeFilter}.reset();
#{LastChangeFilter}.reset();
#{Store1}.clearFilter();
}
var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (typeof val != "string") {
return value.length == 0;
}
return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};
var filterDate = function (value, dataIndex, record) {
var val = record.get(dataIndex).clearTime(true).getTime();
if (!Ext.isEmpty(value, false) && val != value.clearTime(true).getTime()) {
return false;
}
return true;
};
var filterNumber = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (!Ext.isEmpty(value, false) && val != value) {
return false;
}
return true;
};
var getRecordFilter = function () {
var f = [];
f.push({
filter: function (record) {
return filterString(#{TextField2}.getValue(), "DecisionNo", record);
}
});
f.push({
filter: function (record) {
return filterNumber(#{PriceFilter}.getValue(), "DecisionDateHijri", record);
}
});
f.push({
filter: function (record) {
return filterNumber(#{ChangeFilter}.getValue(), "DecisionDate", record);
}
});
f.push({
filter: function (record) {
return filterNumber(#{PctChangeFilter}.getValue(), "DecisionYear", record);
}
});
f.push({
filter: function (record) {
return filterDate(#{LastChangeFilter}.getValue(), "EmployeeIdcode", record);
}
});
var len = f.length;
return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};<ext:Viewport ID="ViewPort1" runat="server" Layout="fit">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North MarginsSummary="0 0 0 0">
<ext:Panel runat="server" Height="70" ID="pnlDetails" Title="Decision Letter" Split="true">
<Items>
<ext:CompositeField ID="CompositeField5" runat="server" AnchorVertical="0%" AnchorHorizontal="100%" StyleSpec="padding-top:2px;">
<Content>
<table>
<tr>
<td >
<ext:ComboBox ID="cmbDecisionDetailemp" LabelAlign="left" runat="server" DisplayField="DecisionDate_Hijri"
ValueField="DecisionDate_Hijri" TypeAhead="false" LoadingText="Searching..." Width="200"
PageSize="10" HideTrigger="false" LabelWidth="75" StoreID="dsDecisionMaster" ItemSelector="tr.list-item" MinChars="1" IDMode="Explicit"
ListWidth="220" FieldLabel="Year" ForceSelection="False" LabelStyle=" font-size: 11px; font-family: Arial;" >
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
<tpl if="[xindex] == 1">
<table class="cbStates-list">
<tr>
<td><b>Decision Year </b></td>
<%-- <td><b>Position</b></td>--%>
</tr>
</tpl>
<tr class="list-item">
<td>{DecisionDate_Hijri}</td>
<%--<td>{DecisionByPosition}</td>--%>
</tr>
<tpl if="[xcount-xindex]==0">
</table>
</tpl>
</tpl>
</Html>
</Template>
<Listeners>
<Select Fn="cmbDecisionMast_Select" />
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
</ext:ComboBox>
</td>
</tr>
</table>
</Content>
</ext:CompositeField>
</Items>
<Listeners>
<BeforeRender Fn="getName" />
</Listeners>
</ext:Panel>
</North>
<Center>
<ext:Panel ID="pnlMain" runat="server" Title="Decisions" Layout="Fit">
<Items>
<ext:GridPanel ID="grdEmpType" IDMode="Explicit" Layout="Fit" runat="server" Header="true" AutoDataBind="true"
Border="false" TrackMouseOver="true">
<Store>
<ext:Store ID="dsEmpType" IDMode="Explicit" AutoLoad="true" runat="server" RemoteSort="true"
UseIdConfirmation="true" WarningOnDirty="true" RefreshAfterSaving="None" ShowWarningOnFailure="False">
<Proxy>
<ext:HttpProxy Url="~/Hrs/GetDecisionSetup/" />
</Proxy>
<UpdateProxy>
<ext:HttpWriteProxy Url="~/Hrs/SaveOrUpdateDecisions/" />
</UpdateProxy>
<Reader>
<ext:JsonReader IDProperty="DecisionId" Root="data" TotalProperty="total">
<Fields>
<ext:RecordField Name="DecisionId" />
<ext:RecordField Name="DecisionNo" SortDir="ASC" />
<ext:RecordField Name="DecisionYear" />
<ext:RecordField Name="DecisionDate" Type="Date" SortDir="DESC"/>
<ext:RecordField Name="DecisionDateHijri" />
<ext:RecordField Name="EmployeeId" />
<ext:RecordField Name="EmployeeName" />
<ext:RecordField Name="FirstMiddleFamilyName" />
<ext:RecordField Name="Initials" />
<ext:RecordField Name="Remarks" />
<ext:RecordField Name="PositionId" />
<ext:RecordField Name="Position" />
<ext:RecordField Name="JobAssignedPositionId" />
<ext:RecordField Name="JobAssignedPosition" />
<ext:RecordField Name="AssignedPositionActive">
<Convert Handler="return ToBoolean(value);" />
</ext:RecordField>
<ext:RecordField Name="PreparedBy" />
<ext:RecordField Name="PreparedOn" />
<ext:RecordField Name="AuthorizedBy" />
<ext:RecordField Name="AuthorizedOn" />
<ext:RecordField Name="DecisionBase">
<Convert Handler="return ToBoolean(value);" />
</ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="DecisionId" Value="" Mode="Value" />
<ext:Parameter Name="userCrit" Value="HRS_S174" Mode="Value" />
<ext:Parameter Name="year" Value="v_year" Mode="Raw" />
<ext:Parameter Name="limit" Value="20" Mode="Raw" />
<ext:Parameter Name="start" Value="setStart" Mode="Raw" />
<ext:Parameter Name="dir" Value="DESC" />
<ext:Parameter Name="sort" Value="DecisionId" />
</BaseParams>
<SortInfo Field="DecisionId" Direction="DESC" />
<Listeners>
<Load Fn="isViewRights" />
<Save Fn="RecordSaved" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<%--<ext:Column ColumnID="DecisionId" DataIndex="DecisionId" Header="ID">
</ext:Column>--%>
<ext:Column ColumnID="DecisionNo" DataIndex="DecisionNo" Header="Decision No" Width="80px">
<Editor>
<ext:TextField ID="TextField1" MaxLength="10" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ColumnID="DecisionDateHijri" DataIndex="DecisionDateHijri" Header="Decision Date H"
Width="100px">
<%--<Renderer Fn="Date_Renderer" />--%>
<Editor>
<ext:TextField runat="server" ID="txtDecisionDateHijri" Format="dd-mm-yyyy" IDMode="Explicit" MaxLength="10" MinLength="10" AllowBlank="false">
<Listeners>
<%-- <Change Fn="HijriToGeorgian_DDH" /> --%>
<Change Handler = "HijriToGeorgian(this,#{txtDecisionDate});#{txtDecisionYear}.setValue(#{txtDecisionDateHijri}.getValue().split('-')[2]);" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="DecisionDate" DataIndex="DecisionDate" Header="Decision Date G"
Width="110px">
<%--<Renderer Fn="Date_Renderer" />--%>
<Renderer Fn="DecisionDateRenderer" />
<Editor>
<ext:DateField runat="server" ID="txtDecisionDate" Format="dd-MM-yyyy" IDMode="Explicit" AllowBlank="false">
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
<Listeners>
<Select Fn="GeorgianToHijri_DDG" />
<Blur Handler = "GeorgianToHijri(this,#{txtDecisionDateHijri})" />
</Listeners>
</ext:DateField>
</Editor>
</ext:Column>
<ext:Column ColumnID="DecisionYear" DataIndex="DecisionYear" Header="Year" Width="50px">
<Editor>
<ext:TextField ID="txtDecisionYear" MaxLength="4" runat="server" ReadOnly="true" Disabled="true" />
</Editor>
</ext:Column>
<%-- amir --%>
<ext:Column Align="Left" ColumnID="EmployeeIdcode" DataIndex="EmployeeId" Header="Id"
Width="80px" >
</ext:Column>
<ext:Column Align="Left" ColumnID="EmployeeId" DataIndex="EmployeeId" Header="Decision By" Width="150px" >
<Renderer Fn="RendererEmployeeId" />
<Editor>
<ext:ComboBox ID="ComboInterviewerId" runat="server" DisplayField="FirstMiddleFamilyName"
ValueField="EmployeeId" LoadingText="Searching..." ListWidth="450" PageSize="10"
HideTrigger="false" ItemSelector="tr.list-item" IDMode="Explicit" MinChars="1" >
<Template ID="Template2" runat="server">
<Html>
<tpl for=".">
<tpl if="[xindex] == 1">
<table class="cbStates-list">
<tr>
<td width="60"><b>Employee ID</b></td>
<td width="100"><b>Employee Name</b></td>
<td width="100"><b>Position</b></td>
<td width="100"><b>Assigned Position</b></td>
</tr>
</tpl>
<tr class="list-item">
<td width="60" >{EmployeeId}</td>
<td width="100" >{FirstMiddleFamilyName}</td>
<td width="100">{Position}</td>
<td width="100">{JobAssignedPosition}</td>
</tr>
<tpl if="[xcount-xindex]==0">
</table>
</tpl>
</tpl>
</Html>
</Template>
<Store>
<ext:Store ID="dsEmployeePersonnel" runat="server" ShowWarningOnFailure="true" AutoLoad="true"
IDMode="Explicit">
<Proxy>
<%-- <ext:HttpProxy Url="~/Hrs/GetEmployeePersonnel/" />--%>
<ext:HttpProxy Url="~/Hrs/GetEmployeePersonnelCtrl/" />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="EmployeeId" Root="data" TotalProperty="total">
<Fields>
<ext:RecordField Name="EmployeeId" />
<ext:RecordField Name="FirstName" />
<ext:RecordField Name="MiddleName" />
<ext:RecordField Name="LastName" />
<ext:RecordField Name="EmployeeName" />
<ext:RecordField Name="FirstMiddleFamilyName" />
<ext:RecordField Name="Initials" />
<ext:RecordField Name="CNIC" />
<ext:RecordField Name="GradeId" />
<ext:RecordField Name="GeoLocLocationId" />
<ext:RecordField Name="FirstNameArabic" />
<ext:RecordField Name="FatherArabic" />
<ext:RecordField Name="GrandArabic" />
<ext:RecordField Name="FamilyNameArabic" />
<ext:RecordField Name="FullArabicName" />
<ext:RecordField Name="EmployeeArabicName" />
<ext:RecordField Name="PositionId" />
<ext:RecordField Name="Position" />
<ext:RecordField Name="JobAssignedPositionId" />
<ext:RecordField Name="JobAssignedPosition" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="employeeName" Value="getEmpName()" Mode="Raw" />
<ext:Parameter Name="excludeStoppedEmployees" Value="true" Mode="Raw" />
<ext:Parameter Name="decisionAuthority" Value="Y" Mode="Value" />
<ext:Parameter Name="limit" Value="15" Mode="Raw" />
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="dir" Value="ASC" />
<ext:Parameter Name="sort" Value="EmployeeId" />
</BaseParams>
</ext:Store>
</Store>
<Listeners>
<Blur Fn="ComboInterviewerId_Blur" />
<Select Fn="ComboInterviewerId_Select" />
<Valid Fn="ComboInterviewerId_Valid" />
<Change Handler="#{ComboInterviewerId}.lastQuery=''; #{dsEmployeePersonnel}.reload(); " />
<%-- <Change Fn="validateSelectEmployee" /> --%>
<%--<Invalid Handler="#{ComboInterviewerId}.collapse();" />--%>
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ColumnID="Position" DataIndex="Position" Header="Position" Width="120px">
<Editor>
<ext:TextField ID="txtPosition" runat="server" Disabled="true" >
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="JobAssignedPosition" DataIndex="JobAssignedPosition" Header="Assigned Position" Width="120px">
<Editor>
<ext:TextField ID="txtJobAssignedPosition" runat="server" Disabled="true">
</ext:TextField>
</Editor>
</ext:Column>
<ext:BooleanColumn ColumnID="AssignedPositionActive" DataIndex="AssignedPositionActive" Header="Assigned Position Active" FalseText="No" TrueText="Yes" Width="140" >
<Editor>
<ext:Checkbox ID="chkAssignedPositionActive" runat="server" Style="margin-right: 10px;" Checked="false" Disabled="true"/>
</Editor>
</ext:BooleanColumn>
<ext:BooleanColumn ColumnID="DecisionBase" DataIndex="DecisionBase" Header="Decision Base" FalseText="No" TrueText="Yes" Width="100">
<Editor>
<ext:Checkbox ID="chkDecisionBase" Disabled="true" runat="server" Style="margin-right: 10px;"/>
</Editor>
</ext:BooleanColumn>
<ext:Column ColumnID="Remarks" DataIndex="Remarks" Header="Remarks" Width="200px">
<Editor>
<ext:TextField ID="txtRemarks" runat="server" MaxLength="2000" >
<Listeners>
<Focus Fn="txtRemarks_Focus" />
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="PositionId" DataIndex="PositionId" Width="0px" Css="color:white;">
<Editor>
<ext:TextField ID="txtPositionId" runat="server" Disabled="true">
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="JobAssignedPositionId" DataIndex="JobAssignedPositionId" Width="0px" Css="color:white;">
<Editor>
<ext:TextField ID="txtJobAssignedPositionId" runat="server" Disabled="true" >
</ext:TextField>
</Editor>
</ext:Column>
<ext:CommandColumn Width="80">
<Commands>
<ext:GridCommand CommandName="delete" Icon="Delete" Hidden="true">
<ToolTip Text="Delete" />
</ext:GridCommand>
<ext:GridCommand CommandName="edit" Icon="NoteEdit" Hidden="true">
<ToolTip Text="Edit" />
</ext:GridCommand>
<ext:GridCommand CommandName="authorize" Hidden="true" Icon="UserTick">
<ToolTip Text="Authorize" />
</ext:GridCommand>
<ext:GridCommand CommandName="amend" Hidden="true" Icon="LockBreak">
<ToolTip Text="Amend" />
</ext:GridCommand>
</Commands>
<PrepareToolbar Handler="toolbar.setVisible(!record.newRecord); toolbarHandler(toolbar); toolbarNewHandler(toolbar,record);" />
</ext:CommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" StandardHeaderRow="true">
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="TextField2" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="PriceFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="ChangeFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="PctChangeFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="LastChangeFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="EmployeeIdFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="PositionFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="JobAssignedPositionFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="AssignedPositionActiveFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="DecisionBaseFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="RemarksFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="PositionIdFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="JobAssignedPositionIdFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter(this);" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false">
<Component>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="clearFilter(null);" />
</Listeners>
</ext:Button>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnAdd" Hidden="true" runat="server" Text="Add" Icon="Add">
<Listeners>
<Click Handler="#{btnAdd}.disable();addmodedetect=1;#{grdEmpType}.insertRecord(0, {}); #{grdEmpType}.getView().focusRow(0); #{grdEmpType}.getRowEditor().startEditing(0);isAdd=true;isDelete=false; #{chkDecisionBase}.setValue(true);" />
</Listeners>
</ext:Button>
<ext:Button ID="btnReject" Hidden="true" runat="server" Text="Reject Changes" Icon="ArrowUndo">
<Listeners>
<Click Fn="rejectChanges" />
</Listeners>
</ext:Button>
<ext:TextField ID="txtSearch" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyDown Fn="ClickSearch" />
</Listeners>
</ext:TextField>
<ext:Button ID="btnSearch" OnClientClick="LoadUserRights" runat="server" Icon="Add" Text="Search">
<Listeners>
<Click Fn="LoadUserRights" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Plugins>
<ext:RowEditor ID="grdRowEditor" runat="server" ErrorSummary="false">
<Listeners>
<CancelEdit Fn="CancelEditButtonClick" />
<AfterEdit Fn="editorSaveButtonClick" />
</Listeners>
</ext:RowEditor>
</Plugins>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" IDMode="Explicit" runat="server" PageSize="20" />
</BottomBar>
<Listeners>
<BeforeRender Fn="getName" />
<Command Fn="commandHandler" />
<RowClick Fn="gridPanelRowClick" />
</Listeners>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
</ext:GridPanel>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
