May 10, 2012, 7:24 AM
GridPanel MultiHeader went missing after selecting value from combobox filter
Not sure what is wrong, the gridpanel went missing when I selected the value from the combobox filter.
My Code as below
My Code as below
<%@ Page Language="VB" CodeFile="~/Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" />
<ext:XScript runat="server">
<script type="text/javascript">
var OrgUnitType = function (value) {
switch (value) {
case "CMP":
return "Company";
case "BRN":
return "Branch";
case "DPM":
return "Department";
case "BSE":
return "Base";
case "DVS":
return "Division";
case "LIN":
return "Line";
case "SEC":
return "Section";
default:
return ""
}
};
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 applyFilter = function (field) {
var store = #{GridPanel1}.getStore();
store.suspendEvents();
store.filterBy(getRecordFilter());
store.resumeEvents();
#{GridPanel1}.getView().refresh(false);
};
var clearFilter = function () {
#{UnitFilter}.reset();
#{TypeFilter}.reset();
#{PICFilter}.reset();
#{OrgUnitStore}.clearFilter();
};
var getRecordFilter = function () {
var f = [];
f.push({
filter: function (record) {
return filterString(#{UnitFilter}.getValue(), "Description", record);
}
});
f.push({
filter: function (record) {
return filterString(#{TypeFilter}.getValue(), "Type", record);
}
});
f.push({
filter: function (record) {
return filterString(#{PICFilter}.getValue(), "Employee", 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="OrgUnitStore" runat="server">
<Reader>
<ext:JsonReader IDProperty="ID" >
<Fields>
<ext:RecordField Name="ID" />
<ext:RecordField Name="Type" />
<ext:RecordField Name="Description" />
<ext:RecordField Name="Employee" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Window ID="OrgWin" runat="server" Icon="ChartOrganisation" Hidden="true" ShowOnLoad="false" Width="400" Title="Unit"
Closable="true" Resizable="false">
<Items>
<ext:FormPanel ID="OrgFrmPnl" runat="server" LabelAlign="Left" Layout="FormLayout"
MonitorValid="true" Padding="6" Border="false" BodyStyle="background-color:transparent;">
<Defaults>
<ext:Parameter Name="anchor" Value="94%" Mode="Value" />
<ext:Parameter Name="msgTarget" Value="side" Mode="Value" />
</Defaults>
<Items>
<ext:Hidden ID="txtOrgUnitId" runat="server" />
<ext:DropDownField ID="ddlOrgUnit" runat="server" Editable="false"
TriggerIcon="Search" FieldLabel="Unit" AllowBlank="false" BlankText="Select Unit">
<Component>
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" TrackMouseOver="true" Width="550"
Height="300" StoreID="OrgUnitStore" AutoExpandColumn="Description">
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="Description" Header="Description" DataIndex="Description" Width="200" />
<ext:Column ColumnID="Type" Header="Type" DataIndex="Type" Width="100" >
<Renderer Fn="OrgUnitType" />
</ext:Column>
<ext:Column ColumnID="Employee" Header="Employee" DataIndex="Employee" Width="200" />
<ext:Column Width="28" Sortable="false" MenuDisabled="true" Header=" " Fixed="true">
<Renderer Handler="return '';" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true">
<Listeners>
<RowSelect Handler="#{txtOrgUnitId}.setValue(this.getSelected().data.ID);#{ddlOrgUnit}.setValue(this.getSelected().data.description);" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView runat="server">
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="UnitFilter" 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:ComboBox ID="TypeFilter" runat="server" Editable="false">
<Items>
<ext:ListItem Text="Company" Value="CMP" />
<ext:ListItem Text="Branch" Value="BRN" />
<ext:ListItem Text="Department" Value="DPM" />
<ext:ListItem Text="Base" Value="BSE" />
<ext:ListItem Text="Section" Value="SEC" />
<ext:ListItem Text="Line" Value="LIN" />
</Items>
<Listeners>
<Select Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:ComboBox>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="PICFilter" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false">
<Component>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="clearFilter(null);" />
</Listeners>
</ext:Button>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar" runat="server" PageSize="10" HideRefresh="true" />
</BottomBar>
</ext:GridPanel>
</Component>
</ext:DropDownField>
</Items>
<Listeners>
<ClientValidation Handler="#{BtnOrgSubmit}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" ID="BtnOrgSubmit" Text="Plot">
<Listeners>
<Click Handler="alert(#{txtOrgUnitId}.getValue());#{OrgWin}.hide();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="BtnOrgCancel" Text="Close">
<Listeners>
<Click Handler="#{OrgWin}.hide();" />
</Listeners>
</ext:Button>
</Buttons>
<Listeners>
<Hide Handler="#{OrgFrmPnl}.getForm().reset();" />
</Listeners>
</ext:Window>
</form>
</body>
</html>
Imports Ext.Net
Imports Ext.Net.X
Partial Class _Default
Inherits System.Web.UI.Page
Private Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If Not IsAjaxRequest Then
Dim oSample As New SampleCollection()
oSample.Add(New Sample(1, "CMP", "PPQ", "Wang"))
oSample.Add(New Sample(2, "DPM", "RND", "Jim"))
oSample.Add(New Sample(3, "DPM", "SUPPORT", "John"))
oSample.Add(New Sample(4, "BRN", "KL", ""))
oSample.Add(New Sample(5, "SEC", "OTHER", ""))
oSample.Add(New Sample(6, "LIN", "OTHER", ""))
oSample.Add(New Sample(7, "BSE", "OTHER", ""))
oSample.Add(New Sample(8, "DVS", "OTHER", ""))
oSample.Add(New Sample(9, "BRN", "KL", ""))
oSample.Add(New Sample(10, "BRN", "JH", ""))
oSample.Add(New Sample(11, "BRN", "PL", ""))
oSample.Add(New Sample(12, "BRN", "TR", ""))
Me.OrgUnitStore.DataSource = oSample
Me.OrgUnitStore.DataBind()
Me.OrgWin.Show()
End If
End Sub
End Class
Public Class Sample
Public Property ID() As Integer
Get
Return m_ID
End Get
Set(value As Integer)
m_ID = value
End Set
End Property
Private m_ID As Integer
Public Property Type() As String
Get
Return m_Type
End Get
Set(value As String)
m_Type = value
End Set
End Property
Private m_Type As String
Public Property Description() As String
Get
Return m_Description
End Get
Set(value As String)
m_Description = value
End Set
End Property
Private m_Description As String
Public Property Employee() As String
Get
Return m_Employee
End Get
Set(value As String)
m_Employee = value
End Set
End Property
Private m_Employee As String
Public Sub New(ByVal ID As Integer, ByVal Type As String, ByVal Description As String, ByVal Employee As String)
Me.m_ID = ID
Me.m_Type = Type
Me.m_Description = Description
Me.m_Employee = Employee
End Sub
End Class
Public Class SampleCollection
Inherits CollectionBase
Public Function Add(ByVal value As Sample) As Integer
Return (List.Add(value))
End Function
End Class
