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

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

Версия 09:59, 26 мая 2010

Absolute position layout

  
<!--
/*!
 * 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() {
    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>



Set anchor perentage

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Use minor anchor value to layout the form

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Use minor value as the anchor value

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Use two anchor value to layout form

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Window fit layout

  
<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> 
<div id="div1">asdf</div>
</body>
</html>



Window layout: absolute

  
<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> 
<div id="div1">asdf</div>
</body>
</html>