Oct 21, 2010, 6:56 AM
[CLOSED] GridPanel display problem
Hi,
In the following example, I initially load data into a GridPanel. By clicking on the ButtonSwitch toolbar button, I would hide the current GridPanel
and see another (initially hidden) GridPanel to provide a different view of the same data.
However, even if the data of the second grid are loaded into the store, the grid is not displayed (see attached picture).
Any ideas?
Stefano
In the following example, I initially load data into a GridPanel. By clicking on the ButtonSwitch toolbar button, I would hide the current GridPanel
and see another (initially hidden) GridPanel to provide a different view of the same data.
However, even if the data of the second grid are loaded into the store, the grid is not displayed (see attached picture).
Any ideas?
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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></title>
<ext:ResourcePlaceHolder ID="MainResourcePlaceHolder" runat="server" />
<script type="text/javascript">
var periodStartDate = new Date();
var periodEndDate = new Date();
var formatHour = function (value) {
return value.toFixed(2);
};
var loadDataByEmployee = function () {
dsTimeTimeSheetByEmployee.load({
callback: function (r, options, success) {
if (success) {
if (dsTimeTimeSheetByEmployee.getCount() > 0) {
ResourceGridPanel.getView().focusRow(0);
ResourceGridPanel.selModel.selectRow(0);
}
}
}
});
};
var loadDataByProject = function () {
dsTimeTimeSheetByProject.load({
callback: function (r, options, success) {
if (success) {
if (dsTimeTimeSheetByProject.getCount() > 0) {
ProjectGridPanel.getView().focusRow(0);
ProjectGridPanel.selModel.selectRow(0);
}
}
}
});
};
var doRefresh = function () {
if (ResourceGridPanel.isVisible()) {
loadDataByEmployee();
}
else {
loadDataByProject();
}
};
var doSwitch = function () {
if (ResourceGridPanel.isVisible()) {
ResourceGridPanel.setVisible(false);
PanelView.setTitle('Riepilogo per Commessa');
ProjectGridPanel.setVisible(true);
loadDataByProject();
}
else {
ProjectGridPanel.setVisible(false);
PanelView.setTitle('Riepilogo per Risorsa');
ResourceGridPanel.setVisible(true);
loadDataByEmployee();
}
};
Ext.onReady(loadDataByEmployee);
</script>
</head>
<body>
<ext:ResourceManager ID="MainScriptManager" runat="server" RemoveViewState="true"/>
<ext:ViewPort ID="MainViewPort" runat="server" Layout="fit">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North MarginsSummary="5 5 5 5">
<ext:Panel
ID="PanelNorth"
runat="server"
Title="Selezione"
Height="60"
Padding="2"
Frame="true"
Icon="UserSuit">
<Items>
<ext:Toolbar ID="TopToolbar" runat="server" EnableOverflow="false" Flat="true">
<Items>
<ext:Button ID="ButtonRefresh" runat="server" Icon="ArrowRefresh" ToolTip="Ricarica i dati secondo i criteri di selezione impostati">
<Listeners>
<Click Handler="doRefresh();" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator4" runat="server" />
<ext:Button ID="ButtonSwitch" runat="server" Icon="TableGo" ToolTip="Cambia la vista corrente">
<Listeners>
<Click Handler="doSwitch();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
</North>
<Center MarginsSummary="0 5 5 5" Collapsible="true">
<ext:Panel
ID="PanelView"
runat="server"
Frame="true"
Title="Riepilogo per Risorsa"
Width="282"
Icon="CalendarViewMonth"
Layout="Fit">
<Items>
<ext:GridPanel
ID="ResourceGridPanel"
runat="server"
Header="false"
Border="false"
TrackMouseOver="true">
<Store>
<ext:Store ID="dsTimeTimeSheetByEmployee" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="/TimeEntry/GetTSForEmployeeValidationGroupByEmployee/" />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="Sequence" Root="data" TotalProperty="total">
<Fields>
<ext:RecordField Name="EmployeeId" />
<ext:RecordField Name="EmployeeCode" />
<ext:RecordField Name="EmployeeName" SortDir="ASC"/>
<ext:RecordField Name="ExpectedDays" Type="Int"/>
<ext:RecordField Name="TotalDays" Type="Int"/>
<ext:RecordField Name="ExpectedHours" />
<ext:RecordField Name="TotalHours" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<BeforeLoad Handler="#{PanelView}.body.mask('Caricamento dati ...', 'x-mask-loading');" />
<Load Handler="#{PanelView}.body.unmask();" />
<Exception Handler="#{PanelView}.body.unmask();" />
</Listeners>
<BaseParams>
<ext:Parameter Name="userId" Value="240" Mode="Value" />
<ext:Parameter Name="periodId" Value="16" Mode="Value" />
<ext:Parameter Name="startDate" Value="periodStartDate" Mode="Raw" />
<ext:Parameter Name="endDate" Value="periodEndDate" Mode="Raw" />
</BaseParams>
<SortInfo Field="EmployeeName" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel ID="ResourceColumnModel" runat="server">
<Columns>
<ext:CommandColumn Width="30" Align="Center" Locked="true">
<Commands>
<ext:GridCommand Icon="TableEdit" CommandName="Edit">
<ToolTip Text="Modifica Riga" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<ext:Column ColumnID="EmployeeName" DataIndex="EmployeeName" Header="Nominativo Risorsa<br /> " Width="150" Locked="true" />
<ext:Column ColumnID="EmployeeCode" DataIndex="EmployeeCode" Header="Codice<br />Risorsa" Width="100" Hidden="true" Locked="true"/>
<ext:Column ColumnID="EmployeeId" DataIndex="EmployeeId" Header="ID Risorsa<br /> " Width="75" Hidden="true" />
<ext:Column ColumnID="ExpectedDays" DataIndex="ExpectedDays" Header="gg.<br />Attesi" Width="60" Align="Right" Sortable="false" Resizable="false" Wrap="true" />
<ext:Column ColumnID="TotalDays" DataIndex="TotalDays" Header="gg.<br />Caricati" Width="60" Align="Right" Sortable="false" Resizable="false" />
<ext:Column ColumnID="ExpectedHours" DataIndex="ExpectedHours" Header="Ore<br />Attese" Width="65" Align="Right" Sortable="false" Resizable="false">
<Renderer Fn="formatHour" />
</ext:Column>
<ext:Column ColumnID="TotalHours" DataIndex="TotalHours" Header="Ore<br />Caricate" Width="65" Align="Right" Sortable="false" Resizable="false">
<Renderer Fn="formatHour" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="ResourceRowSelectionModel" runat="server" />
</SelectionModel>
<View>
<ext:LockingGridView ID="ResourceGridView" runat="server" SyncHeights="true" />
</View>
</ext:GridPanel>
<ext:GridPanel
ID="ProjectGridPanel"
runat="server"
Header="false"
Border="false"
Hidden="false"
TrackMouseOver="true">
<Store>
<ext:Store ID="dsTimeTimeSheetByProject" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="/TimeEntry/GetTSForEmployeeValidationGroupByProject/" />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="Sequence" Root="data" TotalProperty="total">
<Fields>
<ext:RecordField Name="ProjectId" />
<ext:RecordField Name="ProjectName" SortDir="ASC"/>
<ext:RecordField Name="TotalDays" Type="Int"/>
<ext:RecordField Name="TotalHours" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<BeforeLoad Handler="#{PanelView}.body.mask('Caricamento dati ...', 'x-mask-loading');" />
<Load Handler="#{PanelView}.body.unmask();" />
<Exception Handler="#{PanelView}.body.unmask();" />
</Listeners>
<BaseParams>
<ext:Parameter Name="userId" Value="240" Mode="Value" />
<ext:Parameter Name="periodId" Value="16" Mode="Value" />
<ext:Parameter Name="startDate" Value="periodStartDate" Mode="Raw" />
<ext:Parameter Name="endDate" Value="periodEndDate" Mode="Raw" />
</BaseParams>
<SortInfo Field="ProjectName" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel ID="ProjectColumnModel" runat="server">
<Columns>
<ext:CommandColumn Width="30" Align="Center" Locked="true">
<Commands>
<ext:GridCommand Icon="TableEdit" CommandName="Edit">
<ToolTip Text="Modifica Riga" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<ext:Column ColumnID="ProjectName" DataIndex="ProjectName" Header="Descrizione Commessa<br /> " Width="150" Locked="true" />
<ext:Column ColumnID="ProjectId" DataIndex="ProjectId" Header="ID Commessa<br /> " Width="75" Hidden="true" />
<ext:Column ColumnID="TotalDays" DataIndex="TotalDays" Header="gg.<br />Caricati" Width="60" Align="Right" Sortable="false" Resizable="false" />
<ext:Column ColumnID="TotalHours" DataIndex="TotalHours" Header="Ore<br />Caricate" Width="65" Align="Right" Sortable="false" Resizable="false">
<Renderer Fn="formatHour" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="ProjectRowSelectionModel" runat="server" />
</SelectionModel>
<View>
<ext:LockingGridView ID="ProjectGridView" runat="server" SyncHeights="true" />
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:ViewPort>
</body>
</html>Stefano
Last edited by Daniil; Oct 21, 2010 at 10:59 AM.
Reason: [CLOSED]
