Apr 25, 2021, 10:43 AM
Labels are cut after opening new tab from Grid
Hello
I see this in more our applications, using different ext.net versions ( 4 or 5 in general), example below taken from Ext.net 5.2.0
Code Below is shortened version to single page of what we are using.
Practically - all I want is to open new tab (Ext.panel in Ext.tab.Panel) when clicking on the "edit" link of the grid, in the new tab. Classes for panel are known already. It works if I click button outside the grid. but it does not work when the action is initialized direclty in the grid. Seems to have something to do with grid selection focus
"it does not work" means that panel opens fine, but first frame has labels little cut (see the screenshot)
In bigger forms looks pretty ughly....
In order to reproduce - page below should not have any external reference. Click the "Add Tab - fails" and see that the labels of first panel are little cut.
if focus is moved outside of the grid, or if I add panel using hte button it works fine ( labels are fully rendered)
Note - it works fine as well fine if grid is above the tab panel (i.e always visible)
Ext.Version:
Chrome: Version {version: "90.0.4430.85", pad: 0, shortVersion: "900443085", releaseValue: 0
core: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
ext: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
extjs: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
I see this in more our applications, using different ext.net versions ( 4 or 5 in general), example below taken from Ext.net 5.2.0
Code Below is shortened version to single page of what we are using.
Practically - all I want is to open new tab (Ext.panel in Ext.tab.Panel) when clicking on the "edit" link of the grid, in the new tab. Classes for panel are known already. It works if I click button outside the grid. but it does not work when the action is initialized direclty in the grid. Seems to have something to do with grid selection focus
"it does not work" means that panel opens fine, but first frame has labels little cut (see the screenshot)
In bigger forms looks pretty ughly....
In order to reproduce - page below should not have any external reference. Click the "Add Tab - fails" and see that the labels of first panel are little cut.
if focus is moved outside of the grid, or if I add panel using hte button it works fine ( labels are fully rendered)
Note - it works fine as well fine if grid is above the tab panel (i.e always visible)
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
};
this.Store1.DataBind();
}
}
</script>
<script>
function addTabThrougGridOK() {
alert('In next 3 seconds put focus to the dummy field');
var f = function() {
addPanel();
}
Ext.defer(f, 3000, this);
}
function addPanel() {
var panel = Ext.getCmp('panel');
panel.add(new FormatEditPanel());
panel.setActiveTab(panel.items.length - 1);
}
function addTabThrougGridError() {
addPanel();
}
function onload() {
Ext.define('FormatEditPanel',
{
alias: 'widget.FormatEditPanel',
title: 'Format',
border: false,
"extend": "Ext.form.Panel",
items: [
{
border: false,
items: [
{
xtype: "container",
items: [
{
frame: true,
flex: 1,
defaults: {
"labelWidth": 120
},
items: [
{
reference: "txtName",
xtype: "textfield",
fieldLabel: "Format Name",
msgTarget: "qtip",
validateOnFocusLeave: true,
indicatorIconCls: "#BulletRed",
allowBlank: false,
blankText: " is required",
enableKeyEvents: true
}, {
reference: "txtDOSExtension",
xtype: "textfield",
fieldLabel: "DOS Extension",
msgTarget: "qtip",
validateOnFocusLeave: true,
indicatorIconCls: "#BulletRed",
allowBlank: false,
blankText: " is required",
enableKeyEvents: true
}
],
layout: {
type: "vbox",
align: "stretch"
},
title: "Details"
}, {
frame: true,
margin: "5 0 0 0",
flex: 1,
items: [
{
reference: "txtComClassId",
xtype: "textfield",
fieldLabel: "ComClassId",
msgTarget: "qtip",
validateOnFocusLeave: true,
preserveIndicatorIcon: true,
blankText: "ComClassId is required",
enableKeyEvents: true
}, {
reference: "txtMimeType",
xtype: "textfield",
fieldLabel: "Mime Type",
msgTarget: "qtip",
validateOnFocusLeave: true,
preserveIndicatorIcon: true,
blankText: "Mime Type is required",
enableKeyEvents: true
}
],
layout: {
type: "vbox",
align: "stretch"
},
collapsible: true,
title: "Advanced"
}
]
}
],
layout: {
type: "vbox",
align: "stretch"
},
buttonAlign: "left",
tbar: {
xtype: "toolbar",
items: [
{
xtype: "tbfill"
}, {
hidden: true,
reference: "btnSwitchToEdit",
text: "Edit"
}, {
hidden: true,
reference: "btnSwitchToView",
text: "View"
}
]
}
}
],
buttons: [
{
reference: "btnSave",
text: "Save"
}, {
reference: "btnClose",
text: "Close"
}
],
closable: true
});
}
</script>
<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="" Theme="Gray"/>
<ext:TextField runat="server" FieldLabel="Dummy Field"></ext:TextField>
<ext:TabPanel runat="server" ID="panel" >
<Items>
<ext:GridPanel
runat="server"
ID="grid"
Width="750"
Title="Grid"
Height="420">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Company"
DataIndex="company"
Flex="1"
/>
<ext:CommandColumn runat="server" Width="200">
<Commands>
<ext:GridCommand Icon="NoteEdit" Text="Add Tab- FAILS" CommandName="Edit">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Handler="addTabThrougGridError()" />
</Listeners>
</ext:CommandColumn>
<ext:CommandColumn runat="server" Width="200">
<Commands>
<ext:GridCommand Icon="NoteEdit" Text="Add Tab - OK" CommandName="Edit">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
<Listeners>
<Command Handler="addTabThrougGridOK()" />
</Listeners>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:TabPanel>
<ext:Button runat="server" Text="Add Tab - OK" OnClientClick="addPanel()"></ext:Button>
</form>
<script>
Ext.onReady(onload);
</script>
</body>
</html>
Ext.Version:
Chrome: Version {version: "90.0.4430.85", pad: 0, shortVersion: "900443085", releaseValue: 0
core: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
ext: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0
extjs: Version {version: "7.2.0.67", pad: 0, shortVersion: "72067", releaseValue: 0