Mar 03, 2010, 11:18 AM
[CLOSED] 0.82 Bottom PagingToolbars in a complex layout example do not appear
Hello,
I have the problem, that in my a bit more complex layout example the Paging Toolbars of my 2 Grids do not appear.
It was a bit difficult to make a working example, because my content is loaded from the database.
Therefore I took my layout and replaced the Grids and TreePanel with examples from the coolite-sample page.
I hope it´s still readable and shows my problem. To make it easier to test my example I´ve also added the aspx-Page as attachement
Regards,
Martin
I have the problem, that in my a bit more complex layout example the Paging Toolbars of my 2 Grids do not appear.
It was a bit difficult to make a working example, because my content is loaded from the database.
Therefore I took my layout and replaced the Grids and TreePanel with examples from the coolite-sample page.
I hope it´s still readable and shows my problem. To make it easier to test my example I´ve also added the aspx-Page as attachement
Regards,
Martin
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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">
<head id="Head1" runat="server">
<title>Card Layout - Coolite Toolkit Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<script runat="server">
private object[] TestData
{
get
{
DateTime now = DateTime.Now;
return new object[]
{
new object[] {"3m Co", 71.72, 0.02, 0.03, now},
new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, now},
new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, now},
new object[] {"American Express Company", 52.55, 0.01, 0.02, now},
new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, now},
new object[] {"AT&T Inc.", 31.61, -0.48, -1.54, now},
new object[] {"Boeing Co.", 75.43, 0.53, 0.71, now},
new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, now},
new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, now},
new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now},
new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, now},
new object[] {"General Electric Company", 34.14, -0.08, -0.23, now},
new object[] {"Government Motors Corporation", 30.27, 1.09, 3.74, now},
new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, now},
new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, now},
new object[] {"Intel Corporation", 19.88, 0.31, 1.58, now},
new object[] {"International Business Machines", 81.41, 0.44, 0.54, now},
new object[] {"Johnson & Johnson", 64.72, 0.06, 0.09, now},
new object[] {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now},
new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, now},
new object[] {"Merck & Co., Inc.", 40.96, 0.41, 1.01, now},
new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, now},
new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, now},
new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, now},
new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, now},
new object[] {"The Procter & Gamble Company", 61.91, 0.01, 0.02, now},
new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, now},
new object[] {"Verizon Communications", 35.57, 0.39, 1.11, now},
new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now}
};
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData;
this.Store1.DataBind();
}
}
protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
{
this.Store1.DataSource = this.TestData;
this.Store1.DataBind();
}
protected void Store1_Submit(object sender, StoreSubmitDataEventArgs e)
{
System.Xml.XmlNode xml = e.Xml;
this.Response.Clear();
string strXml = xml.OuterXml;
this.Response.AddHeader("Content-Disposition", "attachment; filename=submittedData.xml");
this.Response.AddHeader("Content-Length", strXml.Length.ToString());
this.Response.ContentType = "application/xml";
this.Response.Write(strXml);
this.Response.End();
}
protected void SaveHandler(object sender, BeforeStoreChangedEventArgs e)
{
System.Xml.XmlNode xml = e.DataHandler.XmlData;
StringBuilder sb = new StringBuilder();
System.Xml.XmlNode updated = xml.SelectSingleNode("records/Updated");
if (updated != null)
{
sb.Append("<p>Updated:</p>");
System.Xml.XmlNodeList uRecords = updated.SelectNodes("record");
foreach (System.Xml.XmlNode record in uRecords)
{
sb.Append("<p>").Append(Server.HtmlEncode(record.InnerXml)).Append("</p>");
}
sb.Append("<br/>");
}
System.Xml.XmlNode inserted = xml.SelectSingleNode("records/Created");
if (inserted != null)
{
sb.Append("<p>Created:</p>");
System.Xml.XmlNodeList iRecords = inserted.SelectNodes("record");
foreach (System.Xml.XmlNode record in iRecords)
{
sb.Append("<p>").Append(Server.HtmlEncode(record.InnerXml)).Append("</p>");
}
sb.Append("<br/>");
}
System.Xml.XmlNode deleted = xml.SelectSingleNode("records/Deleted");
if (deleted != null)
{
sb.Append("<p>Deleted:</p>");
System.Xml.XmlNodeList dRecords = deleted.SelectNodes("record");
foreach (System.Xml.XmlNode record in dRecords)
{
sb.Append("<p>").Append(Server.HtmlEncode(record.InnerXml)).Append("</p>");
}
sb.Append("<br/>");
}
// Label1.Html = sb.ToString();
e.Cancel = true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store ID="Store1" runat="server" RefreshAfterSaving="None" OnRefreshData="MyData_Refresh"
OnSubmitData="Store1_Submit" OnBeforeStoreChanged="SaveHandler">
<Reader>
<ext:ArrayReader ReaderID="company">
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="Y-m-dTh:i:s" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:TabPanel ID="tabPanelCenter" runat="server" ActiveIndex="0" BodyBorder="false">
<Tabs>
<ext:Tab ID="tabSession" runat="server" Title="neue Session" Closable="false" BodyBorder="false">
<Body>
<ext:Panel ID="panelSessionParameters" runat="server" Header="false" BodyBorder="false">
<TopBar>
<ext:Toolbar ID="ToolbarSessionParameters" runat="server">
<Items>
<ext:Label ID="labelDate" runat="server" Text="Datum" />
<ext:ToolbarSpacer />
<ext:DateField ID="dateFieldBookingDate" runat="server">
<Listeners>
<Change Handler="#{tabSession}.Title = 'tratatat'" />
</Listeners>
</ext:DateField>
<ext:ToolbarSeparator />
<ext:Label ID="labelStart" runat="server" Text="Beginn" />
<ext:ToolbarSpacer />
<ext:TimeField ID="timeFieldStartTime" runat="server" MaxTime="23:00" MinTime="07:00"
SelectedTime="07:00" Width="75">
</ext:TimeField>
<ext:ToolbarSpacer />
<ext:Label ID="label2" runat="server" Text="Ende" />
<ext:ToolbarSpacer />
<ext:TimeField ID="timeFieldEnd" runat="server" MaxTime="23:00"
MinTime="07:00" SelectedTime="23:00"
Width="75" />
</Items>
</ext:Toolbar>
</TopBar>
<Body>
<ext:TabPanel ID="tabPanelSystems" runat="server" ActiveIndex="0" Height="450" Border="false">
<Tabs>
<ext:Tab ID="tabTop10" runat="server" Title="Top 10" Closable="false" Icon="Star">
<Body>
<ext:GridPanel ID="GridPanelTop10" runat="server" StoreID="Store1"
StripeRows="true"
Title="Array Grid" Width="600" Height="450" AutoExpandColumn="Company">
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" Width="160"
Sortable="true" DataIndex="company">
<Editor>
<ext:TextField ID="TextField5" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Price" Width="75" Sortable="true"
DataIndex="price">
<Editor>
<ext:TextField ID="TextField6" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true"
DataIndex="change">
<Editor>
<ext:TextField ID="TextField7" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true"
DataIndex="pctChange">
<Editor>
<ext:TextField ID="TextField8" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Last Updated" Width="85" Sortable="true"
DataIndex="lastChange">
<Renderer Fn="Ext.util.Format.dateRenderer('G:i:s')" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar2" runat="server" PageSize="10" />
</BottomBar>
<TopBar>
<ext:Toolbar ID="Toolbar3" runat="server">
<Items>
<ext:Button ID="Button9" runat="server" Text="Add record"
Icon="Add">
<Listeners>
<Click Handler="#{GridPanel1}.insertRecord();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button10" runat="server" Text="Delete selected"
Icon="Delete">
<Listeners>
<Click Handler="#{GridPanel1}.deleteSelected();
#{GridPanel1}.store.load(#{GridPanel1}.store.lastOptions);" />
</Listeners>
</ext:Button>
<ext:ToolbarFill ID="ToolbarFill2" runat="server" />
<ext:Button ID="Button11" runat="server" Text="Find 'Government
Motors'" Icon="Find">
<Listeners>
<Click Handler="selectRecord('Government Motors Corporation');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button12" runat="server" Text="To XML"
Icon="PageCode">
<Listeners>
<Click Handler="exportData();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button13" runat="server" Text="Selection To XML"
Icon="PageCode">
<Listeners>
<Click Handler="exportData(true);" />
</Listeners>
</ext:Button>
<ext:Button ID="Button14" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{GridPanel1}.save();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
</Body>
</ext:Tab>
<ext:Tab ID="tabSystems" runat="server" Title="Systeme"
Closable="false" Icon="WebcamConnect">
<Body>
<ext:Panel ID="PanelSystems" runat="server" Border="false"
Collapsible="false" Height="450"
AutoWidth="true" ActiveIndex="0" MonitorResize="true">
<TopBar>
<ext:Toolbar ID="ToolbarPanelSystems" runat="server">
<Items>
<ext:TextField ID="SearchTextField" runat="server"
EnableKeyEvents="true">
<Listeners>
<KeyPress Handler="if (e.getKey() == 13)
{#{StoreSystems}.reload();}" />
</Listeners>
</ext:TextField>
<ext:ToolbarButton ID="SearchButton" Icon="Magnifier"
StandOut="true" runat="server"
Text="[Search]">
<Listeners>
<Click Handler="#{StoreSystems}.reload();" />
</Listeners>
</ext:ToolbarButton>
<ext:ToolbarFill />
<ext:CycleButton ID="CycleButton1" runat="server" ShowText="true"
PrependText="Anzeigen als ">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:CheckMenuItem ID="CheckMenuItemTreeView" runat="server"
Text="Tree" Icon="ApplicationSideTree"
Checked="true">
<Listeners>
<Click Handler="#{WizardLayout}.setActiveItem(1)" />
</Listeners>
</ext:CheckMenuItem>
<ext:CheckMenuItem ID="CheckMenuItemGridView" runat="server"
Text="Grid" Icon="ApplicationViewColumns">
<Listeners>
<Click
Handler="#{WizardLayout}.setActiveItem(0);#{GridPanelSystems}.repaint();
" />
</Listeners>
</ext:CheckMenuItem>
</Items>
</ext:Menu>
</Menu>
<Listeners>
<Click
Handler="if(#{CycleButton1}.getActiveItem().getItemId()==#{CheckMenuItemTreeView}.getItemId()){#{WizardLayout}.setActiveItem(1);}else{#{WizardLayout}.setActiveItem(0);}"
/>
</Listeners>
</ext:CycleButton>
</Items>
</ext:Toolbar>
</TopBar>
<Body>
<ext:CardLayout ID="WizardLayout" runat="server">
<ext:GridPanel ID="GridPanelSystems" runat="server" StoreID="Store1"
StripeRows="true"
Title="Array Grid" Width="600" Height="450"
AutoExpandColumn="Company">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Company" Header="Company" Width="160"
Sortable="true" DataIndex="company">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Price" Width="75" Sortable="true"
DataIndex="price">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true"
DataIndex="change">
<Editor>
<ext:TextField ID="TextField3" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true"
DataIndex="pctChange">
<Editor>
<ext:TextField ID="TextField4" runat="server" />
</Editor>
</ext:Column>
<ext:Column Header="Last Updated" Width="85" Sortable="true"
DataIndex="lastChange">
<Renderer Fn="Ext.util.Format.dateRenderer('G:i:s')" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10"
/>
</BottomBar>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Add record"
Icon="Add">
<Listeners>
<Click Handler="#{GridPanel1}.insertRecord();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Delete selected"
Icon="Delete">
<Listeners>
<Click Handler="#{GridPanel1}.deleteSelected();
#{GridPanel1}.store.load(#{GridPanel1}.store.lastOptions);" />
</Listeners>
</ext:Button>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button3" runat="server" Text="Find 'Government
Motors'" Icon="Find">
<Listeners>
<Click Handler="selectRecord('Government Motors Corporation');" />
</Listeners>
</ext:Button>
<ext:Button ID="Button4" runat="server" Text="To XML"
Icon="PageCode">
<Listeners>
<Click Handler="exportData();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button5" runat="server" Text="Selection To XML"
Icon="PageCode">
<Listeners>
<Click Handler="exportData(true);" />
</Listeners>
</ext:Button>
<ext:Button ID="Button6" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{GridPanel1}.save();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>
<ext:TreePanel ID="TreePanelSystems" runat="server" Width="300"
Height="450" Icon="BookOpen"
Title="Catalog" AutoScroll="true">
<TopBar>
<ext:Toolbar ID="ToolBar2" runat="server">
<Items>
<ext:Button ID="Button7" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button8" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:TreeNode Text="Composers" Expanded="true">
<Nodes>
<ext:TreeNode Text="Beethoven" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos">
<Nodes>
<ext:TreeNode Text="No. 1 - C" Icon="Music" />
<ext:TreeNode Text="No. 2 - B-Flat Major" Icon="Music" />
<ext:TreeNode Text="No. 3 - C Minor" Icon="Music" />
<ext:TreeNode Text="No. 4 - G Major" Icon="Music" />
<ext:TreeNode Text="No. 5 - E-Flat Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Quartets">
<Nodes>
<ext:TreeNode Text="Six String Quartets" Icon="Music" />
<ext:TreeNode Text="Three String Quartets" Icon="Music" />
<ext:TreeNode Text="Grosse Fugue for String Quartets" Icon="Music"
/>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Sonatas">
<Nodes>
<ext:TreeNode Text="Sonata in A Minor" Icon="Music" />
<ext:TreeNode Text="sonata in F Major" Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Symphonies">
<Nodes>
<ext:TreeNode Text="No. 1 - C Major" Icon="Music" />
<ext:TreeNode Text="No. 2 - D Major" Icon="Music" />
<ext:TreeNode Text="No. 3 - E-Flat Major" Icon="Music" />
<ext:TreeNode Text="No. 4 - B-Flat Major" Icon="Music" />
<ext:TreeNode Text="No. 5 - C Minor" Icon="Music" />
<ext:TreeNode Text="No. 6 - F Major" Icon="Music" />
<ext:TreeNode Text="No. 7 - A Major" Icon="Music" />
<ext:TreeNode Text="No. 8 - F Major" Icon="Music" />
<ext:TreeNode Text="No. 9 - D Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Brahms" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos">
<Nodes>
<ext:TreeNode Text="Violin Concerto" Icon="Music" />
<ext:TreeNode Text="Double Concerto - A Minor" Icon="Music" />
<ext:TreeNode Text="Piano Concerto No. 1 - D Minor" Icon="Music"
/>
<ext:TreeNode Text="Piano Concerto No. 2 - B-Flat Major"
Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Quartets">
<Nodes>
<ext:TreeNode Text="Piano Quartet No. 1 - G Minor" Icon="Music" />
<ext:TreeNode Text="Piano Quartet No. 2 - A Major" Icon="Music" />
<ext:TreeNode Text="Piano Quartet No. 3 - C Minor" Icon="Music" />
<ext:TreeNode Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music"
/>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Sonatas">
<Nodes>
<ext:TreeNode Text="Two Sonatas for Clarinet - F Minor" Icon="Music"
/>
<ext:TreeNode Text="Two Sonatas for Clarinet - E-Flat Major"
Icon="Music" />
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Symphonies">
<Nodes>
<ext:TreeNode Text="No. 1 - C Minor" Icon="Music" />
<ext:TreeNode Text="No. 2 - D Minor" Icon="Music" />
<ext:TreeNode Text="No. 3 - F Major" Icon="Music" />
<ext:TreeNode Text="No. 4 - E Minor" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
<ext:TreeNode Text="Mozart" Icon="UserGray">
<Nodes>
<ext:TreeNode Text="Concertos">
<Nodes>
<ext:TreeNode Text="Piano Concerto No. 12" Icon="Music" />
<ext:TreeNode Text="Piano Concerto No. 17" Icon="Music" />
<ext:TreeNode Text="Clarinet Concerto" Icon="Music" />
<ext:TreeNode Text="Violin Concerto No. 5" Icon="Music" />
<ext:TreeNode Text="Violin Concerto No. 4" Icon="Music" />
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
</BottomBar>
<Listeners>
<Click Handler="#{StatusBar1}.setStatus({text: 'Node Selected:
' + node.text + '', clear: true});" />
<ExpandNode Handler="#{StatusBar1}.setStatus({text: 'Node Expanded:
' + node.text + '', clear: true});"
Delay="30" />
<CollapseNode Handler="#{StatusBar1}.setStatus({text: 'Node
Collapsed: ' + node.text + '', clear: true});" />
</Listeners>
</ext:TreePanel>
</ext:CardLayout>
</Body>
</ext:Panel>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</Body>
</ext:Panel>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</form>
</body>
</html>
