[CLOSED] Setting UI in behind code and keeping frame (rounded corners)

  1. #1

    [CLOSED] Setting UI in behind code and keeping frame (rounded corners)

    If I reset the UI in behind code I lose the rounded corners. Am I missing something?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <script runat="server">
        protected void ChangeUI(object sender, DirectEventArgs e)
        {
            UIPanel.UI = UI.Danger;
            UIPanel.Update();
        }
    </script>
    <head runat="server">
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Container runat="server" Width="400" Height="300" Layout="VBoxLayout" PaddingSpec="10 10 10 10" >
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Panel ID="UIPanel" runat="server" Title="UI from behind code" TitleAlign="Center" Frame="true" Flex="1" UI="Success" />
            </Items>
        </ext:Container>
        <ext:Button runat="server" Text="Change UI" OnDirectClick="ChangeUI" />
    </body>
    </html>
    Last edited by Daniil; Mar 31, 2015 at 5:36 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    There is a couple of things.

    1. .Update() is supposed to be used only for native ASP.NET controls to update them during a DirectEvent (not always possible, though). Yes, it might work for Ext.NET controls as in your case, but it is an overkill. UI might be changed on the fly without updating/re-rendering a control. Please remove the .Update() call.

    2. If you remove the .Update() call, the it starts functioning worse:) It is because the danger UI styles are not loaded automatically. Using an .Update() it was a side effect that it loads the danger UI styles. Though, it is still not a reason of using .Update(). If you intensively use different UI settings I suggest to set SeparateUIStyles="false" for the ResourceManager. It causes all the UI styles to be loaded at once. After that you can switch UI flawlessly by setting the UI property on server side or calling a JavaScript .setUI() method.

    3. Now the issue with a frame. Yes, it is being lost. I'll explain why. The following code is executed on initialization of a Panel instance.
    if (me.frame) {
        me.setUI(me.ui + '-framed');
    }
    It is why it works initially.

    When you call UIPanel.UI = UI.Danger; on the fly, then this JavaScript is generated - App.UIPanel.setUI(\"danger\");.

    The setUI method doesn't check for the Frame setting.

    I can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void ChangeUI(object sender, DirectEventArgs e)
        {
            this.Panel1.UI = UI.Danger;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.panel.Panel.override({
                setUI: function(ui) {
                    if (this.frame && ui.indexOf && (ui.indexOf("framed") < 0)) {
                        ui += "-framed"; 
                    }
    
                    this.callParent(arguments);
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" SeparateUIStyles="false" />
    
        <ext:Panel
            ID="Panel1"
            runat="server"
            Width="200"
            Height="200"
            Title="Panel"
            Frame="true"
            UI="Success" />
    
        <ext:Button runat="server" Text="Change UI" OnDirectClick="ChangeUI" />
    </body>
    </html>
  3. #3
    Works like magic. Like I always tell everyone "It is only 1's and 0's". There is an explanation for everything, you just have to be able to find it.

    Please close the thread it looks great.

Similar Threads

  1. Replies: 1
    Last Post: Feb 18, 2014, 8:07 PM
  2. [CLOSED] Panels with rounded corners
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 27, 2012, 8:44 PM
  3. Replies: 0
    Last Post: Aug 20, 2010, 1:25 PM
  4. Replies: 0
    Last Post: May 28, 2009, 2:33 PM
  5. [CLOSED] Round corners and shadow on panel?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 23, 2009, 7:58 AM

Posting Permissions