JavaScript DHTML/Ext JS/Column Layout

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

Column layout window

  
<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        : 400,
  border       : false,
  autoScroll   : true,
  id           : "myWin",
  title        : "A Column layout",
  layout       : "column",
  defaults     : {
    frame : true
  },
  items        : [
    {
      title       : "Col 1",
      id          : "col1",
      columnWidth : .3
      
    },
    {
      title       : "Col 2",
      html        : "20% relative width",
      columnWidth : .2
      
    },
    {
      title : "Col 3",
      html  : "100px fixed width",
      width : 100
    },
    {
      title       : "Col 4",
      frame       : true,
      html        : "50% relative width",
      columnWidth : .5
    }
  ]
  
});
myWin.show();

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



Multi Column 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(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = "side";
    var bd = Ext.getBody();

    /*
     *  Form 3  
     */
    bd.createChild({tag: "h2", html: "Form 3 - A little more complex"});

    var top = new Ext.FormPanel({
        labelAlign: "top",
        frame:true,
        title: "Multi Column, Nested Layouts and Anchoring",
        bodyStyle:"padding:5px 5px 0",
        width: 600,
        items: [{
            layout:"column",
            items:[{
                columnWidth:.5,
                layout: "form",
                items: [{
                    xtype:"textfield",
                    fieldLabel: "First Name",
                    name: "first",
                    anchor:"95%"
                }, {
                    xtype:"textfield",
                    fieldLabel: "Company",
                    name: "company",
                    anchor:"95%"
                }]
            },{
                columnWidth:.5,
                layout: "form",
                items: [{
                    xtype:"textfield",
                    fieldLabel: "Last Name",
                    name: "last",
                    anchor:"95%"
                },{
                    xtype:"textfield",
                    fieldLabel: "Email",
                    name: "email",
                    vtype:"email",
                    anchor:"95%"
                }]
            }]
        },{
            xtype:"htmleditor",
            id:"bio",
            fieldLabel:"Biography",
            height:200,
            anchor:"98%"
        }],
        buttons: [{
            text: "Save"
        },{
            text: "Cancel"
        }]
    });
    top.render(document.body);
});
</script> 
</div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Column_Layout&oldid=2355»