Sep 04, 2013, 1:27 PM
[CLOSED] FormPanel in ComponentMenuItem not resizing
Hi,
I have a ComponentMenuItem which is a form panel. The form panel (in some scenarios) may contain only display fields.
Although I can load records into the form panel, when the component menu item is shown, you cannot see the display field values, only the labels. If TextFields are used, this is not an issue as the initial width of the text field is applied to the Form Panel menu. However, if the display field value is initially blank, then the width is close to zero for the value so only the width of the field label applies.
Is there a way to get the component to resize correctly when the menu item is shown (i tried a few things but couldn't get it to work). I cannot know what the text size will be.
The only thing I can think at the moment is a CSS min-width on the display field. This works, but you then have to guess a reasonable width which I cannot always do.
Is there a better way that I have missed?
Sample code to reproduce problem (at least in Firefox):
Thanks!
I have a ComponentMenuItem which is a form panel. The form panel (in some scenarios) may contain only display fields.
Although I can load records into the form panel, when the component menu item is shown, you cannot see the display field values, only the labels. If TextFields are used, this is not an issue as the initial width of the text field is applied to the Form Panel menu. However, if the display field value is initially blank, then the width is close to zero for the value so only the width of the field label applies.
Is there a way to get the component to resize correctly when the menu item is shown (i tried a few things but couldn't get it to work). I cannot know what the text size will be.
The only thing I can think at the moment is a CSS min-width on the display field. This works, but you then have to guess a reasonable width which I cannot always do.
Is there a better way that I have missed?
Sample code to reproduce problem (at least in Firefox):
<%@ Page Language="C#" %>
<!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>Form in component item in menu</title>
<style>
/* .display-field { min-width: 100px; } */
</style>
<script>
MenuTest = {
onBeforeShow: function(menu) {
var form = menu.items.get(0).component,
record = new Ext.data.Record({ DisplayField1: 'My field value' });
form.getForm().loadRecord(record);
}
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Width="300" Height="300">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Menu1">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Component">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:ComponentMenuItem runat="server" Shift="false">
<Component>
<ext:FormPanel runat="server" LabelWidth="150">
<Items>
<ext:DisplayField
runat="server"
FieldLabel="Field label"
DataIndex="DisplayField1"
Cls="display-field"
/>
</Items>
</ext:FormPanel>
</Component>
</ext:ComponentMenuItem>
</Items>
<Listeners>
<BeforeShow Fn="MenuTest.onBeforeShow" />
</Listeners>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</body>
</html>
Notice the sample code has the CSS min-width workaround commented out. Uncomment it to see it work, but it is then dependent on expected values. I can use other CSS like max-width and ellipsis etc... But wondering if I am missing a trick?Thanks!
Last edited by Daniil; Sep 05, 2013 at 3:22 AM.
Reason: [CLOSED]