http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FExt_JS%2FHTML
JavaScript DHTML/Ext JS/HTML - История изменений
2026-04-04T21:22:00Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/HTML&diff=2392&oldid=prev
в 09:59, 26 мая 2010
2010-05-26T09:59:51Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:59, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/HTML&diff=2393&oldid=prev
Admin: 1 версия
2010-05-26T07:21:22Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add child tag to div tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
<br />
myDiv1.createChild({<br />
tag : "div",<br />
html : "Child " + 1 <br />
});<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
<div id="div2">asdf2</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Add click event handler to div tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
<br />
<br />
Ext.get("div1").on("click", function(eventObj, elRef) {<br />
alert("myDiv click Handler, source elment ID: " + elRef.id);<br />
});<br />
<br />
<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Align div tag to another tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
<br />
myDiv1.alignTo("div1", "div2");<br />
<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
<div id="div2">asdf2</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Child from a config object==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
myDiv1.createChild({<br />
tag : "div",<br />
html : "Child from a config object"<br />
});<br />
<br />
<br />
});<br />
</script> <br />
<div id="div1"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Create Child for Div tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
myDiv1.createChild("Child from a string");<br />
<br />
});<br />
</script> <br />
<div id="div1"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Create child for div tag with html tags==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
myDiv1.createChild("<div>Element from a string</div>");<br />
<br />
});<br />
</script> <br />
<div id="div1"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get last children==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
<br />
var lastChild = Ext.get("div1").child("div:last-child");<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
<div id="div2">asdf2</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get width and height of a Div tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
myDiv1.setSize(200, 300, true);<br />
alert(myDiv1.getWidth());<br />
alert(myDiv1.getHeight()); <br />
<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Insert child as node to a div tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
<br />
myDiv1.insertFirst({<br />
tag : "div",<br />
html : "Child inserted"<br />
});<br />
<br />
<br />
});<br />
</script> <br />
<div id="div1"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Insert node to an indexed position==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
<br />
myDiv1.insertFirst({<br />
tag : "div",<br />
html : "Child inserted"<br />
});<br />
myDiv1.insertFirst({<br />
tag : "div",<br />
html : "Child inserted"<br />
});<br />
myDiv1.insertFirst({<br />
tag : "div",<br />
html : "Child inserted"<br />
});<br />
myDiv1.createChild({<br />
tag : "div",<br />
id : "id",<br />
html : "Child inserted"<br />
}, myDiv1.dom.childNodes[3]);<br />
<br />
});<br />
</script> <br />
<div id="div1"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Nested div tag with border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
myDiv1.createChild({<br />
tag : "div",<br />
id : "nestedDiv",<br />
style : "border: 1px dashed; padding: 5px;",<br />
children : {<br />
tag : "div",<br />
html : "A nested div",<br />
style : "color: red; border: 1px solid"<br />
}<br />
});<br />
<br />
<br />
});<br />
</script> <br />
<div id="div1"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Put mask to a div tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
<br />
myDiv1.mask("No more action!");<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
<div id="div2">asdf2</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Remove a tag from html body==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
<br />
myDiv1.remove();<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
<div id="div2">asdf2</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Set Div tag size==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
myDiv1.setSize(200, 300, true);<br />
<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Set style for created children==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
myDiv1.createChild({<br />
tag : "div",<br />
id : "nestedDiv",<br />
style : "border: 1px dashed; padding: 5px;",<br />
});<br />
<br />
<br />
});<br />
</script> <br />
<div id="div1"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Use update method to set new text for div tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html><br />
<head><br />
<title>Hello World Window</title><br />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /><br />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script><br />
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script><br />
<style type="text/css"><br />
div {<br />
border : 1px solid #AAAAAA; <br />
width : 200; <br />
cursor : pointer;<br />
padding : 2px 2px 2px 2px;<br />
margin : 2px 2px 2px 2px; <br />
} <br />
</style><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
Ext.onReady(function() {<br />
var myDiv1 = Ext.get("div1");<br />
var newX = 50;<br />
var newY = 10;<br />
<br />
myDiv1.moveTo(newX, newY, {<br />
callback : function() {<br />
var msgX = Math.ceil(this.getX());<br />
var msgY= Math.ceil(this.getY()); <br />
var msg = "X = " + msgX + " Y = " + msgY;<br />
this.update(msg);<br />
}<br />
});<br />
<br />
});<br />
</script> <br />
<div id="div1">asdf</div><br />
</body><br />
</html><br />
<br />
</source></div>
Admin