JavaScript DHTML/Ext JS/Button
Содержание
- 1 Add action event listener handler to a button
- 2 Add button a window
- 3 Add icon to Button
- 4 Align bottons: cener
- 5 Align icon along the button bottom
- 6 Align icon to right side
- 7 Align icon to top
- 8 Button scale large
- 9 Button scale: "medium"
- 10 Button text and handler
- 11 Button with click handler
- 12 Create a button and add to panel
- 13 Create button with text and handler
- 14 Define button action in a separate function
- 15 Disable a button after clicking
- 16 Get button text from button object
- 17 Icon align bottom
- 18 Icon align left
- 19 Icon align right
- 20 Icon align top
- 21 Inline function along with buttons
- 22 Set width and height for button
Add action event listener handler to a button
<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 myButton = new Ext.Button({
text : "hide me",
handler : function() {
myPanel.el.switchOff({
callback : function() {
myPanel.el.slideIn.defer(500, myPanel.el, []);
}
});
}
});
myPanel = new Ext.Panel({
width : 200,
height : 100,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add button a 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 doSwitch = function(btn) {
alert("asdf");
}
var myWin = new Ext.Window({
x : 100,
height : 200,
width : 300,
layout : "fit",
title : "myWin2",
buttons : [
{
text : "OK",
handler : doSwitch
}
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add icon to Button
<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>
<style>
.add24 {
background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
text : "hide me",
split: true,
width:50,
height:50,
iconCls: "add24",
defaultType: "splitbutton",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 200,
height : 100,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Align bottons: cener
<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 win = new Ext.Window({
height : 305,
width : 200,
modal : true,
title : "Rigid window",
html : "Unable to move or resize.",
plain : true,
border : false,
resizable : false,
draggable : false,
closable : false,
buttonAlign : "center",
buttons : [
{
text : "OK",
handler : function() {
win.close();
}
}
]
})
win.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Align icon along the button bottom
<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>
<style>
.add24 {
background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
text : "hide me",
split: true,
width:50,
height:50,
iconAlign: "bottom",
iconCls: "add24",
defaultType: "splitbutton",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 200,
height : 100,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Align icon to right side
<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>
<style>
.add24 {
background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
text : "hide me",
split: true,
width:90,
height:90,
iconAlign: "right",
iconCls: "add24",
defaultType: "splitbutton",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 400,
height : 400,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Align icon to top
<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>
<style>
.add24 {
background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
text : "hide me",
split: true,
width:90,
height:90,
iconAlign: "top",
iconCls: "add24",
defaultType: "splitbutton",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 400,
height : 400,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Button scale large
<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>
<style>
.add24 {
background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
text : "hide me",
scale: "large",
iconAlign: "top",
iconCls: "add24",
defaultType: "splitbutton",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 400,
height : 400,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Button scale: "medium"
<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>
<style>
.add24 {
background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
text : "hide me",
scale: "medium",
iconAlign: "top",
iconCls: "add24",
defaultType: "splitbutton",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 400,
height : 400,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Button text and handler
<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 myButton = new Ext.Button({
text : "hide me",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 200,
height : 100,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Button with click handler
<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 btnHandler = function(btn) {
btn.el.frame();
}
new Ext.Button({
renderTo : Ext.getBody(),
text : "Plain Button",
handler : btnHandler
});
});
</script>
<body>
</body>
</html>
Create a button and add to panel
<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 myButton = new Ext.Button({
text : "hide me",
handler : function() {
myPanel.el.switchOff({
callback : function() {
myPanel.el.slideIn.defer(500, myPanel.el, []);
}
});
}
});
myPanel = new Ext.Panel({
width : 200,
height : 100,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Create button with text and handler
<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 myBtnHandler = function(btn) {
Ext.MessageBox.alert("You Clicked", btn.text);
}
var fileBtn = new Ext.Button({
text : "File",
handler : myBtnHandler
});
var editBtn = new Ext.Button({
text : "Edit",
handler : myBtnHandler
});
var myTopToolbar = new Ext.Toolbar({
items : [
fileBtn,
editBtn
]
});
var myPanel = new Ext.Panel({
width : 600,
height : 650,
title : "Ext Panels rock!",
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
html : "My first Toolbar Panel!"
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Define button action in a separate function
<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 doSwitch = function(btn) {
alert("asdf");
}
var myWin = new Ext.Window({
x : 100,
height : 200,
width : 300,
layout : "fit",
title : "myWin2",
buttons : [
{
text : "OK",
handler : doSwitch
}
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Disable a button after clicking
<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 doSwitch = function(btn) {
btn.disable();
}
var myWin = new Ext.Window({
x : 100,
height : 200,
width : 300,
layout : "fit",
title : "myWin2",
buttons : [
{
text : "OK",
handler : doSwitch
}
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Get button text from button object
<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 myBtnHandler = function(btn) {
Ext.MessageBox.alert("You Clicked", btn.text);
}
var fileBtn = new Ext.Button({
text : "File",
handler : myBtnHandler
});
var editBtn = new Ext.Button({
text : "Edit",
handler : myBtnHandler
});
var myTopToolbar = new Ext.Toolbar({
items : [
fileBtn,
editBtn
]
});
var myPanel = new Ext.Panel({
width : 600,
height : 650,
title : "Ext Panels rock!",
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
html : "My first Toolbar Panel!"
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Icon align bottom
<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 btnHandler = function(btn) {
alert("clicked");
}
var menuItems = [
{
text : "Add",
},
{
text : "Remove",
}
];
new Ext.Button({
renderTo : Ext.getBody(),
iconCls : "icon-add",
text : "iconAlign : "left"",
arrowAlign : "bottom",
iconAlign : "bottom",
handler : btnHandler,
menu : menuItems
});
});
</script>
<body>
</body>
</html>
Icon align left
<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 btnHandler = function(btn) {
alert("clicked");
}
var menuItems = [
{
text : "Add",
},
{
text : "Remove",
}
];
new Ext.Button({
renderTo : Ext.getBody(),
iconCls : "icon-add",
text : "iconAlign : "left"",
arrowAlign : "bottom",
iconAlign : "left",
handler : btnHandler,
menu : menuItems
});
});
</script>
<body>
</body>
</html>
Icon align right
<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 btnHandler = function(btn) {
alert("clicked");
}
var menuItems = [
{
text : "Add",
},
{
text : "Remove",
}
];
new Ext.Button({
renderTo : Ext.getBody(),
iconCls : "icon-add",
text : "iconAlign : "left"",
arrowAlign : "bottom",
iconAlign : "right",
handler : btnHandler,
menu : menuItems
});
});
</script>
<body>
</body>
</html>
Icon align top
<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 btnHandler = function(btn) {
alert("clicked");
}
var menuItems = [
{
text : "Add",
},
{
text : "Remove",
}
];
new Ext.Button({
renderTo : Ext.getBody(),
iconCls : "icon-add",
text : "iconAlign : "left"",
arrowAlign : "bottom",
iconAlign : "top",
handler : btnHandler,
menu : menuItems
});
});
</script>
<body>
</body>
</html>
Inline function along with buttons
<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() {
Ext.QuickTips.init();
var htmlEditor = {
xtype : "htmleditor",
fieldLabel : "",
anchor : "100% 100%",
allowBlank : false,
validateValue : function() {
var val = this.getRawValue();
return false;
}
}
var f = {
xtype : "form",
labelWidth : -20,
items : htmlEditor,
border : false
}
new Ext.Window({
title : "",
layout : "fit",
height : 300,
width : 600,
items : f,
buttons : [
{
text : "Is the html editor valid??",
handler : function() {
var isValid = Ext.getCmp("ext-comp-1003").form.isValid();
var msg = (isValid) ? "valid" : "invalid";
Ext.MessageBox.alert("Title", "The HTML Editor is " + msg);
}
}
]
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Set width and height for button
<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>
<style>
.add24 {
background-image: url(ext-3.0.0/examples/button/images/add24.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myButton = new Ext.Button({
text : "hide me",
split: true,
width:50,
height:50,
iconCls: "add24",
defaultType: "splitbutton",
handler : function() {
alert("asdf");
}
});
myPanel = new Ext.Panel({
width : 200,
height : 100,
title : "Title me",
frame : true,
renderTo : Ext.getBody(),
items : myButton
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>