Aug 10, 2010, 2:12 PM
[CLOSED] Missing filter column using MultiHeader Filter.
I have the following code to use a grid with MultiHeader filter. My problem is that it does not show the filter for DESCRIPTIONFilter when the page is loaded.
Could you tell me please what I am doing wrong?
Could you tell me please what I am doing wrong?
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var applyFilter = function () {
#{StoreHotTopics}.filterBy(getRecordFilter());
};
var clearFilter = function () {
#{DESCRIPTIONFilter}.reset();
#{STARTDATEFilter}.reset();
#{ENDDATEFilter}.reset();
#{DISPLAYORDERFilter}.reset();
#{ACTIVEFilter}.reset();
#{StoreHotTopics}.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(#{DESCRIPTIONFilter}.getValue(), 'DESCRIPTION', record);
}
});
f.push({
filter: function (record) {
return filterDate(#{STARTDATEFilter}.getValue(), 'STARTDATE', record);
}
});
f.push({
filter: function (record) {
return filterDate(#{ENDDATEFilter}.getValue(), 'ENDDATE', record);
}
});
f.push({
filter: function (record) {
return filterNumber(#{DISPLAYORDERFilter}.getValue(), 'DISPLAYORDER', record);
}
});
f.push({
filter: function (record) {
return filterString(#{ACTIVEFilter}.getValue(), 'ACTIVE', record);
}
});
var len = f.length;
return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>
</ext:XScript>
<ext:Store ID="StoreHotTopics" runat="server" DataSourceID="ObjectDataSourceHotTopics"
OnBeforeRecordInserted="StoreHotTopics_BeforeRecordInserted"
OnAfterRecordInserted="StoreHotTopics_AfterRecordInserted"
ShowWarningOnFailure="false"
OnAfterDirectEvent="StoreHotTopics_AfterDirectEvent"
OnBeforeDirectEvent="StoreHotTopics_BeforeDirectEvent"
>
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="ID"/>
<ext:RecordField Name="DESCRIPTION"/>
<ext:RecordField Name="CULTURE"/>
<ext:RecordField Name="STARTDATE" Type="Date"/>
<ext:RecordField Name="ENDDATE" Type="Date"/>
<ext:RecordField Name="DISPLAYORDER" Type="Int"/>
<ext:RecordField Name="ACTIVE" Type="Boolean"/>
</Fields>
</ext:JsonReader>
</Reader>
<AutoLoadParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="14" Mode="Raw" />
</AutoLoadParams>
</ext:Store>
<ext:Panel ID="TabPanelHotTopics" runat="server" Height="500px" Title="Hot Topics"
Cls="panelTabGroupContainer" Border="false" EnableViewState="true">
<Content>
<ext:GridPanel ID="GridPanelHotTopics" runat="server" Height="400px" Width="666px" Title="Hot Topics"
StoreID="StoreHotTopics" Cls="formGroupListing" BodyCssClass="formContentGroupListing"
Border="false">
<TopBar>
<ext:Toolbar ID="ToolbarGridPanelHotTopics" runat="server"
>
<Items>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" MaxWidth="20px" />
<ext:Button ID="Button1" runat="server"
Text="<%$ Resources:Resource, btnSave %>"
Icon="Disk" Cls="btnMenuGroupListing">
<Listeners>
<Click Handler="#{GridPanelHotTopics}.save();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnDeleteHotTopic" runat="server" Text="<%$ Resources:Resource, btnDelete %>"
Icon="Delete">
<Listeners>
<Click Handler="#{GridPanelHotTopics}.deleteSelected();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnInsertHotTopic" runat="server" Text="<%$ Resources:Resource, btnInsert %>" Icon="Add">
<Listeners>
<Click CausesValidation="true" Handler="#{GridPanelHotTopics}.insertRecord(0, {});#{GridPanelHotTopics}.getView().focusRow(0);#{GridPanelHotTopics}.startEditing(0, 1);" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRefreshHotTopic" runat="server" Text="<%$ Resources:Resource, btnRefresh %>"
Icon="ArrowRefresh">
<Listeners>
<Click Handler="#{GridPanelHotTopics}.reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:Column ColumnID="ColumnID" DataIndex="ID" Hidden="true"/>
<ext:Column ColumnID="DESCRIPTIONcolumn"
Header="<%$ Resources: GridPanelHotTopics.DESCRIPTIONcolumn %>"
DataIndex="DESCRIPTION" Width="380px">
<Editor>
<ext:TextField ID="TextFieldDESCRIPTION" runat="server" MaxLength="50" AllowBlank="false">
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="STARTDATEcolumn"
Header="<%$ Resources: GridPanelHotTopics.STARTDATEcolumn %>"
DataIndex="STARTDATE" Width="80px">
<Renderer Fn="Ext.util.Format.dateRenderer('M/d/Y')" />
<Editor>
<ext:DateField ID="DateFieldSTARTDATE" runat="server" AllowBlank="false">
</ext:DateField>
</Editor>
</ext:Column>
<ext:Column ColumnID="ENDDATEcolumn"
Header="<%$ Resources: GridPanelHotTopics.ENDDATEcolumn %>"
DataIndex="ENDDATE" Width="80px">
<Renderer Fn="Ext.util.Format.dateRenderer('M/d/Y')" />
<Editor>
<ext:DateField ID="DateFieldENDDATE" runat="server" AllowBlank="false">
</ext:DateField>
</Editor>
</ext:Column>
<ext:Column ColumnID="DISPLAYORDERcolumn" DataIndex="DISPLAYORDER"
Header="<%$ Resources: GridPanelHotTopics.DISPLAYORDERcolumn %>"
Width="41">
<Editor>
<ext:NumberField ID="DISPLAYORDERcolumn" runat="server">
</ext:NumberField>
</Editor>
</ext:Column>
<ext:CheckColumn ColumnID="ACTIVEcolumn"
DataIndex="ACTIVE"
Align="Center"
Editable="true"
Css="checkBox"
Header="<%$ Resources: GridPanelHotTopics.ACTIVEcolumn %>" Width="46px"/>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel3" runat="server">
<DirectEvents>
<RowSelect OnEvent="GroupRowSelect" Buffer="250">
<ExtraParams>
<ext:Parameter Name="ID" Value="this.getSelected().id" Mode="Raw" />
</ExtraParams>
</RowSelect>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView ID="GridViewHotTopicsFilter" runat="server">
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="DESCRIPTIONFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter();"/>
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="STARTDATEFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter();" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:DateField ID="ENDDATEFilter" runat="server" Editable="false">
<Listeners>
<Select Handler="applyFilter();" />
</Listeners>
</ext:DateField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="DISPLAYORDERFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter();"/>
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="ACTIVEFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter();" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
</ext:GridPanel>
<div class="groupBackBottom"/>
<div class="paginationToolBarGroupListing">
<ext:PagingToolBar ID="PagingToolBar1"
runat="server"
StoreID="StoreHotTopics"
PageSize="14"
DisplayInfo="false"/>
</div>
</Content>
</ext:Panel>
