ExtJS4.1.1 設置表格背景顏色 修改文本顏色 在表格中插入圖片

由於ExtJS版本不斷更新，各種渲染方式也隨之有所改變，目前大部分書籍還是停留在3版本，對於ExtJS4.1.1版本的表格渲染，設置表格行背景顏色的方式如下：

首先，定義行的樣式：

        .yellow-row .x-grid-cell{
            background-color:#FFFF00 !important;
        }
        .white-row .x-grid-cell{
            background-color:#FFFFFF !important;
        }
        .blue-row .x-grid-cell{
            background-color:#00AAFF !important;
        }

該樣式定義應在引入js文件之前。
然后，在js文件中引用樣式。下面文件中第12~28行是對樣式的引用：

    var gridPanel = new Ext.grid.Panel({
        title : '聯系人',
        store : Ext.data.StoreManager.lookup('simpsonsStore'),
        viewConfig : {
            getRowClass: function(record, rowIndex, rowParams, store){
                var cls;
                switch(rowIndex % 2){
                    case 1:
                        cls = 'white-row';    
                        break;
                    case 0:
                        cls =  'yellow-row';
                        break;
                }
                if(record.get('name') == '張毛毛'){
                    cls =  'blue-row';
                }
                return cls;
            }
        },
        columns : [{
                    text : '姓名',
                    dataIndex : 'name',
                    sortable : true,  //不可排序
                    hideable: false   //不可隱藏
                    //flex: 1   //盡量拉伸
                }, {
                    text : '電話',
                    dataIndex : 'phonenumber'
                    //renderer : renderCol
                    //flex : 1
                    //hidden: true
                },{
                    text: '性別',
                    dataIndex: 'sex',
                    renderer: function(value){
                        if(value == '男'){
                            return "<span style='color:blue;'>男</span><img src='../imgs/man.png' width='15'/>";
                        }else{
                            return "<span style='color:red;'>女</span><img src='../imgs/woman.png' width='15'/>";
                        }
                    }
                },{
                    text: '出生日期',
                    dataIndex: 'birthday',
                    type: 'date',
                    renderer: Ext.util.Format.dateRenderer('Y年m月d日')
                }],
        height : 200,
        width : 400,
        renderTo : document.getElementById('grid'),
        listeners: {
            click: {
                element: 'el', //bind to the underlying el property on the panel
                fn: function(){
                    var selections = gridPanel.getSelectionModel().getSelection();
                    Ext.MessageBox.alert('aaaa',selections[0].get('name'));
                }
            }
        }
    });

上面文件中，第44~50行是給表格添加圖片以及修改文本顏色。

 

上面對背景顏色的設置只是針對行的設置，下面是對列進行背景渲染的函數，在上面js代碼中的38行中調用。

    function renderCol(value, metaData, record, rowIndex, columnIndex, store, view ){
        metaData.style = "background-color: #F5C0C0";
        return value;
    }