JavaScript DHTML/Ext JS/ButtonGroup

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

Button group Demo

  
<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>
<script type="text/javascript">
Ext.onReady(function() {
    new Ext.ButtonGroup({
        renderTo     : Ext.getBody(),   
    
        title        : "Edit",
        //layout       : "hbox",
        layoutConfig : {
          //  align : "stretch"
        },
        defaults    : {
            flex : 1
        },
        items       : [
            {
                text       : "Paste as",
                iconCls    : "icon-clipboard",
                //arrowAlign : "bottom",
                menu       : [
                    {
                        text    : "Plain Text",
                    },
                    {
                        text    : "Word",
                    }
                ]
            },
            {
                text    : "Copy",
            },
            {
                text    : "Cut",
            },
            {
                text    : "Clear",
            }
        ]
    });
});

</script>
<body>

</body>
</html>



Buttons overflow

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<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">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      html  : "Panels can contain Children",
      frame : true
    }
  ];
}
Ext.onReady(function() {
    var handleAction = function(action){
        Ext.example.msg("<b>Action</b>", "You clicked ""+action+""");
    };
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : "Panel 1",
        height:250,
        width: 500,
        tbar: [{
            xtype:"splitbutton",
            text: "Menu Button",
            iconCls: "add16",
            handler: handleAction.createCallback("Menu Button"),
            menu: [{text: "Menu Item 1", handler: handleAction.createCallback("Menu Item 1")}]
        },"-",{
            xtype:"splitbutton",
            text: "Cut",
            iconCls: "add16",
            handler: handleAction.createCallback("Cut"),
            menu: [{text: "Cut menu", handler: handleAction.createCallback("Cut menu")}]
        },{
            text: "Copy",
            iconCls: "add16",
            handler: handleAction.createCallback("Copy")
        },{
            text: "Paste",
            iconCls: "add16",
            menu: [{text: "Paste menu", handler: handleAction.createCallback("Paste menu")}]
        },"-",{
            text: "Format",
            iconCls: "add16",
            handler: handleAction.createCallback("Format")
        },"->",{
            text: "Right",
            iconCls: "add16",
            handler: handleAction.createCallback("Right")
        }],
    items    : makeChildren("Panel 1")
  });

}); 
</script>
</body>
</html>



hbox for ButtonGroup 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>
<script type="text/javascript">
Ext.onReady(function() {
    var userCrudBtns = [
        {
            xtype      : "splitbutton",
            text       : "New",
            iconCls    : "icon-user_add",
            menu       : [
                {
                    text    : "A",
                },
                {
                    text    : "B",
                },
                {
                    text    : "C",
                }
            ]
        },
        {
            text    : "Edit",
        },
        {
            text    : "Delete",
        }
    ];
     new Ext.ButtonGroup({
        renderTo     : Ext.getBody(),
        height       : 75,
        width        : 200,
        title        : "Manage Users",
        //layout       : "hbox",
        layoutConfig : {
          //  align : "stretch"
        },
         defaults    : {
             flex : 1
         },
        items       : userCrudBtns
    });
});

</script>
<body>

</body>
</html>



Medium icons, arrows to the bottom

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<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">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      html  : "Panels can contain Children",
      frame : true
    }
  ];
}
Ext.onReady(function() {
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : "Panel 1",
    width    : 800,
    height   : 180,
                tbar: [{
            xtype: "buttongroup",
            title: "Clipboard",
            defaults: {
                scale: "medium",
                iconAlign:"top"
            },
            items: [{
                xtype:"splitbutton",
                text: "Menu Button",
                iconCls: "add24",
                arrowAlign:"bottom",
                menu: [{text: "Menu Item 1"}]
            },{
                xtype:"splitbutton",
                text: "Cut",
                iconCls: "add24",
                arrowAlign:"bottom",
                menu: [{text: "Cut Menu Item"}]
            },{
                text: "Copy",
                iconCls: "add24",
                cls: "x-btn-as-arrow"
            },{
                text: "Paste",
                iconCls: "add24",
                arrowAlign:"bottom",
                menu: [{text: "Paste Menu Item"}]
            },{
                text: "Format<br/>Stuff",
                iconCls: "add24"
            }]
        },{
            xtype: "buttongroup",
            title: "Other Bogus Actions",
            defaults: {
                scale: "medium",
                iconAlign:"top"
            },
            items: [{
                xtype:"splitbutton",
                text: "Menu Button",
                iconCls: "add24",
                arrowAlign:"bottom",
                menu: [{text: "Menu Item 1"}]
            },{
                xtype:"splitbutton",
                text: "Cut",
                iconCls: "add24",
                arrowAlign:"bottom",
                menu: [{text: "Cut Menu Item"}]
            },{
                text: "Copy",
                iconCls: "add24",
                cls: "x-btn-as-arrow"
            },{
                text: "Paste",
                iconCls: "add24",
                arrowAlign:"bottom",
                menu: [{text: "Paste Menu Item"}]
            },{
                text: "Format",
                iconCls: "add24",
                cls: "x-btn-as-arrow"
            }]
        }]
,
    items    : makeChildren("Panel 1")
  });

}); 
</script>
</body>
</html>



Medium icons, text and arrows to the left

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<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">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      html  : "Panels can contain Children",
      frame : true
    }
  ];
}
Ext.onReady(function() {
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : "Panel 1",
    width    : 800,
    height   : 180,
                tbar: [{
            xtype:"buttongroup",
            items: [{
                text: "Cut",
                iconCls: "add24",
                scale: "medium"
            },{
                text: "Copy",
                iconCls: "add24",
                scale: "medium"
            },{
                text: "Paste",
                iconCls: "add24",
                scale: "medium",
                menu: [{text: "Paste Menu Item"}]
            }]
        }, {
            xtype:"buttongroup",
            items: [{
                text: "Format",
                iconCls: "add24",
                scale: "medium"
            }]
        }],
    items    : makeChildren("Panel 1")
  });

}); 
</script>
</body>
</html>



Small icons, text and arrows to the left

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<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">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      html  : "Panels can contain Children",
      frame : true
    }
  ];
}
Ext.onReady(function() {
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : "Panel 1",
    width    : 800,
    height   : 180,
        tbar: [{
            xtype:"buttongroup",
            items: [{
                text: "Cut",
                iconCls: "add16",
                scale: "small"
            },{
                text: "Copy",
                iconCls: "add16",
                scale: "small"
            },{
                text: "Paste",
                iconCls: "add16",
                scale: "small",
                menu: [{text: "Paste Menu Item"}]
            }]
        }, {
            xtype:"buttongroup",
            items: [{
                text: "Format",
                iconCls: "add16",
                scale: "small"
            }]
        }],
    items    : makeChildren("Panel 1")
  });

}); 
</script>
</body>
</html>



Two column button group

  
<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>
<script type="text/javascript">
Ext.onReady(function() {
    new Ext.ButtonGroup({
        renderTo : Ext.getBody(),
        title    : "Clipboard",
        columns  : 2,
        items    : [
            {
                text       : "Paste",
                rowspan    : "3",
                width      : 50,
                scale      : "large",
                arrowAlign : "bottom",
                iconAlign  : "top",
                menu       : [
                    {
                        text    : "Plain Text",
                    },
                    {
                        text    : "Word",
                    }
                ]
            },
            {
                text : "icon-cut"
            },
            {
                text : "icon-page_white_copy"
            },
            {
                text : "icon-paintbrush"
            }
        ]
    });
});

</script>
<body>

</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/ButtonGroup&oldid=2353»