Hi,
Is it a good strategy to use with controls Ext javascript Behavior?
Printable View
Hi,
Is it a good strategy to use with controls Ext javascript Behavior?
Hi,
Can you provide more information (code sample?) on what you mean by "javascript Behavior"?
Samplehttp://www.ccs.neu.edu/home/dherman/...r/example.html
or
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" href="/home/dherman/javascript/javascript.css"/>
<style type="text/css">
.box {
background-color: #f8f8f8;
border: solid black 1px;
margin: 10px;
padding: 10px;
}
</style>
<script type="text/javascript" src="selector.js"></script>
<script type="text/javascript" src="behavior.js"></script>
<script type="text/javascript">
// <![CDATA[
// Notice how this is quite declarative: no variable
// assignment required of the user.
var rules = {
'.clickable' : {
onclick : function() { alert('clicked!'); }
},
'.hoverable' : {
onmouseover : function() { this.style.color = 'red'; },
onmouseout : function() { this.style.color = 'black'; }
}
};
Behavior.register(rules);
// ]]>
</script>
</head>
<body>
<div class="pageBody">
<h2>Example</h2>
<p>
This page contains a script registering two style rules:
</p>
<pre class="snippet">var rules = {
'.clickable' : {
onclick : function() { alert('clicked!'); }
},
'.hoverable' : {
onmouseover : function() { this.style.color = 'red'; },
onmouseout : function() { this.style.color = 'black'; }
}
};</pre>
<p>
The first rule renders the following <code>div</code> clickable, meaning it
responds to the <code>onclick</code> event with an alert box:
</p>
<div class="box clickable">
I am clickable.
</div>
<p>
The second rule renders the following <code>div</code> hoverable, meaning it
response to the mouse hovering over it by turning its text red. Notice that this
behavior is <i>combined</i> with the existing behavior: the <code>div</code>
originally has an <code>onmouseover</code> event that turns its text bold, which
is not overridden.
</p>
<div class="box hoverable"
onmouseover="this.style.fontWeight='bold'"
onmouseout="this.style.fontWeight='normal'">
I am hoverable.
</div>
</div>
</body>
</html>
Hi,
I think it's not a good idea to mix libraries/toolkits if you can achieve a requirement using a single toolkit.
I mean that you can easily handle "hover" and "click" events of <div> using Ext.Net.
Example
Code:<%@ 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 runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var onReady = function () {
var div = Ext.get("div1");
div.hover(
function () {
this.addClass("div1-hover");
},
function () {
this.removeClass("div1-hover");
},
div
);
div.on("click", onClick);
};
var onClick = function() {
Ext.Msg.alert("div", "I'm clicked");
};
</script>
<style type="text/css">
.div1 {
height: 50px;
width: 50px;
border: 2px solid;
}
.div1-hover {
background-color: red;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<DocumentReady Handler="onReady();" />
</Listeners>
</ext:ResourceManager>
<div id="div1" class="div1"></div>
</form>
</body>
</html>
Mixing libraries shouldn't be a problem, although to justify adding another library I'd think there should be some greater benefit than just basic event syntax.
You can simplify the above sample posted by @Daniil even further if you wish. The syntax then becomes very similar.
Example
Code:<%@ 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 runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var onReady = function () {
Ext.get("div1")
.hover(
function (e, el) {
Ext.get(this).addClass("div1-hover");
},
function (e, el) {
Ext.get(this).removeClass("div1-hover");
}
)
.on("click", function() {
Ext.Msg.alert("div", "I'm clicked");
});
};
</script>
<style type="text/css">
.div1 {
height : 50px;
width : 50px;
border : 2px solid;
}
.div1-hover {
background-color : red;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<DocumentReady Handler="onReady();" />
</Listeners>
</ext:ResourceManager>
<div id="div1" class="div1"></div>
</form>
</body>
</html>