=>button.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="buttonsCen.js"></script>
<link rel="stylesheet" type="text/css" href="buttonsCen.css" />
</head>
<body id="docbody">
</body>
</html>
=>button.css
.add {
background-image: url(images/add.gif) !important;
}
.add16 {
background-image: url(images/add16.gif) !important;
}
.add24 {
background-image: url(images/add24.gif) !important;;
}
.btn-panel td {
padding-left: 5px;
}
h2 {
color: #083772 !important;
margin: 20px 0 0 !important;
padding: 5px;
background: #eee;
width: 400px;
}
h3 {
font-weight: normal !important;
}
body {
font-family: helvetica,tahoma,verdana,sans-serif;
padding: 20px;
padding-top: 32px;
font-size: 13px;
background-color: #fff !important;
}
p {
margin-bottom: 15px;
}
h1 {
font-size: large;
margin-bottom: 20px;
}
h2 {
font-size: 14px;
color: #333;
font-weight: bold;
margin: 10px 0;
}
.example-info {
width: 150px;
border: 1px solid #c3daf9;
border-top: 1px solid #DCEAFB;
border-left: 1px solid #DCEAFB;
background: #ecf5fe url( info-bg.fig ) repeat-x;
font-size: 10px;
padding: 8px;
}
pre.code {
background: #F8F8F8;
border: 1px solid #e8e8e8;
padding: 10px;
margin: 10px;
margin-left: 0px;
border-left: 5px solid #e8e8e8;
font-size: 12px !important;
line-height: 14px !important;
}
.msg .x-box-mc {
font-size: 14px;
}
#msg-div {
position: absolute;
left: 35%;
top: 10px;
width: 250px;
z-index: 20000;
}
.x-grid3-row-body p {
margin: 5px 5px 10px 5px !important;
}
=>button.js
/**
* Ext JS Library 3.0.0
*/
ButtonPanel = Ext.extend(Ext.Panel, {
layout: 'table',
defaultType: 'button',
baseCls: 'x-plain',
cls: 'btn-panel',
renderTo: 'docbody',
menu: undefined,
split: false,
layoutConfig: {
columns: 3
},
constructor: function(desc, buttons){
// apply text configs
for(var i=0,b; b=buttons[i]; i++) {
b.menu = this.menu;
b.enableToggle = this.enableToggle;
b.split = this.split;
b.arrowAlign = this.arrowAlign;
}
var items = [{
xtype: 'box',
autoEl: {tag: 'h3', html: desc, style: "padding: 15px 0 3px;"},
colspan: 3
}].concat(buttons);
ButtonPanel.superclass.constructor.call(this, {
items: items
})
}
});
Ext.onReady(function() {
// this function renders a block of buttons
function renderButtons(title) {
Ext.getBody().createChild({tag: 'h2', html: title});
new ButtonPanel('纯文本', [{
text: '添加用户'
}, {
text: '添加用户',
scale: 'medium' //16px
}, {
text: '添加用户',
scale: 'large'
}]);
new ButtonPanel("Icon图标", [{
iconCls: "add16"
}, {
iconCls: "add24",
scale: 'medium'
}, {
iconCls: 'add',
scale: "large"
}]);
new ButtonPanel("图文混排(左)", [{
text: "添加用户",
iconCls: 'add16'
}, {
text: "添加用户",
iconCls: "add24",
scale: "medium"
}, {
text: "添加用户",
iconCls: "add",
scale: "large"
}]);
new ButtonPanel("图文混排(顶部)", [{
text: "添加用户",
iconCls: 'add16',
iconAlign: 'top'
}, {
text: "添加用户",
iconCls: "add24",
scale: "medium",
iconAlign: "top"
}, {
text: "添加用户",
iconCls: 'add',
scale: 'large',
iconAlign: 'top'
}]);
new ButtonPanel("图文混排(右)", [{
text: "添加用户",
iconCls: 'add16',
iconAlign: "right"
}, {
text: "添加用户",
iconCls: "add24",
scale: 'medium',
iconAlign: 'right'
}, {
text: "添加用户",
iconCls: 'add',
scale: 'large',
iconAlign: 'right'
}]);
new ButtonPanel("图文混排(底部)", [{
text: "添加用户",
iconCls: 'add16',
iconAlign: 'bottom'
}, {
text: "添加用户",
iconCls: 'add24',
scale: 'medium',
iconAlign: "bottom"
}, {
text: "添加用户",
iconCls: 'add',
scale: 'large',
iconAlign: "bottom"
}]);
}
renderButtons('常规Buttons');
ButtonPanel.override({
enableToggle: true
});
renderButtons("Toggle Buttons[enableToggle: true]");
ButtonPanel.override({
enableToggle: undefined,
menu: {items: [{text: "MenuItem1"},{text: "MenuItem2"},{text: "MenuItem3"}]}
});
renderButtons("菜单Buttons");
ButtonPanel.override({
split: true,
defaultType: 'splitbutton'
})
renderButtons("Split Button");
ButtonPanel.override({
split: false,
defaultType: 'button',
arrowAlign: 'bottom'
});
renderButtons("Menu Buttons (Arrow on bottom)");
ButtonPanel.override({
split: true,
defaultType: 'splitbutton'
});
renderButtons('Split Buttons (Arrow on bottom)');
});