What's New?

[CLOSED] Cannot remove style during DirectEvent.

  1. #1
    Nov 24, 2013, 2:42 AM

    [CLOSED] Cannot remove style during DirectEvent.

    I attempted to set panel1.BodyStyle="", but this does not actually does nothing because it's attempting to applyStyles, but that doesn't remove the one that is there. Need that.
    Last edited by Daniil; Nov 29, 2013 at 2:22 PM. Reason: [CLOSED]
  2. #2
    Nov 25, 2013, 7:09 AM
    Hi @michaeld,

    Removing all the inline styles of a Panel's body is not an option, because there are not just the styles by developer. And I cannot imagine a possibility to distinguish a developer's styles from others automatically.

    For example, this
    <ext:Panel 
    ID="Panel1" 
    runat="server" 
    BodyStyle="background-color: green;" 
    Html="Test" />
    produces a body element with
    style="background-color: green; width: 1280px; left: 0px; top: 0px; height: 16px;"
    So, a solution could be this call during a DirectEvent:
    this.Panel1.Body.ApplyStyles("background: none;");
    I would also suggest you consider a possibility to use CSS classes for styling instead of inline styles. It will be easier to manage them on the fly.
  3. #3
    Nov 26, 2013, 2:54 AM
    I did revert to using addCls/removeCls when I discovered this deficiency. Though, I guess what you're telling me is the only way to remove a style would be to find the id from the dom similar to this:
    http://www.w3schools.com/jsref/met_e...eattribute.asp

    Sadly, without it in the API, the developer has to get the individual dom elements by calling extjs api from the parent. I just thought it would be a nice add for thoroughness.
  4. #4
    Nov 26, 2013, 2:59 AM
    Quote Originally Posted by Daniil View Post
    Removing all the inline styles of a Panel's body is not an option, because there are not just the styles by developer. And I cannot imagine a possibility to distinguish a developer's styles from others automatically.

    For example, this
    <ext:Panel 
    ID="Panel1" 
    runat="server" 
    BodyStyle="background-color: green;" 
    Html="Test" />
    produces a body element with
    style="background-color: green; width: 1280px; left: 0px; top: 0px; height: 16px;"
    So, a solution could be this call during a DirectEvent:
    this.Panel1.Body.ApplyStyles("background: none;");
    As for your example, it would be nice to be able to have this feature request ...
    this.Panel1.Body.RemoveStyles("background");
    Your example represents a case where you can replace a single style, but not all style tags have a situation where a value can be replaced. Sometimes they just have to be removed altogether to establish original style inheritance.
  5. #5
    Nov 26, 2013, 4:41 AM
    The following appears to be working in IE9, FireFox and Chrome.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void RemoveStyle(object sender, DirectEventArgs e)
    {
        this.Panel1.Body.Dom.Set("style", "");
    }

    protected void RemoveBackgroundColor(object sender, DirectEventArgs e)
    {
        this.Panel1.Body.Dom.Call("style.removeProperty", "background-color");
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Button runat="server" Text="Remove style" OnDirectClick="RemoveStyle" />

        <ext:Button runat="server" Text="Remove background-color" OnDirectClick="RemoveBackgroundColor" />

        <ext:Panel
            ID="Panel1"
            runat="server"
            BodyStyle="background-color: green;"
            Html="Test" />
        
    </form>
</body>
</html>
  6. #6
    Nov 26, 2013, 10:44 AM
    Thanks. And this extension based on your suggestion provides a general way to do this for all elements:

    		public static void RemoveStyle( this Element elem ) {
			elem.Dom.Set( "style", "" );
		}
		public static void RemoveStyleProperty( this Element elem, string property ) {
			elem.Dom.Call( "style.removeProperty", property );
		}
  7. #7
    Nov 26, 2013, 2:06 PM
    Sorry, this appears to be not working in IE9 and Chrome:
    this.Panel1.Body.Dom.Set("style", "");
    This works. I going to add it to the trunk.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void RemoveStyle(object sender, DirectEventArgs e)
    {
        this.Panel1.Body.Call("removeAttribute", "style");
    }

    protected void RemoveBackgroundColor(object sender, DirectEventArgs e)
    {
        this.Panel1.Body.Call("removeStyleProperty", "background-color");
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        Ext.dom.Element.override({
            removeStyleProperty: function (prop) {
                this.dom.style[Ext.isIE8m ? "removeAttribute" : "removeProperty"](prop);
            },

            removeAttribute: function (attr) { 
                this.dom.removeAttribute(attr);
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Button runat="server" Text="Remove style" OnDirectClick="RemoveStyle" />

        <ext:Button runat="server" Text="Remove background-color" OnDirectClick="RemoveBackgroundColor" />

        <ext:Panel
            ID="Panel1"
            runat="server"
            BodyStyle="background-color: green;"
            Html="Test" />

    </form>
</body>
</html>
  8. #8
    Nov 26, 2013, 2:10 PM
    Committed to the trunk.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void RemoveStyle(object sender, DirectEventArgs e)
    {
        this.Panel1.Body.RemoveAttribute("style");
    }

    protected void RemoveBackgroundColor(object sender, DirectEventArgs e)
    {
        this.Panel1.Body.RemoveStyleProperty("background-color");
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Button runat="server" Text="Remove style" OnDirectClick="RemoveStyle" />

        <ext:Button runat="server" Text="Remove background-color" OnDirectClick="RemoveBackgroundColor" />

        <ext:Panel
            ID="Panel1"
            runat="server"
            BodyStyle="background-color: green;"
            Html="Test" />

    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Delete / Remove directevent handler in code behind
    By jwf in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Jan 14, 2014, 4:24 AM
  2. [CLOSED] Add/remove columns to <ext:ColumnLayout in DirectEvent
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Sep 05, 2011, 11:45 AM
  3. [CLOSED] how to disable/clear success handler of directEvent while in the directEvent code
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 09, 2011, 7:04 PM
  4. [CLOSED] Adding a button directevent in a directevent method
    By ogokgol in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 31, 2011, 10:29 AM
  5. [CLOSED] Hot to remove a DirectEvent from a GridPanel in Javascript
    By Pablo in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: May 02, 2011, 5:36 PM

Posting Permissions