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

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

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

Anchor 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.onReady(function() {
            var viewport = new Ext.Viewport({
                layout:"anchor",
                anchorSize: {width:800, height:600},
                items:[{
                    title:"Item 1",
                    html:"Content 1",
                    width:800,
                    anchor:"right 20%"
                },{
                    title:"Item 2",
                    html:"Content 2",
                    width:300,
                    anchor:"50% 30%"
                },{
                    title:"Item 3",
                    html:"Content 3",
                    width:600,
                    anchor:"-100 50%"
                }]
            });
        });</script>
</body>
</html>



Anchor Layout with Forms

  
<!--
/*!
 * 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",
        labelWidth: 55,
        url:"save-form.php",
        defaultType: "textfield",
        items: [{
            fieldLabel: "Send To",
            name: "to",
            anchor:"100%"  // anchor width by percentage
        },{
            fieldLabel: "Subject",
            name: "subject",
            anchor: "100%"  // anchor width by percentage
        }, {
            xtype: "textarea",
            hideLabel: true,
            name: "msg",
            anchor: "100% -53"  // anchor width by percentage and height by raw adjustment
        }]
    });
    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> 
<div id="pw">
</body>
</html>



Anchor width and height

  
<!--
/*!
 * 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>



Anchor width by percentage

  
<!--
/*!
 * 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>



Nested Layouts and Anchoring

  
<!--
/*!
 * 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/Anchor&oldid=2333»