JavaScript DHTML/Ext JS/HTML — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

1 Add child tag to div tag
2 Add click event handler to div tag
3 Align div tag to another tag
4 Child from a config object
5 Create Child for Div tag
6 Create child for div tag with html tags
7 Get last children
8 Get width and height of a Div tag
9 Insert child as node to a div tag
10 Insert node to an indexed position
11 Nested div tag with border
12 Put mask to a div tag
13 Remove a tag from html body
14 Set Div tag size
15 Set style for created children
16 Use update method to set new text for div tag

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>

JavaScript DHTML/Ext JS/HTML — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

Add child tag to div tag

Add click event handler to div tag

Align div tag to another tag

Child from a config object

Create Child for Div tag

Create child for div tag with html tags

Get last children

Get width and height of a Div tag

Insert child as node to a div tag

Insert node to an indexed position

Nested div tag with border

Put mask to a div tag

Remove a tag from html body

Set Div tag size

Set style for created children

Use update method to set new text for div tag

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)