Aug 17, 2016, 11:39 PM
[CLOSED] Vertical Text in EXT.NET Label
Hi guys,
I'm trying to use vertically aligned text in Labels in order to enter explanations about certain narrow columns in my gridpanel.
I can't make the example in this older thread work (and would like to do it differently if possible):
http://forums.ext.net/showthread.php...-column-header
But I really don't want to vertically align the text in the gridpanel header, I would rather do it in labels anyway. But all the methods from that thread fail.
The look I am going for is as follows:
I have been working on this on and off for two days but I cannot make it work. Here is my examples. I have removed most of the methods I tried (various text aligns and margins) and just put the most basic CSS. No matter what I do the vertical text in the labels is getting horribly mangled.
I am hoping that there is a quick, obvious solution to this that I am missing. Thank you in advance. I can provide any more info if requested.
David
Front end file:
I'm trying to use vertically aligned text in Labels in order to enter explanations about certain narrow columns in my gridpanel.
I can't make the example in this older thread work (and would like to do it differently if possible):
http://forums.ext.net/showthread.php...-column-header
But I really don't want to vertically align the text in the gridpanel header, I would rather do it in labels anyway. But all the methods from that thread fail.
The look I am going for is as follows:
I have been working on this on and off for two days but I cannot make it work. Here is my examples. I have removed most of the methods I tried (various text aligns and margins) and just put the most basic CSS. No matter what I do the vertical text in the labels is getting horribly mangled.
I am hoping that there is a quick, obvious solution to this that I am missing. Thank you in advance. I can provide any more info if requested.
David
Front end file:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ForExt.aspx.vb" Inherits="Online_Employee_Review.ForExt" %>
<!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 runat="server">
<title></title>
<script type="text/javascript">
var handleCheckChange = function (item, rowIndex, record, checked) {
if (!checked) return false;
record.data.Rating1 = false;
record.data.Rating2 = false;
record.data.Rating3 = false;
};
</script>
<style type="text/css" >
.verticalLabelText
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Crisp" />
<ext:Store runat="server" ID="storSteps" AutoSync="true" OnBeforeStoreChanged="StoreChanged" >
<Model>
<ext:Model runat="server" >
<Fields>
<ext:ModelField Name="RatingID" Type="Int" />
<ext:ModelField Name="RatingDescription" Type="String" />
<ext:ModelField Name="Rating1" Type="Boolean" />
<ext:ModelField Name="Rating2" Type="Boolean" />
<ext:ModelField Name="Rating3" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport runat="server" >
<Items>
<ext:Panel runat="server" Layout="FormLayout" >
<Items>
<ext:Panel runat="server" Layout="HBoxLayout" Height="150">
<Items>
<ext:Label runat="server" ID="lblRatingIDPlaceholder" Width="30" />
<ext:Label runat="server" ID="lblDescriptionExplanation" Flex="1" Text="Explanation of Description Column" />
<ext:Label runat="server" ID="lblRating1Explanation" Width="40" Height="150" Text="Rating 1 Explanation Would Go Here" Cls="verticalLabelText" />
<ext:Label runat="server" ID="lblRating2Explanation" Width="40" Height="150" Text="Rating 2 Explanation Would Go Here" Cls="verticalLabelText"/>
<ext:Label runat="server" ID="lblRating3Explanation" Width="40" Height="150" Text="Rating 3 Explanation Would Go Here" Cls="verticalLabelText"/>
</Items>
</ext:Panel>
<ext:GridPanel runat="server" ID="grdSteps" StoreID="storSteps" >
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="RatingID" Width="30" />
<ext:Column runat="server" DataIndex="RatingDescription" Flex="1" />
<ext:CheckColumn runat="server" ID="chk1" DataIndex="Rating1" Editable="true" Width="40" >
<Listeners>
<BeforeCheckChange Fn="handleCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn runat="server" ID="chk2" DataIndex="Rating2" Editable="true" Width="40" >
<Listeners>
<BeforeCheckChange Fn="handleCheckChange" />
</Listeners>
</ext:CheckColumn>
<ext:CheckColumn runat="server" ID="chk3" DataIndex="Rating3" Editable="true" Width="40" >
<Listeners>
<BeforeCheckChange Fn="handleCheckChange" />
</Listeners>
</ext:CheckColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>Imports Ext.Net
Public Class ForExt
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Ext.Net.X.IsAjaxRequest Then
Dim listObj As New List(Of Object)
listObj.Add(New Object() {1, "Step 1", False, False, True})
listObj.Add(New Object() {2, "Step 2", True, False, False})
listObj.Add(New Object() {3, "Step 3", False, True, False})
listObj.Add(New Object() {4, "Step 4", True, False, False})
listObj.Add(New Object() {5, "Step 5", False, True, False})
storSteps.DataSource = listObj
storSteps.DataBind()
End If
End Sub
Sub StoreChanged(ByVal sender As Object, ByVal e As BeforeStoreChangedEventArgs)
Dim quick = 1
End Sub
End Class
Last edited by fabricio.murta; Sep 17, 2016 at 12:32 AM.
Reason: no user feedback for 7+ days
