What's New?

[CLOSED] Window | Toolbar | DropDown | IE Rendering Issue

  1. #1
    Dec 28, 2009, 8:13 AM

    [CLOSED] Window | Toolbar | DropDown | IE Rendering Issue

    Hi,
    Please check the Rendering issue in IE in the images attached. I think its because of DropDown. I am attaching the code too.

    Also please check tht in FF, the DropDown is aligned a bit towards top, and is not in line with the buttons on right.

    <ext:window runat="server" Width = "1000" height="650" Layout="Fit" Maximizable="true" Closable="false" id="calWindow" >
   <TopBar>
    <ext:Toolbar runat="server">
        <Items>
        <ext:DropDownField ID="calDD" FieldLabel="Select Calendar" LazyInit="false"   runat="server" Editable="false" Width="300"  Icon="Combo">
          <Component>
              <ext:TreePanel ID="calendarTree"
                  runat="server" 
                  Header="false"
                  Icon="Accept"
                  Height="300"
                  Shadow="None"
                  UseArrows="true"
                  AutoScroll="true"
                  Animate="true"
                  EnableDD="true"
                  ContainerScroll="true" 
                  RootVisible="false"
                  ContextMenuID="treecontextMenu">
                  <Editors>
                   <ext:TreeEditor runat="server"  AutoEdit="false">
                  <Field>
                      <ext:TextField runat="server" />
                  </Field>
              </ext:TreeEditor>
              </Editors>
                <Listeners>
          <AfterRender Fn="setCalendar" Delay="10" />
          <ContextMenu Handler="#{treecontextMenu}.node = node; node.select();#{treecontextMenu}.showAt(e.getPoint());" />
          </Listeners>    
               </ext:TreePanel>
          </Component>
      </ext:DropDownField>
            <ext:ToolbarSpacer Width="10px" />
            <ext:Button runat="server" ToolTip="Quickly Add a New Calendar" ID="btnAddCalendar" Icon="Add" StandOut="true" >
            <listeners>
            <click Fn="addCalendar"></click>
            </listeners>
            </ext:Button>
            <ext:ToolbarSpacer Width="30px" />
            <ext:Button Text="Set as Default Calendar" StandOut="true" Icon="ArrowRight" runat="server" ID="btnDefault">
            <listeners>
            <click Fn="setDefaultCalendar"></click>
            </listeners>
            </ext:Button>
            <ext:ToolbarFill />
            <ext:Button runat="server" ID="btnSharing" StandOut="true" Icon="ArrowJoin" Text="Sharing Settings">
            <Listeners>
            <Click Handler="calShare_winSelUsers.show();calShare_ddCalendars.setValue(calendarTree.getSelectedNodes().nodeID);" />
            </Listeners>
            </ext:Button>
        </Items>
        </ext:Toolbar>
    </TopBar>
        <AutoLoad Mode="IFrame" MaskMsg="Loading Calendar..." ShowMask="true">
    </AutoLoad>
</ext:window>
    Thanks,

  2. #2
    Dec 28, 2009, 12:32 PM

    RE: [CLOSED] Window | Toolbar | DropDown | IE Rendering Issue

    Hi,

    I don't recommend to use FieldLabel inside toolbar because IE incorrectly display FieldLabel. At this moment I can suggest to use simple Label. Removing FieldLabel should remove FF issue. But in IE the top aligning issue is presented. Therefore it is need add padding manually. The top aligning can depend from neighbor controls (I am not sure why it is need investigate ExtJS code)

    Please see the following sample which fix both issue
    <%@ 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="Head1" runat="server">
    <title></title>
    
    <style type="text/css">
        .ext-ie .cmbPad{
            padding-top:1px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
    <ext:Window runat="server" Width="1000" Height="650" Layout="Fit" Maximizable="true"
        Closable="false" ID="calWindow">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Label runat="server" Text="Select Calendar:&amp;nbsp;" />
                    <ext:DropDownField ID="calDD" LazyInit="false" runat="server"
                        Editable="false" Width="300" Icon="Combo" CtCls="cmbPad" >
                        <Component>
                            <ext:TreePanel ID="calendarTree" runat="server" Header="false" Icon="Accept" Height="300"
                                Shadow="None" UseArrows="true" AutoScroll="true" Animate="true" EnableDD="true"
                                ContainerScroll="true" RootVisible="false">
                                <Editors>
                                    <ext:TreeEditor ID="TreeEditor1" runat="server" AutoEdit="false">
                                        <Field>
                                            <ext:TextField ID="TextField1" runat="server" />
                                        </Field>
                                    </ext:TreeEditor>
                                </Editors>
                              <Root>
                                <ext:TreeNode Text="sd" />
                              </Root>
                            </ext:TreePanel>
                        </Component>
                    </ext:DropDownField>
                    <ext:ToolbarSpacer Width="10px" />
                    <ext:Button runat="server" ToolTip="Quickly Add a New Calendar" ID="btnAddCalendar"
                        Icon="Add" StandOut="true">
                       
                    </ext:Button>
                    <ext:ToolbarSpacer Width="30px" />
                    <ext:Button Text="Set as Default Calendar" StandOut="true" Icon="ArrowRight" runat="server"
                        ID="btnDefault">
                        
                    </ext:Button>
                    <ext:ToolbarFill />
                    <ext:Button runat="server" ID="btnSharing" StandOut="true" Icon="ArrowJoin" Text="Sharing Settings">
                        
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <AutoLoad Mode="IFrame" MaskMsg="Loading Calendar..." ShowMask="true">
        </AutoLoad>
    </ext:Window>
    </form>
</body>
</html>
  3. #3
    Dec 28, 2009, 12:46 PM

    RE: [CLOSED] Window | Toolbar | DropDown | IE Rendering Issue

    Cool... May be this is a bug and can be fixed in future...

    Thanks,
  4. #4
    Dec 28, 2009, 12:49 PM

    RE: [CLOSED] Window | Toolbar | DropDown | IE Rendering Issue

    Hi,

    It is definetely bug and should be fixed in the final release
  5. #5
    Dec 28, 2009, 12:52 PM

    RE: [CLOSED] Window | Toolbar | DropDown | IE Rendering Issue

    Cool thanks...

Similar Threads

  1. [CLOSED] Slow performance in rendering toolbar with button group & buttons
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 29, 2012, 11:26 AM
  2. [CLOSED] Issue with dropdown box's value to apply to EXT.NET
    By rosua in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 12, 2012, 9:08 AM
  3. [CLOSED] Pecilluar issue in the DropDown, UI Issue
    By Shanth in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 22, 2012, 12:02 PM
  4. [CLOSED] Treepanel inside Dropdown - Set value of Dropdown as selected value of tree
    By jthompson in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 08, 2011, 6:17 PM
  5. [CLOSED] Dropdown tool in Window header
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 30, 2010, 4:46 PM

Posting Permissions