в 09:59, 26 мая 2010

2010-05-26T09:59:51Z

Admin: 1 версия

2010-05-26T07:21:18Z

1 версия

Новая страница

==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("<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>

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

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

← Предыдущая	Версия 09:59, 26 мая 2010
(нет различий)

JavaScript DHTML/Ext JS/ButtonGroup - История изменений

в 09:59, 26 мая 2010

Admin: 1 версия