關於extjs grid的一些小技巧--groupHeaderTpl,格子內的文字樣式(style)....

1.feature group的group字串,是有一定的格式的,其中的「{name}」是固定的指向store中的「groupField」,別三八假賢慧換成自己的dataIndex,是行不通的,
參考以下範例:
==========順便示範如果把其他的資料秀在group header中==============
            ,features: [
                   Ext.create('Ext.grid.feature.GroupingSummary', {
                       //---groupHeaderTpl的那個對應資料欄位真的就是「name」,別問我為什麼,這是試出來的
                       groupHeaderTpl: 'Subject Code : {name} ,Name: {[values.rows[0].get("SBJ_NAME")]}'
                   })
            ]
=======================================

2.欄位中的文字,要套用css,如何設定?
首先,先指定該欄的tdCls,再定義一個css來對應,如
=====css================
        td.GroupDtlStyleClass .x-grid-cell-inner {
            font-family: "Lucida Console", Monaco, monospace;
            font-style: normal;
            font-size:small;
        }
        td.chkBoxClass .x-grid-cell-inner {
            vertical-align:middle;
        }
=========對應到 column物件=======
                {
                    xtype: 'gridcolumn',
                    width: 200,
                    tdCls: 'GroupDtlStyleClass',
                    dataIndex: 'GRP_DTL',
                    text: 'Group Info.'
                },{
                    xtype: 'checkcolumn',
                    dataIndex: 'SELECTED',
                    width:50,
                    text: 'Select',
                    tdCls: 'chkBoxClass'              
              }...
==============================
看出其中的對應關係了嗎?

3. 不要隨便呼叫parent.doLayout(),應改為呼叫 parent.updateLayout()
 這案例是在顯示/隱藏一個panel,設定show/hide後,如果做了parent.doLayout,那隱藏的panel會跑到畫面下半段,變成「蘿蔔蹲現象」,參考以下片刻:
======我們在image物件加上click事件==============
                                        src: './DogEar_1346.png',
                                        listeners: {
                                            el: {
                                                click: function () {
                                                    var cmp = Ext.getCmp('PnlListSjbGrp2Select');
                                                    //做左側功能表的開關
                                                    if (cmp.hidden) {
                                                        cmp.show();
                                                    } else {
                                                        cmp.hide();
                                                    }
                                                   //me是這個元件的最外圍容器
                                                  //注意,是呼叫「updateLayout」,而不是「doLayout」
                                                    me.updateLayout();
                                                   
                                                }
                                            }
                                        }

==========================================