Oct 30, 2012, 8:38 AM
[2.0]Performance of grid headeritems.
It's a simple example,only a lot of columns that have headeritems.Load the page spend a long time
Using Google Chrome 24.0.1305.3 dev-m.
But using IE9, it's much faster.
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var toggle = function () {
for (i = 0; i < App.grid.columns.length; i++) {
App.grid.columns[i].items.items[0].items.items[0].setVisible(!App.Button1.pressed);
}
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server"/>
<ext:GridPanel runat="server" ID="grid">
<ColumnModel runat="server">
<Columns>
<ext:Column ID="Column0" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer1" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField1" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField2" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column1" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer2" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField3" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField4" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer3" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField5" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField6" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer4" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField7" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField8" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer5" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField9" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField10" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column5" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer6" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField11" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField12" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column6" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer7" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField13" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField14" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column7" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer8" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField15" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField16" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column8" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer9" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField17" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField18" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column9" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer10" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField19" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField20" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column10" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer11" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField21" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField22" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column11" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer12" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField23" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField24" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column12" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer13" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField25" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField26" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column13" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer14" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField27" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField28" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column14" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer15" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField29" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField30" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column15" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer16" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField31" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField32" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column16" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer17" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField33" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField34" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column17" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer18" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField35" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField36" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column18" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer19" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField37" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField38" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column19" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer20" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField39" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField40" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column20" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer21" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField41" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField42" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column21" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer22" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField43" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField44" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column22" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer23" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField45" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField46" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column23" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer24" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField47" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField48" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column24" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer25" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField49" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField50" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column25" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer26" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField51" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField52" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column26" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer27" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField53" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField54" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column27" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer28" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField55" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField56" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column28" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer29" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField57" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField58" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column29" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer30" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField59" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField60" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column30" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer31" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField61" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField62" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column31" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer32" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField63" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField64" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column32" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer33" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField65" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField66" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column33" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer34" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField67" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField68" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column34" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer35" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField69" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField70" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
<ext:Column ID="Column35" runat="server" Text="test">
<HeaderItems>
<ext:FieldContainer ID="FieldContainer36" runat="server" Layout="ColumnLayout">
<Items>
<ext:TextField ID="TextField71" runat="server" ColumnWidth="0.5" >
</ext:TextField>
<ext:TextField ID="TextField72" runat="server" ColumnWidth="0.5" >
</ext:TextField>
</Items>
</ext:FieldContainer>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Toggle" EnableToggle="true">
<Listeners>
<Click Fn="toggle" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</form>
</body>
</html>Using Google Chrome 24.0.1305.3 dev-m.
But using IE9, it's much faster.
Last edited by howardyin; Oct 30, 2012 at 8:41 AM.
