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
<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 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>
</source>
Add group to Toolbar(Office 2007 style)
<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"> 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>
</source>
Add icon button to Toolbar
<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() {
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>
</body> </html>
</source>
<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"> 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>
</source>
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbbutton",
text: "Menu Button",
menu: [
{
text: "Better"
},
{
text: "Good"
},
{
text: "Best"
}
]
}
]
});
}); </script>
</body> </html>
</source>
Add plain button to Toolbar
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbbutton",
text: "Button"
}
]
});
}); </script>
</body> </html>
</source>
Add separator to Toolbar
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items:
[
{
xtype: "tbspacer"
},
{
text: "Button"
},"->",
{
text: "Button"
},
{
xtype: "tbseparator"
},{
text: "Button"
},{
xtype: "tbspacer"
}
]
});
}); </script>
</body> </html>
</source>
Add split buttons with icons to Toolbar
<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"> 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>
</source>
Add split button to Toolbar
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbsplit",
text: "Split Button",
menu: [
{
text: "Item One"
},
{
text: "Item Two"
},
{
text: "Item Three"
}
]
}
]});
}); </script>
</body> </html>
</source>
Add tool bar to 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 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>
</body> </html>
</source>
Align buttons all the way to the 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> <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>
</body> </html>
</source>
Button toolbar
<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 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>
</body> </html>
</source>
Create Pre-defined mark to define tool bar
<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 myTopToolbar = [
{
text : "Save",
handler : myBtnHandler
},
"-",
{
text : "Cancel",
handler : myBtnHandler
},
"->",
"Items open: 1",
];
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>
</body> </html>
</source>
Create Toolbar Fill
<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 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>
</body> </html>
</source>
Create tool bar with two 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() {
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>
</body> </html>
</source>
Mix and match icon sizes to create a huge unusable toolbar
<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"> 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>
</source>
Multi columns (No titles, double stack)
<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"> 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>
</source>
Render Toolbar to document body
<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() {
new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [
{
xtype: "tbbutton",
text: "Button"
}
]
});
}); </script>
</body> </html>
</source>
Set icon class for buttons in a Toolbar
<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> <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>
<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.
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>
</source>
Set toolbar height
<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 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>
</source>
