殘想的程式筆記

接著我們將Menu的部分補完，上一篇我們將很多元件組合成Menu然後將menu嵌入Tools Bar中，現在我們要直接在Tools Bar上作修改。 
一樣我們先來看原始碼：
tb.add({
text:'Button w/ Menu',
iconCls: 'bmenu', // <-- icon
menu: menu // assign menu by instance
}, {
text: 'Users',
iconCls: 'user',
menu: {
xtype: 'menu',
plain: true,
items: {
xtype: 'buttongroup',
title: 'User options',
autoWidth: true,
columns: 2,
defaults: {
xtype: 'button',
scale: 'large',
width: '100%',
iconAlign: 'left'
},
items: [{
text: 'User
manager',
iconCls: 'edit'
},{
iconCls: 'add',
width: 'auto',
tooltip: 'Add user'
},{
colspan: 2,
text: 'Import',
scale: 'small'
},{
colspan: 2,
text: 'Who is online?',
scale: 'small'
}]
}
}
},
new Ext.Toolbar.SplitButton({
text: 'Split Button',
handler: onButtonClick,
tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
iconCls: 'blist',
// Menus can be built/referenced by using nested menu config objects
menu : {
items: [{
text: 'Bold', handler: onItemClick
}, {
text: 'Italic', handler: onItemClick
}, {
text: 'Underline', handler: onItemClick
}, '-', {
text: 'Pick a Color',
handler: onItemClick,
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function(cp, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
}
}), '-',
{
text: 'More Colors...',
handler: onItemClick
}
]
}
}, {
text: 'Extellent!',
handler: onItemClick
}]
}
}), '-', {
text: 'Toggle Me',
enableToggle: true,
toggleHandler: onItemToggle,
pressed: true
});

var item = menu.add({
text: 'Dynamically added Item'
});
// items support full Observable API
item.on('click', onItemClick);

// items can easily be looked up
menu.add({
text: 'Disabled Item',
id: 'disableMe' // <-- Items can also have an id for easy lookup
// disabled: true <-- allowed but for sake of example we use long way below
});
// access items by id or index
menu.items.get('disableMe').disable();

// They can also be referenced by id in or components
tb.add('-', {
icon: 'list-items.gif', // icons can also be specified inline
cls: 'x-btn-icon',
tooltip: 'Quick Tips
Icon only button with tooltip'
}, '-');

var scrollMenu = new Ext.menu.Menu();
for (var i = 0; i < 50; ++i){
scrollMenu.add({
text: 'Item ' + (i + 1)
});
}
// scrollable menu
tb.add({
icon: 'preview.png',
cls: 'x-btn-text-icon',
text: 'Scrolling Menu',
menu: scrollMenu
});

// add a combobox to the toolbar
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:135
});
tb.addField(combo);
tb.doLayout();

接下來我們來使用一下Ext JS 的Menu功能，Ext JS提供了非常多的Examples，對於學習這套Framework來說，不啻是一條最快的捷徑。
首先先來看看他提供的Examples：
/*!
/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* https://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
});
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up('.x-menu');
},
iconCls: 'no-icon'
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [
combo, // A Field in a Menu
{
text: 'I like Ext',
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, '-', {
text: 'Radio Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'Choose a Theme',
{
text: 'Aero Glass',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Vista Black',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Gray Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Default Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu // <-- submenu by reference
},{
text: 'Choose a Color',
menu: colorMenu // <-- submenu by reference
}
]
});
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'Button w/ Menu',
iconCls: 'bmenu', // <-- icon
menu: menu // assign menu by instance
});
menu.addSeparator();
// Menus have a rich api for
// adding and removing elements dynamically
tb.doLayout();
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
}
function onItemClick(item){
Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}
function onItemCheck(item, checked){
Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
}
function onItemToggle(item, pressed){
Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
}
});

最近接到的新任務是用EXT JS去美化選單，EXT JS的官網提供了很多很棒的效果，而且也都有examples檔可以參考，
感覺上應該是個方便的工具，這次任務應該可以輕鬆解決  ^_^
但是實際使用上發現他的examples很難獨立出來使用，總是會有某些地方不太對勁，
examples板本：

 最近因為業務上的需要，接觸到了一些JQuery的繪圖Plugin，很適合用來製作後台數據分析的圖表，就來跟大家作個心得分享。

這次介紹的是Flot(https://code.google.com/p/flot/)這套Plugin。
當初會選用這套Plugin除了他的呈現方式很多元所以可以套用在各個不同的場合外，最重要的是他非常的簡單易用，而且有放出一些簡易的API，可以作細部的調控。

首先先來看他提供的範例：