JavaScript DHTML/Ext JS/Layout
Содержание
Absolute position layout
<source lang="html4strict">
<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 JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function() {
var form = new Ext.form.FormPanel({ baseCls: "x-plain", layout:"absolute", url:"save-form.php", defaultType: "textfield", items: [{ x: 0, y: 5, xtype:"label", text: "Send To:" },{ x: 60, y: 0, name: "to", anchor:"100%" // anchor width by percentage },{ x: 0, y: 35, xtype:"label", text: "Subject:" },{ x: 60, y: 30, name: "subject", anchor: "100%" // anchor width by percentage },{ x:0, y: 60, xtype: "textarea", name: "msg", anchor: "100% 100%" // anchor width and height }] }); var window = new Ext.Window({ title: "Resize Me", width: 500, height:300, minWidth: 300, minHeight: 200, layout: "fit", plain:true, bodyStyle:"padding:5px;", buttonAlign:"center", items: form, buttons: [{ text: "Send" },{ text: "Cancel" }] }); window.show();
}); </script> </body> </html>
</source>
Set anchor perentage
<source lang="html4strict">
<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 myWin = new Ext.Window({ height : 300, width : 300, layout : "anchor", autoScroll : true, border : false, anchorSize : "400", items : [ { title : "Panel1", anchor : "100%, 25%", frame : true }, { title : "Panel2", anchor : "50%, 50%", frame : true }, { title : "Panel3", anchor : "50%, 25%", frame : true }, { title : "Panel3", anchor : "0, 25%", frame : true } ] }); myWin.show();
});
</script>
</body> </html>
</source>
Use minor anchor value to layout the form
<source lang="html4strict">
<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 myWin = new Ext.Window({ height : 220, width : 230, bodyStyle : "padding: 5px", layout : "form", labelWidth : 50, defaultType : "field", items : [ { fieldLabel : "Name", anchor : "-4" } ] }); myWin.show();
}); </script>
</body> </html>
</source>
Use minor value as the anchor value
<source lang="html4strict">
<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 myWin = new Ext.Window({ height : 300, width : 300, layout : "anchor", autoScroll : true, id : "myWin", border : false, anchorSize : "400", items : [ { title : "Panel1", anchor : "-50, -150", frame : true }, { title : "Panel2", height : 150, anchor : "-10", frame : true } ] }); myWin.show();
});
</script>
</body> </html>
</source>
Use two anchor value to layout form
<source lang="html4strict">
<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 myWin = new Ext.Window({ height : 220, width : 230, bodyStyle : "padding: 5px", layout : "form", labelWidth : 50, defaultType : "field", items : [ { xtype : "textarea", fieldLabel : "Name", anchor : "-4, -135" } ] }); myWin.show();
}); </script>
</body> </html>
</source>
Window fit layout
<source lang="html4strict">
<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 myWin = new Ext.Window({ height : 200, width : 200, layout : "fit", autoScroll : true, border : false, items : [ { title : "Panel1", html : "I fit in my parent!", frame : true } ] }); myWin.show();
}); </script>
</body> </html>
</source>
Window layout: absolute
<source lang="html4strict">
<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 myWin = new Ext.Window({ height : 300, width : 300, layout : "absolute", autoScroll : true, id : "myWin", border : false, items : [ { title : "Panel1", x : 50, y : 50, height : 100, width : 100, html : "x: 50, y:100", frame : true }, { title : "Panel2", x : 90, y : 120, height : 75, width : 77, html : "x: 90, y: 120", frame : true } ] }); myWin.show();
}); </script>
</body> </html>
</source>