в 09:59, 26 мая 2010

2010-05-26T09:59:51Z

Admin: 1 версия

2010-05-26T07:21:24Z

1 версия

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

==Add action event listener handler to a button==



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

</source>

==Add button a window==



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

</source>

==Add icon to Button==



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

</source>

==Align bottons: cener==



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

</source>

==Align icon along the button 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>
<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>

</source>

==Align icon to right side==



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

</source>

==Align icon to top==



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

</source>

==Button scale large==



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

</source>

==Button scale: "medium"==



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

</source>

==Button text and handler==



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

</source>

==Button with click handler==



<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 btnHandler = function(btn) {
btn.el.frame();
}

new Ext.Button({
renderTo : Ext.getBody(),
text : "Plain Button",
handler : btnHandler
});
});

</script>
<body>

</body>
</html>

</source>

==Create a button and add to panel==



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

</source>

==Create button with text and handler==



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

</source>

==Define button action in a separate function==



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

</source>

==Disable a button after clicking==



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

</source>

==Get button text from button object==



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

</source>

==Icon align 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>
<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>

</source>

==Icon align 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>
<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>

</source>

==Icon align right==



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

</source>

==Icon align top==



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

</source>

==Inline function along with buttons==



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

</source>

==Set width and height for button==



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

</source>

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

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

в 09:59, 26 мая 2010

Admin: 1 версия