Oct 22, 2015, 2:49 AM
[OPEN] [#925] [3.2.1] Toolbar Overflow bug with Combobox
Support,
Please load the example.
* Notice the rightmost control on the top toolbar is empty.
* Make sure the screen is fully maximized so that you can see the entire toolbar.
* Now click the Linux Penguin to load the combo data.
* Verify, the data is loaded by clicking the combo
* Now shrink the screen to half size the the combo appears in the overflow part.
* Click the double arrow for the overflow and verify the combo exists.
* Now click the combo dropdown (in the overflow) and notice the combo is empty.
This is a problem and it works fine if you load the combo store inline (markup) via ListItem. It only fails if the store is loaded after the page renders.
Thanks,
/Z
Please load the example.
* Notice the rightmost control on the top toolbar is empty.
* Make sure the screen is fully maximized so that you can see the entire toolbar.
* Now click the Linux Penguin to load the combo data.
* Verify, the data is loaded by clicking the combo
* Now shrink the screen to half size the the combo appears in the overflow part.
* Click the double arrow for the overflow and verify the combo exists.
* Now click the combo dropdown (in the overflow) and notice the combo is empty.
This is a problem and it works fine if you load the combo store inline (markup) via ListItem. It only fails if the store is loaded after the page renders.
Thanks,
/Z
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new List<Project>
{
new Project(100, "Ext Forms: Field Anchoring", 1, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, new DateTime(2007, 06, 24)),
new Project(100, "Ext Forms: Field Anchoring", 2, "Implement AnchorLayout", 4, 150, 0, new DateTime(2007, 06, 25)),
new Project(100, "Ext Forms: Field Anchoring", 3, "Add support for multiple types of anchors", 4, 150, 0, new DateTime(2007, 06, 27)),
new Project(100, "Ext Forms: Field Anchoring", 4, "Testing and debugging", 8, 0, 0, new DateTime(2007, 06, 29)),
new Project(100, "Ext Forms: Field Anchoring", 5, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, 0, new DateTime(2007, 06, 24)),
new Project(100, "Ext Forms: Field Anchoring", 6, "Implement AnchorLayout", 4, 150, 0, new DateTime(2007, 06, 25)),
new Project(100, "Ext Forms: Field Anchoring", 7, "Add support for multiple types of anchors", 4, 150, 0, new DateTime(2007, 06, 27)),
};
this.Store1.DataBind();
}
public class Project
{
public Project(int projectId, string name, int taskId, string description, int estimate, double rate, double cost, DateTime due)
{
this.ProjectID = projectId;
this.Name = name;
this.TaskID = taskId;
this.Description = description;
this.Estimate = estimate;
this.Rate = rate;
this.Due = due;
}
public int ProjectID { get; set; }
public string Name { get;set; }
public int TaskID { get; set; }
public string Description { get;set; }
public int Estimate { get;set; }
public double Rate { get; set; }
public double Cost { get; set; }
public DateTime Due { get; set; }
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Menu bug</title>
<script>
var loadCombo = function () {
var ctl = App.testssdsdf;
var data = [];
data.push({ id: 1, dates: "Some Data 1" });
data.push({ id: 2, dates: "Some Data 2" });
data.push({ id: 3, dates: "Some Data 3" });
data.push({ id: 4, dates: "Some Data 4" });
data.push({ id: 5, dates: "Some Data 5" });
ctl.getStore().loadData(data);
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<h1>Menu overflow bug</h1>
<ext:Viewport runat="server" Layout="FitLayout" AutoScroll="true">
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Test"
ColumnLines="true"
Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="ToolbarTimecard" runat="server" EnableOverflow="true" >
<Items>
<ext:Button ID="ButtonPreviousTimecard" runat="server" Icon="Tux">
<Listeners>
<Click Handler="loadCombo();" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator Hidden="true" ID="SingleSeparator" />
<ext:ComboBox ID="test"
QueryMode="Local"
ForceSelection="true"
TriggerAction="All"
EmptyText="Select an ..."
DisplayField="text"
ValueField="id"
runat="server"
Width="350" >
</ext:ComboBox>
<ext:Button ID="ButtonNext" runat="server" Icon="ResultsetNext">
</ext:Button>
<ext:ToolbarSeparator />
<ext:Label ID="TPeriod" runat="server" Html="<b> Period:</b>" />
<ext:Button ID="ButtonPd" runat="server" Icon="ResultsetPrevious">
</ext:Button>
<ext:ComboBox ID="testssdsdf"
runat="server"
ForceSelection="true"
TriggerAction="All"
Width="170"
DisplayField="dates"
QueryMode="Local"
ValueField="id"
Editable="false" >
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" IDProperty="id" runat="server">
<Fields>
<ext:ModelField Name="id" Type="Int" />
<ext:ModelField Name="dates" Type="String"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
<ext:Button ID="ButtonNex" runat="server" Icon="ResultsetNext">
</ext:Button>
<ext:ToolbarSeparator />
<ext:Label ID="TiId" runat="server" Html="<b> Tid Id:</b>" />
<ext:ToolbarSeparator />
<ext:Label ID="Timetus" runat="server" Html="<b> Status:</b>" />
<ext:ToolbarFill />
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TaskID">
<Fields>
<ext:ModelField Name="ProjectID" Type="Int" />
<ext:ModelField Name="Name" />
<ext:ModelField Name="TaskID" Type="Int" />
<ext:ModelField Name="Description" />
<ext:ModelField Name="Estimate" Type="Int" />
<ext:ModelField Name="Rate" Type="Float" />
<ext:ModelField Name="Cost" Type="Float" />
<ext:ModelField Name="Due" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1"
runat="server"
TdCls="task"
Text="Task"
Sortable="true"
DataIndex="Description"
Hideable="false"
Width="300">
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="180" />
<ext:DateColumn ID="DateColumn1"
runat="server"
Width="130"
Text="Due Date"
Sortable="true"
DataIndex="Due"
Format="MM/dd/yyyy">
</ext:DateColumn>
<ext:Column ID="Column3"
runat="server"
Width="130"
Text="Estimate"
Sortable="true"
DataIndex="Estimate">
</ext:Column>
<ext:Column ID="Column4"
runat="server"
Width="130"
Text="Rate"
Sortable="true"
DataIndex="Rate">
</ext:Column>
<ext:Column
runat="server"
Width="130"
ID="Cost"
Text="Cost"
Sortable="false"
Groupable="false"
DataIndex="Cost">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView7" runat="server" StripeRows="true">
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelTimecard" runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Oct 22, 2015 at 8:32 AM.
Reason: [OPEN] [#925] [3.2.1]