PDA

View Full Version : [CLOSED] Cannot remove style during DirectEvent.



michaeld
Nov 24, 2013, 3:42 AM
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.

Daniil
Nov 25, 2013, 8: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.

michaeld
Nov 26, 2013, 3: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_element_removeattribute.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.

michaeld
Nov 26, 2013, 3:59 AM
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.

Daniil
Nov 26, 2013, 5: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>

michaeld
Nov 26, 2013, 11: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 );
}

Daniil
Nov 26, 2013, 3: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>

Daniil
Nov 26, 2013, 3: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>