先培养一下大概的感觉吧。
基本按书上都弄出来了。
<!DOCTYPE html>
<html>
<head>
<title>ExtJs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
renderTo: 'toolbar',
width: 800
});
var infoMenu = new Ext.menu.Menu({
ignoreParentClicks: true,
plain: true,
items: [{
text: 'personal info',
menu: new Ext.menu.Menu({
ignoreParentClicks: true,
items: [{
text: 'basic info',
menu: new Ext.menu.Menu({
items: [
{text: 'height', handler: onMenuItem},
{text: 'weight', handler: onMenuItem}
]
})
}]
})
},
{text: 'company info', handler: onMenuItem}
]
});
var fileMenu = new Ext.menu.Menu({
shadow: 'frame',
allowOtherMenus: true,
items: [
new Ext.menu.Item({
text: 'new',
handler: onMenuItem
}),
new Ext.menu.Item({
text: 'open',
handler: onMenuItem
}),
new Ext.menu.Item({
text: 'close',
handler: onMenuItem
}),
new Ext.menu.Item({
xtype: 'textfield',
hideLabel: true,
width: 100
}),
new Ext.menu.Item({
text: 'select color',
menu: new Ext.menu.ColorPicker()
}),
new Ext.menu.Item({
xtype: 'textfield',
menu: new Ext.menu.DatePicker()
}),
{
xtype: 'buttongroup',
colums: 3,
title: 'buttons',
items: [{
text: 'user manage',
scale: 'large',
colspan: 3,
width: 170,
iconCls: 'userManagerIcon',
iconAlign: 'top'
},
{text: 'newnew', iconCls: 'newIcon'
}]
}
]
});
var themeMenu = new Ext.menu.Menu({
items: [{
text: 'theme color',
menu: new Ext.menu.Menu({
items: [{
text: 'red theme',
checked: true,
group: 'theme',
checkHander: onItemCheck
}, {
text: 'blue theme',
checked: false,
group: 'theme',
checkHander: onItemCheck
}, {
text: 'black theme',
checked: false,
group: 'theme',
checkHander: onItemCheck
}]
})
}, {
text: 'isUse',
checked: false
}]
});
var editMenu = new Ext.menu.Menu({
shadow: 'drop',
allowOtherMenus: true,
items: [
{text: 'copy', handler: onMenuItem},
{text: 'paste', handler: onMenuItem},
{text: 'cut', handler: onMenuItem}
]
});
toolbar.add([
{
text: 'file',
//handler: onButtonClick,
//iconCls: 'newIcon'
menu: fileMenu
},
{
text: 'edit',
//handler: onButtonClick,
//iconCls: 'openIcon'
menu: editMenu
},
{
text: 'save',
handler: onButtonClick,
iconCls: 'saveIcon'
},
{
text: 'config',
menu: infoMenu
},
{
text: 'style select',
menu: themeMenu
},
'-',
{
xtype: 'textfield',
hideLabel: true,
width: 150
},
'->',
'<a href=#>url</a>',
{
xtype: 'tbspacer',
width: 500
},
'static text'
]);
function onMenuItem(item) {
alert(item.text);
};
function onButtonClick(btn) {
alert(btn.text);
};
Ext.get('enableBtn').on('click', function(){
toolbar.enable();
});
Ext.get('disabledleBtn').on('click', function(){
toolbar.disable();
});
function onItemCheck(item) {
alert(item.text);
};
});
</script>
</head>
<body>
<div id='toolbar'></div>
<div >
<button id="enableBtn">enableBtn<button>
<button id="disabledleBtn">disabledleBtn<button>
</div>
</body>
</html>