JavaScript DHTML/Ext JS/Ext

Материал из Web эксперт
Перейти к: навигация, поиск

Add custom event and event handler to a class and fire that event

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
  var Component =  Ext.extend(Ext.util.Observable, {
    constructor : function() {
      this.addEvents("myEventName");
      Component.superclass.constructor.call(this);
    }
  });
  
  var myComponent = new Component();
  
  myComponent.on("myEventName", function() {
     alert("hello");
  });
  
  myComponent.fireEvent("myEventName");
    
    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Call Cold Fusion Component and pass in parameter

   
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
  var example1 = new Ext.Panel({
    applyTo:"my",
    title:"Chapter 12: Example 2",
    width:250,
    height:250,
    frame:true,
    autoLoad:{
      url:"Example.cfc",
      params:{
        method:"yourName",
        returnFormat:"plain",
        id:1
      }
    }
  });
});

</script>
<body>
<div id="my" style="margin:25px;"></div>
</body>
</html>



Call render method to render to body

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = "side";
    var bd = Ext.getBody();
    /*
     *  Simple form  
     */
    bd.createChild({tag: "h2", html: "Form 1 - Very Simple"});

    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:"save-form.php",
        frame:true,
        title: "Simple Form",
        bodyStyle:"padding:5px 5px 0",
        width: 350,
        defaults: {width: 230},
        defaultType: "textfield",
        items: [{
                fieldLabel: "First Name",
                name: "first",
                allowBlank:false
            },{
                fieldLabel: "Last Name",
                name: "last"
            },{
                fieldLabel: "Company",
                name: "company"
            }, {
                fieldLabel: "Email",
                name: "email",
                vtype:"email"
            }, new Ext.form.TimeField({
                fieldLabel: "Time",
                name: "time",
                minValue: "8:00am",
                maxValue: "6:00pm"
            })
        ],
        buttons: [{
            text: "Save"
        },{
            text: "Cancel"
        }]
    });
    simple.render(document.body);
});
</script> 
</div>
</body>
</html>



Extend Ext.util.Observable to create new class

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
  var Component =  Ext.extend(Ext.util.Observable, {
    constructor : function() {
      this.addEvents("myEventName");
      Component.superclass.constructor.call(this);
    }
  });
  
  var myComponent = new Component();
  
  myComponent.on("myEventName", function() {
     alert("hello");
  });
  
  myComponent.fireEvent("myEventName");
    
    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Ext.getBody().createChild({tag: "h2", html: "html value"});

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = "side";
    var bd = Ext.getBody();

    bd.createChild({tag: "h2", html: "Form 1 - Very Simple"});
});
</script> 
</div>
</body>
</html>



Use Ext.extend to create new class

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
  var Component =  Ext.extend(Ext.util.Observable, {
    constructor : function() {
      this.addEvents("myEventName");
      Component.superclass.constructor.call(this);
    }
  });
  
  var myComponent = new Component();
  
  myComponent.on("myEventName", function() {
     alert("hello");
  });
  
  myComponent.fireEvent("myEventName");
    
    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



use Ext.get() to get a html tag

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style type="text/css">
div {
  border  : 1px solid #AAAAAA; 
  width   : 200; 
  cursor  : pointer;
  padding : 2px 2px 2px 2px;
  margin  : 2px 2px 2px 2px;  
}  
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
  var myDiv1 = Ext.get("div1");
  
  myDiv1.createChild({
      tag  : "div",
      html : "Child " + 1 
  });
});
</script> 
<div id="div1">asdf</div>
<div id="div2">asdf2</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Ext&oldid=2395»