ExtJs_ExtButton示例

来源：互联网发布：java多例模式编辑：程序博客网时间：2024/06/15 03:01

=>button.html

<html>

<head>

<title>Ext Buttons</title>

</head>

</body>

</html>

=>button.css

.add {

}

.add16 {

}

.add24 {

}

.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, {

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)');

});