extjs 杂记

 <!--StartFragment -->

    1.'checkcolumn'的使用，0，1，true，false

        {
            xtype: 'checkcolumn',
            header: '数据库',
            dataIndex: 'n',
            stopSelection : false,
            width: 60,
            cls: 'x-grid-checkheader-editor',
            defaultType: 'boolean',
            disabled:true,
            checked: '{n}'
           },
      

2.gridpanel 列头颜色的修改

listeners : {    
                    'afterrender' : function(grid) { 
                        var elments = Ext.select("div[id="+grid.getId()+"] .x-column-header",true);//.x-grid3-hd 
                        elments.each(function(el) { 
                                        el.setStyle("color", 'green'); 
                                        el.setStyle("background", '#ff0000'); 
                                    }, this); 
                             
                        } 
                } 

3. cell style

 

.price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'change'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[e-mail]",  "change":100  },
        { 'name': 'Bart', "email":"[e-mail]", "change":-20  },
        { 'name': 'Homer', "email":"[e-mail]",  "change":23   },
        { 'name': 'Marge', "email":"[e-mail]", "change":-11   }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
    ],
    height: 200,
    width: 400,
    viewConfig: {
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    renderTo: Ext.getBody()
});