JavaScript DHTML/Ext JS/ButtonGroup
Содержание
Button group Demo
<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> <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>
</source>
Buttons overflow
<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"> 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("Action", "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>
</source>
hbox for ButtonGroup 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> <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>
</source>
Medium icons, arrows to the bottom
<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"> 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
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>
</source>
Medium icons, text and arrows to the left
<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"> 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>
</source>
Small icons, text and arrows to the left
<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"> 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>
</source>
Two column button group
<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> <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>
</source>
