JavaScript DHTML/Ext JS/HTML

Материал из Web эксперт
Версия от 07:21, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add child tag to div 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>



Add click event handler to div 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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    
    
    Ext.get("div1").on("click", function(eventObj, elRef) {
         alert("myDiv click Handler, source elment ID: " +  elRef.id);
    });

    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Align div tag to another 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.alignTo("div1", "div2");

});
</script> 
<div id="div1">asdf</div>
<div id="div2">asdf2</div>
</body>
</html>



Child from a config object

 
<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 myDiv1 = Ext.get("div1");
  myDiv1.createChild({
    tag  : "div",
    html : "Child from a config object"
  });


});
</script> 
<div id="div1"></div>
</body>
</html>



Create Child for Div 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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
  var myDiv1 = Ext.get("div1");
  myDiv1.createChild("Child from a string");

});
</script> 
<div id="div1"></div>
</body>
</html>



Create child for div tag with html tags

 
<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 myDiv1 = Ext.get("div1");
  myDiv1.createChild("<div>Element from a string</div>");

});
</script> 
<div id="div1"></div>
</body>
</html>



Get last children

 
<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");
  
    var lastChild   = Ext.get("div1").child("div:last-child");
});
</script> 
<div id="div1">asdf</div>
<div id="div2">asdf2</div>
</body>
</html>



Get width and height of a Div 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.setSize(200, 300, true);
  alert(myDiv1.getWidth());
  alert(myDiv1.getHeight()); 

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Insert child as node to a div 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>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
  var myDiv1 = Ext.get("div1");

  myDiv1.insertFirst({
    tag  : "div",
    html : "Child inserted"
  });


});
</script> 
<div id="div1"></div>
</body>
</html>



Insert node to an indexed position

 
<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 myDiv1 = Ext.get("div1");

  myDiv1.insertFirst({
    tag  : "div",
    html : "Child inserted"
  });
  myDiv1.insertFirst({
    tag  : "div",
    html : "Child inserted"
  });
  myDiv1.insertFirst({
    tag  : "div",
    html : "Child inserted"
  });
  myDiv1.createChild({
    tag  : "div",
    id   : "id",
    html : "Child inserted"
  }, myDiv1.dom.childNodes[3]);

});
</script> 
<div id="div1"></div>
</body>
</html>



Nested div tag with border

 
<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 myDiv1 = Ext.get("div1");
  myDiv1.createChild({
    tag      : "div",
    id       : "nestedDiv",
    style    : "border: 1px dashed; padding: 5px;",
    children : {
       tag  : "div",
       html : "A nested div",
       style : "color: red; border: 1px solid"
    }
  });


});
</script> 
<div id="div1"></div>
</body>
</html>



Put mask to a div 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.mask("No more action!");
});
</script> 
<div id="div1">asdf</div>
<div id="div2">asdf2</div>
</body>
</html>



Remove a tag from html body

 

<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.remove();
});
</script> 
<div id="div1">asdf</div>
<div id="div2">asdf2</div>
</body>
</html>



Set Div tag size

 
<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.setSize(200, 300, true);

});
</script> 
<div id="div1">asdf</div>
</body>
</html>



Set style for created children

 
<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 myDiv1 = Ext.get("div1");
  myDiv1.createChild({
    tag      : "div",
    id       : "nestedDiv",
    style    : "border: 1px dashed; padding: 5px;",
  });


});
</script> 
<div id="div1"></div>
</body>
</html>



Use update method to set new text for div 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");
  var newX = 50;
  var newY = 10;
  
  myDiv1.moveTo(newX, newY, {
    callback : function() {
      var msgX = Math.ceil(this.getX());
      var msgY= Math.ceil(this.getY());        
      var msg = "X = " + msgX + " Y = " + msgY;
      this.update(msg);
    }
  });

});
</script> 
<div id="div1">asdf</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/HTML&oldid=2393»