[CLOSED] Locked column and row alignment
Hi,
In the attached image you can see that, in the presence of a locked column, the rows are not aligned properly.
This is my code:
Code:
<%@ 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 userId = parseInt(0);
var periodId = parseInt(0);
var setUser = function (index) {
if (dsUsers.getCount() > 0) {
var rec;
if (index) {
rec = dsUsers.getAt(index);
}
else {
rec = dsUsers.getAt(0);
}
userId = parseInt(rec.get('EmployeeId'));
cboUsers.setValue(userId);
}
};
var setPeriod = function (index) {
if (dsPeriods.getCount() > 0) {
var rec;
if (index) {
rec = dsPeriods.getAt(index);
}
else {
rec = dsPeriods.getAt(0);
}
periodId = parseInt(rec.get("TimeEntryPeriodId"));
cboPeriods.setValue(parseInt(rec.get('TimeEntryPeriodId')));
}
}
var formatDeltaDays = function (value, meta, record) {
if (value != 0) {
meta.attr = String.format('style="background-color:{0};color:{1};"', (value > 0) ? "#00FF00" : "#FF0000", (value > 0) ? "#000000" : "#FFFFFF");
}
return value;
};
var loadData = function () {
dsTimeTimeSheetByEmployee.load({
callback: function (r, options, success) {
if (success) {
if (dsTimeTimeSheetByEmployee.getCount() > 0) {
MainGridPanel.getView().focusRow(0);
MainGridPanel.selModel.selectRow(0);
}
}
}
});
};
var initData = function () {
dsUsers.load({
callback: function (r, options, success) {
if (success) {
dsPeriods.load({
callback: function (r, options, success) {
if (success) {
setUser();
setPeriod();
loadData();
}
}
})
}
}
});
};
Ext.onReady(initData);
</script>
<style type="text/css">
.x-grid3-hd-inner
{
text-align: center;
}
</style>
</head>
<body>
<ext:ResourceManager ID="MainScriptManager" runat="server" RemoveViewState="true"/>
<ext:Store ID="dsTimeTimeSheetByEmployee" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="/TimeEntry/GetTimeSheetForValidationByEmployee/" />
</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="DeltaDays" Type="Int"/>
<ext:RecordField Name="ExpectedHours" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<BeforeLoad Handler="#{PanelDayWest}.body.mask('Caricamento mese ...', 'x-mask-loading');" />
<Load Handler="#{PanelDayWest}.body.unmask();" />
<Exception Handler="#{PanelDayWest}.body.unmask();" />
</Listeners>
<BaseParams>
<ext:Parameter Name="userId" Value="userId" Mode="Raw" />
<ext:Parameter Name="periodId" Value="periodId" Mode="Raw" />
</BaseParams>
<SortInfo Field="EmployeeName" Direction="ASC" />
</ext:Store>
<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:SelectBox
ID="cboUsers"
runat="server"
HiddenName="EmployeeId"
DisplayField="EmployeeName"
ValueField="EmployeeId"
FieldLabel="Risorsa"
LabelWidth="45"
AllowBlank="false"
Width="240"
ListWidth="130"
EmptyText=".....">
<Store>
<ext:Store ID="dsUsers" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="/Employee/GetUserListForTimeEntry/" />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="EmployeeId" Root="data">
<Fields>
<ext:RecordField Name="EmployeeId" Type="Int"/>
<ext:RecordField Name="EmployeeCode" />
<ext:RecordField Name="EmployeeName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:SelectBox>
<ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
<ext:SelectBox
ID="cboPeriods"
runat="server"
HiddenName="TimeEntryPeriodId"
DisplayField="TimeEntryPeriodName"
ValueField="TimeEntryPeriodId"
FieldLabel="Periodo"
LabelWidth="45"
AllowBlank="false"
Width="190"
ListWidth="130"
EmptyText=".....">
<Store>
<ext:Store ID="dsPeriods" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="/General/GetAllOpenTimeEntryPeriods/" />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="TimeEntryPeriodId" Root="data">
<Fields>
<ext:RecordField Name="TimeEntryPeriodId"/>
<ext:RecordField Name="TimeEntryPeriodName" />
<ext:RecordField Name="DateFrom" Type="Date" />
<ext:RecordField Name="DateTo" Type="Date" />
<ext:RecordField Name="IsClosed" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:SelectBox>
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
</North>
<Center MarginsSummary="0 5 5 5" Collapsible="true">
<ext:Panel
ID="PanelDayWest"
runat="server"
Frame="true"
Title="Riepilogo giornaliero"
Width="282"
Icon="CalendarViewMonth"
Layout="Fit">
<Items>
<ext:GridPanel
ID="MainGridPanel"
runat="server"
Header="false"
Border="false"
TrackMouseOver="true"
StoreID="dsTimeTimeSheetByEmployee"
AutoExpandColumn="EmployeeName">
<ColumnModel ID="MainColumnModel" 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="Nome Risorsa<br /> " Locked="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="DeltaDays" DataIndex="DeltaDays" Header="gg.<br />Delta" Width="60" Align="Right" Sortable="false" Resizable="false">
<Renderer Fn="formatDeltaDays" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="MainRowSelectionModel" runat="server" />
</SelectionModel>
<View>
<ext:LockingGridView ID="MainGridView" runat="server" />
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:ViewPort>
</body>
</html>
Bye,
Stefano
