JavaScript DHTML/Ext JS/Toolbar
Содержание
- 1 Add combobox to toolbar
- 2 Add group to Toolbar(Office 2007 style)
- 3 Add icon button to Toolbar
- 4 Add menu buttons with icon classes to a Toolbar
- 5 Add menu button to Toolbar
- 6 Add plain button to Toolbar
- 7 Add separator to Toolbar
- 8 Add split buttons with icons to Toolbar
- 9 Add split button to Toolbar
- 10 Add tool bar to window
- 11 Align buttons all the way to the right
- 12 Button toolbar
- 13 Create Pre-defined mark to define tool bar
- 14 Create Toolbar Fill
- 15 Create tool bar with two buttons
- 16 Mix and match icon sizes to create a huge unusable toolbar
- 17 Multi columns (No titles, double stack)
- 18 Render Toolbar to document body
- 19 Set icon class for buttons in a Toolbar
- 20 Set toolbar height
Add combobox to toolbar
<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 tbar = {
items : [
{
text : "Add",
},
"-",
{
text : "Update",
},
"-",
{
text : "Delete",
},
"->",
"Select one of these: ",
{
xtype : "combo",
width : 100,
store : [
"A",
"B",
"C"
]
}
]
};
new Ext.Window({
width : 500,
height : 200,
tbar : tbar
}).show();
});
</script>
<body>
</body>
</html>
Add group to Toolbar(Office 2007 style)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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",
columns: 2,
defaults: {
scale: "small"
},
items: [{
xtype:"splitbutton",
text: "Menu Button",
iconCls: "add16",
menu: [{text: "Menu Item 1"}]
},{
xtype:"splitbutton",
text: "Cut",
iconCls: "add16",
menu: [{text: "Cut Menu Item"}]
},{
text: "Copy",
iconCls: "add16"
},{
text: "Paste",
iconCls: "add16",
menu: [{text: "Paste Menu Item"}]
},{
text: "Format",
iconCls: "add16"
}]
},{
xtype: "buttongroup",
title: "Other Bugus Actions",
columns: 2,
defaults: {
scale: "small"
},
items: [{
xtype:"splitbutton",
text: "Menu Button",
iconCls: "add16",
menu: [{text: "Menu Button 1"}]
},{
xtype:"splitbutton",
text: "Cut",
iconCls: "add16",
menu: [{text: "Cut Menu Item"}]
},{
text: "Copy",
iconCls: "add16"
},{
text: "Paste",
iconCls: "add16",
menu: [{text: "Paste Menu Item"}]
},{
text: "Format",
iconCls: "add16"
}]
}],
items : makeChildren("Panel 1")
});
});
</script>
</body>
</html>
Add icon button to Toolbar
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items:
[
{
xtype: "tbbutton",
cls: "x-btn-icon",
icon: "http://www.wbex.ru/style/logo.png"
},
{
text: "Button"
},"->",
{
text: "Button"
},
{
xtype: "tbseparator"
},{
text: "Button"
},{
xtype: "tbspacer"
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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 : 400,
height : 180,
tbar: [{
xtype:"splitbutton",
text: "Menu Button",
iconCls: "add16",
menu: [{text: "Menu Button 1"}]
},"-",{
xtype:"splitbutton",
text: "Cut",
iconCls: "add16",
menu: [{text: "Cut Menu Item"}]
},{
text: "Copy",
iconCls: "add16"
},{
text: "Paste",
iconCls: "add16",
menu: [{text: "Paste Menu Item"}]
},"-",{
text: "Format",
iconCls: "add16"
}],
items : makeChildren("Panel 1")
});
});
</script>
</body>
</html>
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbbutton",
text: "Menu Button",
menu: [
{
text: "Better"
},
{
text: "Good"
},
{
text: "Best"
}
]
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add plain button to Toolbar
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbbutton",
text: "Button"
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add separator to Toolbar
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items:
[
{
xtype: "tbspacer"
},
{
text: "Button"
},"->",
{
text: "Button"
},
{
xtype: "tbseparator"
},{
text: "Button"
},{
xtype: "tbspacer"
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add split buttons with icons to Toolbar
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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 : 400,
height : 180,
tbar: [{
xtype:"splitbutton",
text: "Menu Button",
iconCls: "add16",
menu: [{text: "Menu Button 1"}]
},"-",{
xtype:"splitbutton",
text: "Cut",
iconCls: "add16",
menu: [{text: "Cut Menu Item"}]
},{
text: "Copy",
iconCls: "add16"
},{
text: "Paste",
iconCls: "add16",
menu: [{text: "Paste Menu Item"}]
},"-",{
text: "Format",
iconCls: "add16"
}],
items : makeChildren("Panel 1")
});
});
</script>
</body>
</html>
Add split button to Toolbar
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbsplit",
text: "Split Button",
menu: [
{
text: "Item One"
},
{
text: "Item Two"
},
{
text: "Item Three"
}
]
}
]});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add tool bar to 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 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>
Align buttons all the way to the 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>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items:
[
{
xtype: "tbspacer"
},
{
text: "Button"
},"->",
{
text: "Button"
},
{
xtype: "tbseparator"
},{
text: "Button"
},{
xtype: "tbspacer"
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Button toolbar
<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 tbFill = new Ext.Toolbar.Fill();
var myTopToolbar = new Ext.Toolbar({
items : [
fileBtn,
tbFill,
editBtn
]
});
var myPanel = new Ext.Panel({
width : 200,
height : 150,
title : "Ext Panels rock!",
collapsible : true,
renderTo : Ext.getBody(),
bbar : myTopToolbar,
html : "My first Toolbar Panel!"
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Create Pre-defined mark to define tool bar
<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 myTopToolbar = [
{
text : "Save",
handler : myBtnHandler
},
"-",
{
text : "Cancel",
handler : myBtnHandler
},
"->",
"<b>Items open: 1</b>",
];
var myPanel = new Ext.Panel({
width : 200,
height : 150,
title : "Ext Panels rock!",
collapsible : true,
renderTo : Ext.getBody(),
bbar : myTopToolbar,
html : "My first Toolbar Panel!"
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Create Toolbar Fill
<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 tbFill = new Ext.Toolbar.Fill();
var myTopToolbar = new Ext.Toolbar({
items : [
fileBtn,
tbFill,
editBtn
]
});
var myPanel = new Ext.Panel({
width : 200,
height : 150,
title : "Ext Panels rock!",
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
html : "My first Toolbar Panel!"
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Create tool bar with two 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() {
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>
Mix and match icon sizes to create a huge unusable toolbar
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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",
columns: 3,
title: "Clipboard",
items: [{
text: "Paste",
scale: "large",
rowspan: 3, iconCls: "add",
iconAlign: "top",
cls: "x-btn-as-arrow"
},{
xtype:"splitbutton",
text: "Menu Button",
scale: "large",
rowspan: 3,
iconCls: "add",
iconAlign: "top",
arrowAlign:"bottom",
menu: [{text: "Menu Item 1"}]
},{
xtype:"splitbutton", text: "Cut", iconCls: "add16", menu: [{text: "Cut Menu Item"}]
},{
text: "Copy", iconCls: "add16"
},{
text: "Format", iconCls: "add16"
}]
},{
xtype: "buttongroup",
columns: 3,
title: "Other Actions",
items: [{
text: "Paste",
scale: "large",
rowspan: 3, iconCls: "add",
iconAlign: "top",
cls: "x-btn-as-arrow"
},{
xtype:"splitbutton",
text: "Menu Button",
scale: "large",
rowspan: 3,
iconCls: "add",
iconAlign: "top",
arrowAlign:"bottom",
menu: [{text: "Menu Button 1"}]
},{
xtype:"splitbutton", text: "Cut", iconCls: "add16", menu: [{text: "Cut Menu Item"}]
},{
text: "Copy", iconCls: "add16"
},{
text: "Format", iconCls: "add16"
}]
}],
items : makeChildren("Panel 1")
});
});
</script>
</body>
</html>
Multi columns (No titles, double stack)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<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",
columns: 3,
defaults: {
scale: "small"
},
items: [{
xtype:"splitbutton",
text: "Menu Button",
iconCls: "add16",
menu: [{text: "Menu Item 1"}]
},{
xtype:"splitbutton",
text: "Cut",
iconCls: "add16",
menu: [{text: "Cut Menu Item"}]
},{
text: "Copy",
iconCls: "add16"
},{
text: "Paste",
iconCls: "add16",
menu: [{text: "Paste Menu Item"}]
},{
text: "Format",
iconCls: "add16"
}]
},{
xtype: "buttongroup",
columns: 3,
defaults: {
scale: "small"
},
items: [{
xtype:"splitbutton",
text: "Menu Button",
iconCls: "add16",
menu: [{text: "Menu Item 1"}]
},{
xtype:"splitbutton",
text: "Cut",
iconCls: "add16",
menu: [{text: "Cut Menu Item"}]
},{
text: "Copy",
iconCls: "add16"
},{
text: "Paste",
iconCls: "add16",
menu: [{text: "Paste Menu Item"}]
},{
text: "Format",
iconCls: "add16"
}]
}]
,
items : makeChildren("Panel 1")
});
});
</script>
</body>
</html>
Render Toolbar to document body
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbbutton",
text: "Button"
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Set icon class for buttons in a Toolbar
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script>
<style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important;
}
</style>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"},
{name: "industry"},
{name: "desc"}
]);
////////////////////////////////////////////////////////////////////////////////////////
// Grid 4
////////////////////////////////////////////////////////////////////////////////////////
var sm2 = new xg.CheckboxSelectionModel({
listeners: {
// On selection change, set enabled state of the removeButton
// which was placed into the GridPanel using the ref config
selectionchange: function(sm) {
if (sm.getCount()) {
grid4.removeButton.enable();
} else {
grid4.removeButton.disable();
}
}
}
});
var grid4 = new xg.GridPanel({
id:"button-grid",
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
sm2,
{id:"company",header: "Company", width: 40, sortable: true, dataIndex: "company"},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", width: 20, sortable: true, dataIndex: "change"},
{header: "% Change", width: 20, sortable: true, dataIndex: "pctChange"},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
]),
sm: sm2,
viewConfig: {
forceFit:true
},
columnLines: true,
// inline buttons
buttons: [{text:"Save"},{text:"Cancel"}],
buttonAlign:"center",
// inline toolbars
tbar:[{
text:"Add Something",
tooltip:"Add a new row",
iconCls:"add"
}, "-", {
text:"Options",
tooltip:"Blah blah blah blaht",
iconCls:"option"
},"-",{
text:"Remove Something",
tooltip:"Remove the selected item",
iconCls:"remove",
// Place a reference in the GridPanel
ref: "../removeButton",
disabled: true
}],
width:600,
height:300,
frame:true,
title:"Support for standard Panel features such as framing, buttons and toolbars",
iconCls:"icon-grid",
renderTo: document.body
});});
// Array data for the grids
Ext.grid.dummyData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am", "Manufacturing"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am", "Manufacturing"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am", "Manufacturing"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am", "Finance"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am", "Services"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am", "Services"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am", "Manufacturing"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am", "Services"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am", "Finance"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am", "Manufacturing"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am", "Manufacturing"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am", "Manufacturing"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am", "Automotive"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am", "Computer"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am", "Manufacturing"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am", "Computer"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am", "Computer"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am", "Medical"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am", "Finance"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am", "Food"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am", "Medical"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am", "Computer"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am", "Services", "Medical"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am", "Food"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am", "Retail"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am", "Manufacturing"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am", "Computer"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am", "Services"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am", "Retail"],
["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"9/1 12:00am", "Services"]
];
// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
}
</script>
</body>
</html>
Set toolbar height
<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 btns = [
{
text : "Add",
iconCls : "icon-add"
},
"-",
{
text : "Update",
iconCls : "icon-update"
},
"-",
{
text : "Delete",
iconCls : "icon-delete"
}
];
var tbar = {
xtype : "toolbar",
layout : "hbox",
items : btns,
height : 200,
layoutConfig : {
align : "stretch"
},
defaults : {
flex : 1
}
};
new Ext.Window({
width : 500,
height : 200,
tbar : tbar
}).show();
});
</script>
<body>
</body>
</html>