[CLOSED] Behavior javascript

  1. #1

    [CLOSED] Behavior javascript

    Hi,

    Is it a good strategy to use with controls Ext javascript Behavior?
    Last edited by geoffrey.mcgill; Aug 23, 2011 at 7:13 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Can you provide more information (code sample?) on what you mean by "javascript Behavior"?
    Geoffrey McGill
    Founder
  3. #3
    Samplehttp://www.ccs.neu.edu/home/dherman/...r/example.html

    or

    <!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>
  4. #4
    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

    <%@ 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>
  5. #5
    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

    <%@ 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>
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Modified behavior on grid
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 30, 2012, 11:07 AM
  2. [CLOSED] RowExpander strange behavior
    By FAS in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 24, 2012, 7:37 PM
  3. [CLOSED] possible reason for this behavior?
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 01, 2010, 4:23 PM
  4. DateField behavior
    By Krisller in forum 1.x Help
    Replies: 1
    Last Post: Aug 23, 2010, 11:09 PM
  5. ext:Desktop Behavior
    By yaser82 in forum Open Discussions
    Replies: 3
    Last Post: Jan 01, 2009, 8:15 PM

Posting Permissions