What's New?

BorderLayout KeyMap Error

  1. #1
    Dec 15, 2009, 5:43 PM

    BorderLayout KeyMap Error

    Hi,
    I have a panel in south region of borderlayout, which is on load collapsed. I have defined a keymap for the components inside the panel with the target set to those components.

    On load I get an error this.el is not defined. It worked properly last Monday.

    you can reproduce the error by following. Set Collapsed = false for panel in north region and refresh. The error disappears.
    <%@ Page Language="C#" %>

<%@ 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="Head2" runat="server">
    <title></title>
    
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
       
    <ext:panel width="500" height="500" runat="server"><Items>
    
           <ext:BorderLayout runat="server">
    <North Collapsible="True"  Split="True">
    <ext:panel width="300" height="300"  collapsible="true" collapsed="true"><items><ext:textarea ID="txtbox" runat="server" >
           
           </ext:textarea></items></ext:panel>
    
</North>
        <Center><ext:Panel runat="server" Title="Center" Layout="Fit"/></Center></ext:BorderLayout></Items></ext:panel>
   
    <ext:KeyMap ID="KeyMap1" runat="server" target="txtbox" >
    <ext:KeyBinding Scope="txtbox" >
    <Keys>
    <ext:Key Code="ENTER"/>
    </Keys>
    <Listeners>
    <Event Handler="Ext.Msg.alert('',txtbox.getValue());" />
    </Listeners>
    </ext:KeyBinding>
    </ext:KeyMap>
   
    </form>
</body>
</html>
  2. #2
    Dec 16, 2009, 8:36 AM

    RE: BorderLayout KeyMap Error

    Hi,

    Please set ForceLayout="true" for North panel (or for panel which contains BorderLayout)
  3. #3
    Dec 16, 2009, 10:37 AM

    RE: BorderLayout KeyMap Error

    But I never did tht earlier... Did something change in last 10 days?

  4. #4
    Dec 16, 2009, 11:34 AM

    RE: BorderLayout KeyMap Error

    Hi Amit,

    There has been a lot of changes to the client-side rendering logic of the Layouts in ExtJS 3.1 in an attempt to improve performance. The error you are getting is now caused because when a BorderLayout Region is initially collapsed (or hidden), the layout logic is not triggered and child items are not instantiated until they become visible.


    Obviously this change may cause some problems with existing code. Yes, a lot has changed in the last 10 days.


    We're discussing the issue and possible future direction, although ultimately this is an issue of Performance vs Convenience.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Dec 16, 2009, 11:42 AM

    RE: BorderLayout KeyMap Error

    :(... ok...

    M now facing some weird problems with rendering in Border layout... I will post a sample soon...


  6. #6
    Dec 16, 2009, 12:41 PM

    RE: BorderLayout KeyMap Error

    In the following example... Click on Expand... I have a Center Region and a South Region...

    South is by default hidden. I need to drag the split bar for it to show...

    This happens only if its hidden by default... If its expanded by default it renders properly...

    <%@ Page Language="C#" %>

<%@ 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="Head2" runat="server">
    <title></title>
    
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
  <ext:Window ID="chatwindow" runat="server" Title="Test"   Closable="false" Height="400" Width="700" Resizable="true"  Icon="Group"
         >
         <Items>
        <ext:BorderLayout ID="BorderLayout1" runat="server">
            <Center>
            <ext:Panel ID="Panel1" runat="server" Width="200px" Header="false" Layout="Fit">
            <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
            <Items>
            
            <ext:ToolbarFill />
            <ext:Button ID="btn" runat="server" Text="Expand" Icon="Door">
            <Listeners>
            <Click Handler="panelChat.expand();" />
            </Listeners>
            </ext:Button>
            </Items>
            </ext:Toolbar>
            </TopBar>
            <Items>
            
         
        
        
        </Items>
            </ext:Panel>
            
           
            
            </Center>
           <East Collapsible="true"  >
           <ext:Panel runat="server" Width="500px" Collapsible="true" ForceLayout="true"  ID="panelChat"  Collapsed="true" Header="false" Layout="Fit">
           <Items>
           <ext:BorderLayout ID="BorderLayout2" runat="server">
           <center>
                <ext:TabPanel runat="server" CloseAction="Hide"  EnableTabScroll="true"  ID="chatTabs" AutoScroll="true"   AnimScroll="true"  >
                <Plugins>
                <ext:TabScrollerMenu ID="TabScrollerMenu1" runat="server" PageSize="6"  ></ext:TabScrollerMenu>
                </Plugins>
                </ext:TabPanel>
           </center>
           
           <south split="true" MinHeight="120px" MaxHeight="120px" Collapsible="false" ><Items>
           <ext:Panel ID="Panel2" runat="server" Collapsible="false" ForceLayout="true" Height="90px" Layout="Fit"><Items>
           <ext:textarea ID="chatEditor" runat="server" >
           
           </ext:textarea>
           
           </Items>
           <BottomBar>
           <ext:Toolbar ID="Toolbar2" runat="server">
           <Items>
           
            
           <ext:ToolbarFill ID="ToolbarFill1" runat="server"></ext:ToolbarFill>
           <ext:Button ID="Button2" runat="server" Text="Send" StandOut="true" Icon="Mail">
           <Listeners>
           <Click Handler="sendMessage(chatTabs.getActiveTab().getId());" /> 
           </Listeners>
           </ext:Button>
           </Items>
           </ext:Toolbar>
           </BottomBar>
           </ext:Panel>
            
            </Items> 
            </south>
           </ext:BorderLayout>
           </Items>
           </ext:Panel>
           </East>
        </ext:BorderLayout>
   
        </Items>
       
    </ext:Window>


           
    </form>
</body>
</html>
  7. #7
    Dec 17, 2009, 8:05 AM

    RE: BorderLayout KeyMap Error

    Hi,

    That deferred layout has one more duty...


    Many controls cannot correctly render to a hidden area because the hidden area has no size (it is feature of html markup)


    Your example demonstrates that case. You set ForceLayout="true" and panel (south) renders to the hiodden area and can't correct fit the textarea because panel's body has empty size (while its collapsing)


    Try to set the following listener for south panel


    <Render Handler="this.setHeight(120);" Delay="100" />
  8. #8
    Dec 17, 2009, 8:09 AM

    RE: BorderLayout KeyMap Error

    I vote for Convenience :S....

    This is going to be a big headache... and make things more complicated to work with...


  9. #9
    Dec 17, 2009, 8:12 AM

    RE: BorderLayout KeyMap Error

    I vote for Convenience
    Yes, I tend to agree in this situation, although we're still thinking about the issue. So far there is not an obvious direction.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  10. #10
    Dec 17, 2009, 8:18 AM

    RE: BorderLayout KeyMap Error

    I will implement what Vlad has provided me with...

    Can you guys update this thread when ever a permanent solution to this is found?

    Thanks,

Similar Threads

  1. [CLOSED] Error when binding KeyMap to not active Panel in TabPanel
    By Fredrik in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 02, 2012, 1:52 PM
  2. [CLOSED] Visual error when hiding and showing panels in BorderLayout
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 27, 2011, 1:41 PM
  3. [CLOSED] KeyMap Error MVC2
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 02, 2011, 8:35 PM
  4. Property 'KeyMap' does not have a property named 'Target' error.
    By santhu12smart in forum 1.x Help
    Replies: 1
    Last Post: Feb 22, 2011, 11:25 PM
  5. [1.0] GridPanel.render() error in BorderLayout
    By d.urazalinov in forum 1.x Help
    Replies: 3
    Last Post: Jun 22, 2010, 6:07 PM

Posting Permissions