Aug 15, 2011, 2:33 PM
styles added via addClass get removed when sorting, changing column order, etc...
I have added a header row to a grid which can be shown / hidden via a context menu using add & removeClass('x-hide-display'). Problem is whenever I change the sort or column order, the header row visibility gets reset to its original state. Any way to work around it?
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var data = this.GetData();
var store1 = this.GridPanel1.GetStore();
store1.DataSource = data;
store1.DataBind();
}
}
public object[] GetData()
{
return new object[] {
new object[] { "3m Co", 0 },
new object[] { "Alcoa Inc", 1 },
new object[] { "Altria Group Inc", 2 },
new object[] { "American Express Company", 3 },
new object[] { "American International Group, Inc.", 4 },
new object[] { "AT&T Inc.", 5 }
};
}
</script>
<ext:XScript runat="server">
<script type="text/javascript">
var showHideHeader = function(item, checked){
if (checked)
#{GridPanel1}.getView().mainHd.select('.cls_FilterRow').removeClass('x-hide-display');
else
#{GridPanel1}.getView().mainHd.select('.cls_FilterRow').addClass('x-hide-display');
#{GridPanel1}.getView().refresh();
}
</script>
</ext:XScript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
TrackMouseOver="true" Width="600" Height="350" AutoExpandColumn="Company" ContextMenuID="mnuMain">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
</Fields>
<Fields>
<ext:RecordField Name="sortorder" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
<ext:Column ColumnID="SortOrder" Header="Sort" Width="160" DataIndex="sortorder" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
<View>
<ext:GridView ID="GridView1" runat="server">
<HeaderRows>
<ext:HeaderRow Cls="cls_FilterRow">
<Columns>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="CompanyFilter" runat="server" EnableKeyEvents="true">
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="SortOrderFilter" runat="server" EnableKeyEvents="true">
</ext:TextField>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:Menu ID="mnuMain" runat="server">
<Items>
<ext:CheckMenuItem ID="chkMenu" runat="server" Checked="true" Text="Filter Row">
<Listeners>
<CheckChange Fn="showHideHeader" />
</Listeners>
</ext:CheckMenuItem>
</Items>
</ext:Menu>
</form>
</body>
</html>