藏經閣: 2012

2012/11/08

[ExtJS 4] Change Progress Bar Color Dynamically According to the Value of Progress Bar

ExtJS doesn’t provide API to change progress bar dynamically. However, it’s not too diffcult to make it possible by changing CSS dynamically. In the following example, we implement a lister for update event, which change CSS according to the value of progress bar.

blue progress bar if value < 0.5

red progress bar if value >= 0.5

It’s tested on Firefox 16, Chome 22, and IE 9 with ExtJS 4.1.1a.

progressbar.htm

Ext.require([
    'Ext.ProgressBar'
]);
Ext.onReady(function(){
    var pbar = Ext.create('Ext.ProgressBar', {
        id:'pbar',
        width:300,
        renderTo:'bar',
        listeners: {
            update: {
              fn: function (bar, value) {
                    if(value<0.5)
                    this.setUI('blue');
                else
                    this.setUI('red');
              }
            }
        }
    });
    var btn = Ext.get('btn');
    btn.on('click', function(){
        pbar.wait({
            interval: 500,
            duration: 5000,
            increment: 15,
            fn:function() {
            }
        });
    });
});

</script>

.x-progress-blue .x-progress-bar {
    border-right-color: #0000FF;
    border-top-color: #0000FF;
    background-image: none;
    background-color: #0000FF;
}
</style>
</head>
<body>
    <button id="btn">Show</button>
    <BR />
    <div id="bar"></div>
</body>
</html>

2012/05/09

[ExtJS 4.1] Mark a red Asterisk/Star on an Required Fields

Making a red asterisk on required fields makes your user realize they are not allowed to be blank by intuition. In ExtJS, you can specify fields which cannot be blank such as the following code.

            items : [ {
                xtype : 'textfield',
                fieldLabel : 'Name',
                allowBlank : false,
            }, {
                xtype : 'numberfield',
                fieldLabel : 'Age'
            } ]

I found a patch working fine on ExtJS 4.07 to realize this requirement.

Ext.override(Ext.layout.Layout, { renderItem: function(item, target, position) { if (item && !item.rendered && item.isFieldLabelable && item.fieldLabel && item.allowBlank == false) { item.fieldLabel += '<span class="req" style="color:red">*</span>'; } this.callOverridden(arguments); } });

ExtJS 4.0 Mark a red Asterisk on an Required Field

Mark a red Asterisk on an Required Field on ExtJS 4.1

And I modify it a little bit to make it work in ExtJS 4.1 MVC application architecture as following.

this.control({
 'field' : {
  beforerender : function(thisField, eOpts) {
   if (thisField && !thisField.rendered && thisField.isFieldLabelable && thisField.fieldLabel && thisField.allowBlank == false) {
    thisField.fieldLabel += '<span class="req" style="color:red">*</span>';
   }
  }   
 }
});

2012/02/18

[ExtJS] Keeping Grid Selections After a Store Reload in Grid

In some cases, we have no idea what time the data in grid is out of date. In order to get the last data in server, it’s necessary reload store in grid periodically. However, after a single/multiple slelection grid reload, the selection state will be lost (i.e., No records are selected).

A checkbox selection example

To slove this probelm, firstly, we have to push each selected records into grid’s variable selectedRecords whenever 'selectionchange' event is fired from grid. Something like this:

Ext.each(selecteds, function(selected) {
me.selectedRecords.push(selected.index);
});

Secondly, restore the selection state by selecting the records recored in selectedRecords whenever 'datachanged' event is fired from store (i.e., data is reloaded from server) is fired.

Ext.each(me.selectedRecords, function(r) {
me.getSelectionModel().select(r, true);
});
The complete example code is shown below. It’s tested under ExtJS4.0.

SelectionStatefulGrid.js

Ext.define('Vos.view.SelectionStatefulGrid', {
    extend : 'Ext.grid.Panel',
    selType : 'checkboxmodel',
    selModel : {
        mode : 'MULTI'
    },
    store : 'myStore',
    columns : [
        {
            header : 'my date',
            dataIndex : 'data'
        }
    ],
    initComponent : function() {
        var me = this;
        me.callParent();
        me.selectedRecords = [];
        me.unlockState = false;
        // Push the the selection state into selectedRecords
        me.on('selectionchange', function(selectionModel, selecteds) {
            if (me.selectedRecords != null && me.unlockState) {
                me.selectedRecords = [];
                Ext.each(selecteds, function(selected) {
                    me.selectedRecords.push(selected.index);
                });
            }
        });
         // Select the records in selectedRecords
         me.getStore().on('datachanged', function(store, records) {
            Ext.each(me.selectedRecords, function(r) {
                me.unlockState = false;
                me.getSelectionModel().select(r, true);
            });
            me.unlockState = true;
        });
    }
});

2012/02/17

高速學習的奧秘：大腦的不同學習機制

(網路文章，作者不明)

語言當然是可以輕鬆學習的！沒有人認為自己的母語需要艱苦學習才能掌握訣竅就是用高速的潛意識腦而不要用慢速的學術腦來學習英語！英語如果學起來很吃力，肯定用錯了大腦！而學英語如果做不到“得意而忘言”的地步，就學不會真正的英語

學習一門語言可以說很簡單，一個毫無學習經驗，沒有專業教師授課，也不需要教材的兒童，只需要兩三年，就可以在不知不覺中熟練地掌握一門語言！

語言學習也可以說很復雜，即使是大學生，乃至博士，教授都可能過不了外語關！人類學習和應用語言的機制，一向讓哲學家，心理學家，語言學家覺得神秘而又好奇，至今仍然在探求過程中！同樣都是語言，學習起來的復雜和簡單顯然不取決於語言本身的難度，而是學習者的差異導致的！這兩種學習效果的絕然不同，就是因為小孩和成人分別習慣用不同的大腦，采用不同的方式學習語言，造成如此巨大的差異！對於外語學習者而言，了解這兩種學習方式，了解兩個大腦的不同學習過程，對於輕松有效地學好外語是極其必要的！

一：成人和兒童使用不同的大腦學習

根據大腦科學家和語言心理學家的研究表明：人的大腦有兩個絕然不同的信息處理中心！，一個是快速腦，具有非凡的學習能力，過目不忘的記憶能力，也具有超級快速的計算能力，擁有本能和直覺的反應！它采用潛意識和直覺的方式學習和記憶，具有極大的信息存儲量，可以不假思索地掌握知識。它主要用圖像的方式來處理問題，是非邏輯的快速腦！這個大腦稱為快速腦，圖像腦，也稱為潛意識腦，直覺腦！有些科學家稱為右腦。它雖然如此重要，可是長期以來我們都忽視了它的存在和價值，只是近幾十年才引起人們的高度關註，並把開發潛意識腦的研究成果應用到學習和工作中，結果取得了驚人的成就！

人的另外一個大腦信息處理中心是慢速腦，其記憶容量和學習速度都很有限，稱為邏輯腦！它用符號和邏輯的方式也就是所謂的理性來處理問題，記憶效率低下，要記住一個外語單詞，據心理專家研究，需要五百次重復後才能記住！與圖像腦一次就可記住復雜的事物的能力相比差距甚遠。但是這個大腦對人類具有極為重大的意義：依靠它，人類才具有分析和邏輯能力，知識才變得可以傳遞和學習！人類的文明才可以發展！這個大腦就是人們所熟悉的有思想的大腦！稱為邏輯腦或學術腦。有些心理學家稱為左腦！你現在看這篇文章時，使用的大腦主要就是這個大腦！

語言學習需要極為迅速的思維速度，龐大的記憶量來存儲語言素材，還必須有本能的邏輯能力來解決語法和語序問題！例如“狗咬了我”和“我咬了狗”由於詞序不同就會導致事實上和理解上的巨大差異，而大腦必須迅速判斷並選擇正確的表達方式。在對話的時候，需要近乎本能的反映。所以對於運行速度低，按邏輯思維來判斷和思維的邏輯腦來說，語言的復雜性遠遠超越了它的承載能力，經常發生短路現象。例如大學生們通過艱苦的學習和記憶，考試成績通過了六級，但是需要開口說英語的時候大腦一片空白，連很簡單的對話都無法完成，其根本原因就是因為采用邏輯腦來學英語，思維反應速度慢，無法形成本能的語言反應能力，英語語言素材沒有進入到深層次，快速腦沒有介入的結果！

只用邏輯腦來學英語還會帶來一個悲慘的事實：遺忘速度驚人。必須花大量時間來不停地學習！一旦停止，英語水平就急速下降。但是，如果英語語言是用圖像腦來學習的，學會後就基本不會忘記！例如每個人的母語都是在邏輯思維能力還沒有發展的時候，用潛意識的圖像腦來學習的，所以忘記母語的可能性幾乎不存在，即使出國幾十年不用母語，也不會喪失母語能力！外出多年的人，其家鄉話也不會忘記！可是經過多年的艱苦學習，即使是通過四六級考試的大學生，只要半年不接觸英語，就會感覺到英語水平的迅速下降！

嬰兒具有超凡的學習能力，對於任何新事物都能夠快速掌握，而成年人的學習能力隨著年齡的增長而逐步降低！對於嬰兒來說，由於理性的邏輯思維能力還沒有建立，只好采用快速的潛意識腦學習，結果就毫不費力地掌握了語言：無論是多麽復雜的語言，小孩都能應用自如！新東方的留學教父俞敏洪，學英語數十年，但是剛學了兩三年英語，還不到六歲的女兒就不時地糾正他表達錯誤的地方！

從生理上說，三歲以後，兒童的邏輯和意識開始建立，到六歲以後開始上學，學習字符和數學，這就是人類有意識地使用和訓練邏輯腦的開端。八歲的時候，有意識腦開始占據主導地位，學習新語言的能力開始降低。十二歲的時候，大多數兒童經過長達六年的學習訓練，兒童基本上習慣了用邏輯腦—也就是低速腦來學習任何學科的知識，潛意識腦的直覺學習和理解能力開始消失，學習變成一項需要費時費力的工作！因為一切都處在有意識大腦的控制之下！於是語言這種用低速大腦很難學會的東西也不得不用邏輯腦來學習，結果就是花十幾年還學不好，越學越吃力！這就是年齡越大，學英語就越困難的原因！但是絕對不是年齡大導致智力下降。因為按照傳統的智商測驗來說，剔除年齡因素的計算，成人顯然高於兒童的智力！這恰好說明傳統的智力與語言學習無關！傳統智力就是測試邏輯腦的發達程度，於同年齡人的平均系數比較後的得出智商。語言需要另外的一種智力，而非邏輯腦擅長的推理和計算的學術能力！

不過這裏並不認為因此讓孩子越早學習外語就越好：更重要的是正確的學習方法！現在很多兒童英語課的教學方式是典型的低速邏輯腦學習法，這種學習方式對於孩子學好外語的幫助極為有限，但是卻會降低兒童的思維速度，造成慢速的邏輯腦“早熟”現象，增加長大後學習英語的困難！所以早一些學英語當然有必要，但必須采用自然的潛意識學習法，以建立正確的語言學習習慣為第一要務！因此正確的英語學習法肯定是“不知不覺”的！而且是快樂而有趣的！

二：兩個大腦在信息處理上的不同機制

習慣上把大腦的兩個不同特色的處理中心稱為左腦和右腦！但是這並不完全準確，雖然一般認為左腦是低速的邏輯腦（意識腦），右腦是高速的圖像腦（潛意識腦），但是大腦科學家們發現，在因特殊原因被切除掉一半大腦的人，在對信息處理的速度上，仍然具有低速和高速的區別！這證明大腦不是簡單地分為左右的問題。更新一些的研究表明大腦的海馬區和臏邸體可能是高速信息處理區。

除非經過特別的訓練，成年人的大腦，特別是受過教育的成年人，已經習慣了主要使用邏輯腦，擅長於計算和符號記憶等不需要高速信息處理的功能，也就是所謂思考的功能，他們一般都是由低速腦也就是學術腦來完成！它具有良好的邏輯記憶功能，也負責邏輯判斷和推理，具有短時記憶，總體記憶容量比較小，如果一個信息經常出現，邏輯腦就會把它轉移到另一個大腦，也就是深層記憶中保存下來！所以邏輯腦很容易遺忘！

遺忘是邏輯腦自我保護的需要，否則大量的記憶信息會影響思維判斷的有效性。因此這個大腦是不合適用來學習外語的，也不能用來處理音樂，運動，圖像等高速信息，而主要用來學習知識和分析研究學術問題！依據語言學家的研究表明，這個大腦要徹底記住一個英語單詞需要重復500次以上，艾賓浩斯記憶心理曲線就是對這個低速大腦的記憶現象研究的結果！

由於邏輯腦主宰人的思維，所以人們最重視的就是這個大腦！甚至於長期以來，我們以為只有這個大腦存在，它代表理性和思維。另一個潛意識的高速大腦的存在沒有被認識。這並不奇怪，人類對自己的思維和大腦的功能經常很無知，長期以來還認為思想是心臟來進行的。人類對非邏輯腦的研究是弗羅依德開始的潛意識理論，目前已經是一門很重要的學科！引起了心理學家，語言學家，人類學家及哲學家的極大重視！

研究表明：信息量特別大的圖像，如運動，音樂和快速的信息處理，必然是由高速腦也就是非邏輯腦來完成的！它具有龐大而快速的記憶能力，可以過目不忘，在不經意中完成學習和記憶！但非邏輯腦很難通過有意識的控制來學習知識。也有一些人經過訓練，可以用高速腦來完成普通人用低速腦做的事情，給人的感覺他們簡直就是天才：如一些人看一付牌後，馬上就可以毫無差錯地說出所有花色的排列次序！也有人可以進行幾乎不需要時間的復雜算術計算！比計算器還要快得多！可是大多數人都不善於使用自己的快速腦，在學習的時候基本上使用慢速腦，所以學習很吃力。更要命的：語言的信息量和記憶量都很大，必須用快速腦來學習，如果用慢速腦，就算學二十年都學不好英語！

現在，國外心理學家們已經註意到了這兩個大腦完全不同的學習能力，開始研究用非邏輯腦也就是高速腦來學習的方法：比如經過速讀訓練的人一分鐘可以看完三萬字的材料，經過速算訓練的人在出題人剛剛說完題目就報出答案，英語學習者一天之內記住1400個單詞，一年之內學會一門語言等，就是開發了快速腦的學習功能的結果！中國古代，把經過非邏輯腦快速處理得出結論的過程稱為“不假思索”，其實這就是跳過了邏輯腦的思維過程，由快速的潛意識腦直接得出結論！現在有人把這種學習潛能開發方式稱為[全腦學習法]。

如果你認為以上這些說法匪夷所思，只需一分鐘就可以檢驗出來：你學到的英語是存放在低速的學術腦還是高速的潛意識圖像腦裏。我們的母語是用潛意識的快速腦學會並應用的，所以當你與同伴說話的時候用的是思維流，以非語言的圖像形式出現的！請問你說話前事先想過用什麽樣的詞匯沒有？腦子裏會出現漢字和句子嗎？根本沒有，你僅僅是有一個思想，嘴巴馬上就說出來了！你的大腦裏沒有中文字出現！你的思維像放電影一樣連續地播放出來，而你的嘴巴就像解說詞一樣在解釋你的思維圖景，而且你思維的速度比語言的速度快，你在不斷地選擇合適的語言表達你的思維，有時還會詞不達意，會出現一些廢話來接上思維！如“嗯，這個，這個----”等。聽別人說話的時候也一樣！你的大腦裏也沒有中文字符，而是一個具有意義的圖景在連續的播放！因為你是用快速的潛意識腦來解讀語言！不過如果你突然被叫上講臺去做一個正式的發言，你用邏輯腦開始想應該講什麽，用什麽詞匯才得體等，反而會講不出來！因為這時用學術腦，思維的速度降低了！結果是：你考慮得越多，講的就越不流暢！

相反，如果你聽到的是英語，腦子裏開始出現一串串的單詞和句子，然後大腦費勁地把這些詞匯與你的記憶庫對照看是什麽單詞，什麽意思！大腦經常忙不過來，於是句子快速地溜走，即使是很簡單的句子，你也根本就聽不懂!但你可以看得懂！因為看書用的是邏輯腦。如果要“說”英語就更悲慘了：首先大腦出現要表達的意識，然後出現漢語的字符和語言，再一一找到對應的英語單詞，最後還要校對語法正誤，你可憐的邏輯腦開始過負荷，最可能的情況是大腦死機：大腦裏一片空白，你張口結舌，怎麽也說不出來------或者，你勉強地，一個字，一個字地說出一串字符，如果你想警告對方“當心，我要給你一點顏色看看”，就會說出“ Careful! I Will give you some colour to see see”，這就是典型的字符對應方式，是披著一張英語皮的，英國人不懂，中國人也不懂的語言！

三：怎樣運用快速腦學習英語

中國學生學習外語，最普遍的問題就是采用本不善於語言學習的邏輯腦（低速腦）來學習，結果又費力又學不好。了解了語言學習的大腦機制，學習外語就不難了：設法開發我們的全腦學習，加強語言信息的輸入量，用高速腦來學習！學外語就變得輕松而又有效！

首先，兒童學英語，首重建立正確的學習習慣，建立起對英語語音的自然反應，千萬不要背單詞，背字母，學音標，初學階段盡量不要采用課本來學英語，也不用上各種英語學習班，用多媒體手段讓兒童接觸盡可能最大的英語語言信息量，就可以保持兒童期高速大腦的學習能力，建立基本的英語語言反應模式。在此基礎上再采取循序漸進的方式學習，剛開始可能感覺進步不明顯，但是由於基礎好，越到後來學習效果越好，如果從五歲左右開始學習，十歲就可以通過大學英語四級考試，而且在聽說能力和閱讀速度上會比很多大學生還要好！

兒童學英語，關鍵在於“無意識”，要讓兒童在不知不覺中掌握英語！需要讓活動的英語場景與標準的語音相結合，所以采用多媒體視聽材料學習，而不是使用書面的課本，也不能依賴老師正式的授課，更不能學語法背單詞！所有采用邏輯腦學習法的英語課程無法建立英語學習的本能反應！但遺憾的是現有國內的教材基本上都過於“理性”，在教材內容和語言信息量上都有明顯缺點，無法完成英語語言基礎的建立工作！這裏推薦使用美國原版的[Reader rabbit]和[Magic English],這兩套教材都是美國語言專家專門為兒童編寫的英語入門多媒體教材，特別符合兒童的學習心理，可以在不知不覺中學會字母，音標，掌握大量的詞匯量，關鍵是建立英語語感！

對於大中學生來說，首要的事情就是改變原來的慢速低效學習模式，學會用高速大腦來學習，設法建立英語學習的語感！主要的方法有：

一：在不看文字的情況下采用以聽力為主的學習方式，像聽音樂一樣地聽英語，不要刻意地去想英語的拼寫，而是設法讓自己大腦裏出現場景（思維圖像），以語音方式來學習英語，有助於建立真正的英語語感！千萬不要背單詞，也不要做習題，研究語法，這是典型的低速大腦學習法，無論對於考試過關還是英語學習都沒有太大的幫助！他們是在你已經積累了大量的英語素材之後對這些素材進行檢驗和整理的手段，而不是學習的手段！

二：用快速聽讀法訓練和提高學習潛力采用快速聽讀法學習英語，可以迫使大腦進入非邏輯的快速大腦學習狀態！利用高速放音和高速聽讀來提高人腦的反應速度，同時打開大腦的深層記憶功能，提高學習效率數倍以上。嚴格使用本方法連續90天後，不僅英語成績得以大幅度提高，同時學習能力和記憶力也可以得到明顯的改進，會感到學習變得容易了；這是因為這種變速聽讀訓練已經提高了你的大腦素質！目前一些高檔的復讀機如金正的F1/F6等就提供了可以進行高速聽讀訓練的{超能瀏覽變速復讀}功能，可以用於英語，也可以用於其他語言的學習！包括母語在內！

三：加強身體運動，特別是左手的協調運動！正確的運動有助於兩個大腦的協調能力！提高學習能力！國外有研究者專門研究怎樣的運動有益大腦的智力開發，清華大學也開發有手指遊戲等，這就是所謂的大腦體操，主要就是左右肢體的協調運動和圓形運動方式！同時提高大腦的載氧量（有氧運動）

四：用音樂開發學習潛能！古典音樂特別是巴洛克音樂對於大腦的綜合發展有極為重要的作用，語言專家們用巴洛克音樂創造了奇跡，達到一天能夠記憶1400個單詞的效果！不過要使用音樂潛能開發方式需要優質的音響和錄音良好的原版碟，否則就變成幹擾人的噪音了！其實聽音樂用的就是潛意識大腦！如果用一定的方式配合學習，就可以讓學習內容輕松地記住！

五：學會放松，讓大腦在最輕松的狀態下學習英語！

國外有專門開發的學習機器，原理就是幫助學習者在放松的狀態下學習。中國的入靜和打坐修行也是一種放松和開發大腦潛力的方法！不過需要有人指導！音樂也有助於大腦精神放松！這些方式都是讓人在放松的狀態下進入高速大腦運行機制，可以對信息作出迅速的反應，同時擁有良好的記憶！放松使用的音樂當然是指古典音樂和一些成為大自然音樂的東西！流行音樂者則讓人興奮和緊張，大量消耗人的精力，讓人很疲倦！所以有些學生習慣邊聽流行歌曲邊學習，這簡直就是自討苦吃（因為降低的是自己的效率，增加了自己的學習時間，讓自己更疲倦）。

2012/01/27

悠遊卡電子發票與自然人憑證歸戶電子發票自動兌獎與匯款(圖文懶人包教學)

關鍵字：電子發票如何對獎,電子發票整合服務平台,電子發票對獎,電子發票app,7-11電子發票,電子發票申請,紙本電子發票,電子發票平台,財政部電子發票整合服務平台,電子發票怎對獎

統一超商配合政府實施電子發票作業後，相信大部分的人還是拿了紙本的發票。根據財政部估計，若全國發票電子化，每年可省下1200億元及11萬顆樹。其實只要簡單的步驟，就可以自動對獎，甚至自動匯款到指定銀行帳戶，環保且方便，何樂而不為。

電子發票的3種型態

1. 依舊拿紙本電子發票：紙本電子發票跟傳統的統一發票是一樣的，自行保管與兌獎。對獎號碼就在紙上，去除2個為首的英文，後面就是可兌獎的號碼。比如：AB-12345678，對獎號碼就是12345678。

2. 使用悠遊卡/icash，且告訴店員使用電子發票：雖然說使用電子發票，但還是會有一張交易明細(上面無對獎號碼)，可以在開獎後到ibon查詢，如果中獎可以列印出來到郵局兌換。雖然還是會拿到明細(比較小張)，但店家不會再保有存根聯，所以省了一半的紙。

3. 使用自然人憑證+悠遊卡/icash，且告訴店員使用電子發票：設定完後，系統自動對獎，且財政部會自動匯款到指定帳戶。PS 1：自然人憑證只在設定帳戶時使用，未來購物時只需要悠遊卡。PS 2：統一超商從民國101年4月2號，如果你們說要紙本發票，將假設你使用電子發票。

發票(人工兌獎) 與交易明細(電腦兌獎)

自然人憑證設定

以下就介紹如何使用自然人憑證設定銀行帳號，並且將悠遊卡/icash等載具歸戶到自然人憑證。

悠遊卡/icash等卡片載具歸戶到自然人憑證

首先到財政部電子發票整合服務平台(經測試IE6無法正確執行，請更新到IE8)，開通自然人與設定銀行帳戶：

剛進去網站時，點選上方的「執行附加元件」

自然人電子發票 (2)

確定安裝元件，點選「執行」

進入電子發票平台後，輸入PIN碼

自然人憑證預設 PIN 碼為申請人的民國年出生年月日共六碼，如 63 年 5 月 1 日生則預設的初始 PIN 碼為 630501 。如果想更改PIN碼或是鎖卡解碼，可以參考自然人憑證鎖卡解碼及修改PIN碼相關設定說明。

自然人電子發票 (3)

第一次登入後設定資本資料。銀行戶名要跟自然人憑證姓名相同！

確認資料無誤後，按下「送出申請」

卡片歸戶

基本上這樣子自然人憑證就已經開通了。接下來就來設定卡片歸戶，由於悠遊卡為感應式的卡片，所以家裡的讀卡機無法讀取，只能到7-11使用IBON設定悠遊卡歸戶。 ibon電子發票

到 IBON 首頁，按下「生活」

ibon電子發票 (1)

點選「電子發票」

ibon電子發票 (2)

點選「載具(卡片)歸戶」

ibon電子發票 (3)

出現這個畫面的時候...

ibon電子發票 (4)

將自然人憑證插入

ibon電子發票 (5)

輸入自然人憑證PIN碼 (預設為生日，如680125)

ibon電子發票 (6)

選擇卡片類型

ibon電子發票 (7)

出現這個畫面時...

ibon電子發票 (8)

將悠遊卡/icash 移到機器左方的感應區，並且按下螢幕上的「確定」

ibon電子發票 (9)

最後確認

ibon電子發票 (10)

歸戶完成！

基本上，所有的動作就完成了，如果你不放心，可以登入電子發票平台查看載具管理列表。

點選載具管理列表

自然人電子發票 (7)

會顯示出已經歸戶的卡片，大功告成！

記得以後使用悠遊卡購物時，大聲跟店員說：不要列印發票。接下來對獎的工作，完全交給雲端計算，不用煩惱了！

2012/01/20

[ExtJS] Grid Grouping Expand all, Collapse all group

The ExtJS 4 does not suppport the grouping grid expanding/collapsing all groups. In this tutorial, we will show how to enable the grouping ability and add two buttons in grid to trigger the expanding/collapsing events.

When building an ExtJS application, it is not necessary to adopt ExtJS MVC Architecture. However, in the following code, ExtJS MVC is assumed to be used.

Ext.define('Foo.Application', {
extend: 'Ext.app.Application',
name: 'Foo',
appFolder: 'app/foo',
controllers: ['User'],
launch: function () {
    Ext.override(Ext.grid.feature.Grouping, {
      collapseAll: function () {
        var self = this,
          groups = this.view.el.query('.x-grid-group-body');
        Ext.Array.forEach(groups, function (group) {
          self.collapse(Ext.get(group.id));
        });
      },
      expandAll: function () {
        var self = this,
          groups = this.view.el.query('.x-grid-group-body');
        Ext.Array.forEach(groups, function (group) {
          self.expand(Ext.get(group.id));
        });
      },
      collapseAllButTop: function () {
        var self = this,
          groups = this.view.el.query('.x-grid-group-body');
        Ext.Array.forEach(groups, function (group) {
          self.collapse(Ext.get(group.id));
        });
        if(groups.length & gt; 0) {
          this.expand(Ext.get(groups[0].id));
        }
      }
    });
}
});

Ext.define('Foo.model.User', {
extend: 'Ext.data.Model,
model: 'User',
fields: ['name ', 'email']
});

Ext.define('Foo.store.User ', {
   extend: 'Ext.data.Store',
   model: 'User',
   groupField: 'name'
});

Ext.define('Foo.grid.User', {
   extend: 'Ext.grid.Panel',
   alias: 'widget.user',
   features: [{
      ftype: 'grouping',
      groupHeaderTpl: : 'user name: {name}',
      startCollapsed: true,
      id: 'groupingFeature'
   }],
   columnLines: true,
   autoScroll: true,
   store: 'User',
   columns: [{
   header: 'Name',
      dataIndex: 'name',
   }, {
      header: 'E-Mail',
      dataIndex: 'email',
   }],
   initComponent: function () {
      var me = this;
      me.tbar = [{
         text: 'expand all ',
         handler: function () {
            me.getView().getFeature('groupingFeature').expandAll();
         }
      }, {
         text: 'collapse all ',
         handler: function () {
           me.getView().getFeature('groupingFeature').collapseAll();
         }
      }];
      me.callParent();
   }
});

Reference

Ext Grid Grouping summary collapse all

2012/01/07

Eclipse Dark Color Theme

As a programmer, we spend lots of time on developing software. In order to protect our eyes, a dark theme in eclipse is recommended. The following steps will show how to replace the default eclipse white theme by a dark one.

1. Choose a Eclipse Color Theme

Go to http://www.eclipsecolorthemes.org/, select whatever color theme you like. I prefer the Vibrant lnk theme.

eclipseTheme

Choose a Eclipse Color Theme

Download the eclipse preferences file.

eclipse theme (1)

Download a Eclipse Color Theme

2. Import the Preferences File

Eclipse -> File -> Import -> General -> Preference.

eclipse theme

Then browse the file and finish.

eclipse theme (2)

Import the Eclipse Preferences File

After that, you would see it take effect immediately. However, I don't like the backgroud color of highlighted text. It almost makes me unable to recognize the words. I tried different themes to prevent this probelm. Unfortunately, no one could help.

The Vibrant lnk eclipse theme

3. Customize the background of highlighted text

Actually, eclipse allow us to modify the theme. Go to Eclipse -> Preferences -> General -> Editors -> Annotations and you need to change all Occurrences and Write occurrences.

eclipse theme (5)

Customize the background of highlighted text

Finally, you would see this setting makes highlighted text clear.

eclipse theme (4)

The modified Vibrant lnk eclipse theme

訂閱：文章 (Atom)

藏經閣

fe-tool

🔥《台灣人在大陸買房條件與流程攻略》

🔥《JSON5 vs JSON》

🔥《React State Management 2025》

🔥《React State Management Comparison》

🔥《What is Bun.js》