Jun 17, 2011, 2:15 PM
[CLOSED] GridFilter Remote ComboBox filter
Hi,
I am using GridPanel with Remote Filtering, Sorting and Paging. But, I need ComboBox control as filter control. You can see sample picture as below. Instead of that filtering control, I should add ComboBox control. So, Users can select. How can I achieve?
![Click image for larger version.
Name: 1.jpg
Views: 304
Size: 102.7 KB
ID: 2884](https://forums.ext.net/attachment.php?attachmentid=2884&d=1308319892&thumb=1)
This is my GridPanel codes.
I am using GridPanel with Remote Filtering, Sorting and Paging. But, I need ComboBox control as filter control. You can see sample picture as below. Instead of that filtering control, I should add ComboBox control. So, Users can select. How can I achieve?
This is my GridPanel codes.
<ext:GridPanel ID="GridPanel_CustomerForms" runat="server" StoreID="Store_CustomerForms"
AutoExpandColumn="IndividualFullName" TrackMouseOver="true" StripeRows="true"
Header="false" Border="false">
<TopBar>
<ext:Toolbar ID="Toolbar_TopBar" runat="server" Hidden="false">
<Items>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button_PrintRegistrationForm" runat="server" Text="Print Registration Form"
Icon="Printer">
<Listeners>
<Click Handler="Button_PrintRegistrationForm_Click();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button_AddNewForm" runat="server" Text="Add New Form" Icon="Add"
Hidden="true">
<Listeners>
<Click Handler="Button_AddNewForm_Click();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn />
<ext:Column Header="Task ID" DataIndex="TaskID" Width="50">
</ext:Column>
<ext:Column Header="Task Type" DataIndex="TaskType" Width="150">
</ext:Column>
<ext:Column Header="Network Type" DataIndex="SecondaryType" Width="150">
</ext:Column>
<ext:Column Header="Last Status" DataIndex="LastStatus" Width="200">
</ext:Column>
<ext:Column Header="First Name" DataIndex="FirstName" Width="150">
</ext:Column>
<ext:Column Header="Last Name" DataIndex="LastName" Width="150">
</ext:Column>
<ext:Column Header="PhoneNo1" DataIndex="PhoneNo1" Width="150" Hidden="false">
</ext:Column>
<ext:DateColumn Header="Insert Date" DataIndex="InsertDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
Hidden="false">
</ext:DateColumn>
<ext:Column ColumnID="IndividualFullName" Header="Full Name">
<Renderer Handler="var fullName = ''; if(record.data['CustomerType']=='IndividualPerson'){fullName = '<b>' + record.data['LastName'] + '</b>,' + record.data['FirstName']}else{fullName = record.data['PublicFullName']} return fullName" />
</ext:Column>
<ext:Column Header="Customer Type" DataIndex="CustomerType" Width="100">
</ext:Column>
<ext:Column Header="Registration Person Type" DataIndex="RegistrationPersonType"
Width="120">
</ext:Column>
<ext:Column Header="Registration Full Name" DataIndex="RegistrationFullName" Width="150">
</ext:Column>
<ext:DateColumn Header="Registration Date" DataIndex="RegistrationDate" Width="150"
Format="dd-MM-yyyy HH:mm:ss">
</ext:DateColumn>
<ext:Column Header="Father Name" DataIndex="FatherName" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Mother Name" DataIndex="MotherName" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Mother Last Name" DataIndex="MotherLastName" Width="150" Hidden="true">
</ext:Column>
<ext:DateColumn Header="Birth Date" DataIndex="BirthDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
Hidden="true">
</ext:DateColumn>
<ext:Column Header="Sex" DataIndex="Sex" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Country" DataIndex="Country" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="BirthPlace" DataIndex="BirthPlace" Width="150">
</ext:Column>
<ext:Column Header="Citizenship" DataIndex="Citizenship" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Individual Address" DataIndex="IndividualAddress" Width="150">
</ext:Column>
<ext:Column Header="Contact No" DataIndex="ContactNo" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Email" DataIndex="Email" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Public Full Name" DataIndex="PublicFullName" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Public NIPT" DataIndex="PublicNIPT" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Public Address" DataIndex="PublicAddress" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Document Type" DataIndex="DocumentType" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Passport Type" DataIndex="PassportType" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="Identity Number" DataIndex="IdentityNumber" Width="150" Hidden="true">
</ext:Column>
<ext:DateColumn Header="Identity Date" DataIndex="IdentityDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
Hidden="true">
</ext:DateColumn>
<ext:Column Header="Certificate Type" DataIndex="CertificateType" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="PhoneNo2" DataIndex="PhoneNo2" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="PhoneNo3" DataIndex="PhoneNo3" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="PhoneNo4" DataIndex="PhoneNo4" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="PhoneNo5" DataIndex="PhoneNo5" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="PhoneNo6" DataIndex="PhoneNo6" Width="150" Hidden="true">
</ext:Column>
<ext:Column Header="UserID" DataIndex="UserID" Width="150" Hidden="true">
</ext:Column>
<ext:DateColumn Header="Update Date" DataIndex="UpdateDate" Width="150" Format="dd-MM-yyyy HH:mm:ss"
Hidden="true">
</ext:DateColumn>
<ext:Column Header="Is Deleted" DataIndex="IsDeleted" Width="150" Hidden="true">
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters_CustomerForms">
<Filters>
<ext:NumericFilter DataIndex="TaskID" />
<ext:StringFilter DataIndex="TaskType" />
<ext:StringFilter DataIndex="SecondaryType" />
<ext:StringFilter DataIndex="LastStatus" />
<ext:StringFilter DataIndex="FirstName" />
<ext:StringFilter DataIndex="LastName" />
<ext:StringFilter DataIndex="PhoneNo1" />
<ext:DateFilter DataIndex="InsertDate">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:StringFilter DataIndex="IndividualFullName" />
<ext:StringFilter DataIndex="CustomerType" />
<ext:StringFilter DataIndex="RegistrationPersonType" />
<ext:StringFilter DataIndex="RegistrationFullName" />
<ext:DateFilter DataIndex="RegistrationDate">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:StringFilter DataIndex="FatherName" />
<ext:StringFilter DataIndex="MotherName" />
<ext:StringFilter DataIndex="MotherLastName" />
<ext:DateFilter DataIndex="BirthDate">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:StringFilter DataIndex="Sex" />
<ext:StringFilter DataIndex="Country" />
<ext:StringFilter DataIndex="BirthPlace" />
<ext:StringFilter DataIndex="Citizenship" />
<ext:StringFilter DataIndex="IndividualAddress" />
<ext:StringFilter DataIndex="ContactNo" />
<ext:StringFilter DataIndex="Email"/>
<ext:StringFilter DataIndex="PublicFullName"/>
<ext:StringFilter DataIndex="PublicNIPT"/>
<ext:StringFilter DataIndex="PublicAddress"/>
<ext:StringFilter DataIndex="DocumentType"/>
<ext:StringFilter DataIndex="PassportType"/>
<ext:StringFilter DataIndex="IdentityNumber"/>
<ext:DateFilter DataIndex="IdentityDate">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:StringFilter DataIndex="CertificateType"/>
<ext:StringFilter DataIndex="PhoneNo2"/>
<ext:StringFilter DataIndex="PhoneNo3"/>
<ext:StringFilter DataIndex="PhoneNo4"/>
<ext:StringFilter DataIndex="PhoneNo5"/>
<ext:StringFilter DataIndex="PhoneNo6"/>
<ext:NumericFilter DataIndex="UserID"/>
<ext:DateFilter DataIndex="UpdateDate">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:BooleanFilter DataIndex="IsDeleted"/>
</Filters>
</ext:GridFilters>
</Plugins>
<LoadMask ShowMask="true" />
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
<DirectEvents>
<RowSelect OnEvent="GridPanel_CustomerForms_RowSelect" Buffer="100">
<EventMask ShowMask="true" Msg="Processing..." Target="CustomTarget" CustomTarget="={#{Panel3}.body}" />
<ExtraParams>
<%-- or can use params[2].id as value --%>
<ext:Parameter Name="TaskID" Value="this.getSelected().id" Mode="Raw" />
</ExtraParams>
</RowSelect>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" DisplayInfo="true"
DisplayMsg="Displaying customer forms {0} - {1} of {2}" EmptyMsg="No customer form to display">
<Items>
<ext:Label ID="Label1" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="1" />
<ext:ListItem Text="2" />
<ext:ListItem Text="5" />
<ext:ListItem Text="10" />
<ext:ListItem Text="20" />
</Items>
<SelectedItem Value="10" />
<Listeners>
<Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
<Listeners>
<DblClick Fn="GridPanel_CustomerForms_DblClick" />
<CellClick Fn="cellClick" />
</Listeners>
</ext:GridPanel>
Last edited by Daniil; Jun 27, 2011 at 12:44 PM.
Reason: [CLOSED]