zoukankan      html  css  js  c++  java
  • EXTJS 4:在renderer中如何控制一个CheckColumn的行为,如显示,只读等属性

    在编写grid下的column时,大家肯定会经常用到renderer这个方法来改变文字的呈现形式,那么如果该column是一个特殊的column,比如CheckColumn时,该方法应该怎样写呢?官方的文档中并没有对此多作说明,不过仔细研究后,发现原理是很类似的

    给个例子,根据数据中的值,来决定是否显示CheckColumn

    var store = Ext.create('Ext.data.Store', {
        fields : ['name', 'email', 'phone', 'active','cancheck'],
        data   : {
            items : [
                { name : 'Lisa',  email : 'lisa@simpsons.com',  phone : '555-111-1224', active : true ,cancheck:true },
                { name : 'Bart',  email : 'bart@simpsons.com',  phone : '555-222-1234', active : true,cancheck:false  },
                { name : 'Homer', email : 'home@simpsons.com',  phone : '555-222-1244', active : false,cancheck:true },
                { name : 'Marge', email : 'marge@simpsons.com', phone : '555-222-1254', active : true ,cancheck:false }
            ]
        },
        proxy  : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });
    
    Ext.create('Ext.grid.Panel', {
        title    : 'Simpsons',
        height   : 200,
        width    : 400,
        renderTo : Ext.getBody(),
        store    : store,
        columns  : [
            { text : 'Name', dataIndex : 'name' },
            { text : 'Email', dataIndex : 'email', flex : 1 },
            { text : 'Phone', dataIndex : 'phone' },
            { xtype : 'checkcolumn', text : 'Active', dataIndex : 'active',
             renderer:function(val, m, rec) {            

            if (rec.get('cancheck') == false) return ''; else{ return (new Ext.grid.column.CheckColumn).renderer(val); } }} ] });

    运行环境 extjs4.2.1 运行效果:

  • 相关阅读:
    5月27日
    5月26日
    5月25日
    5月24日
    5月22日
    梦断代码(3)
    01团队冲刺
    07周总结
    06周总结
    构建之法阅读笔记
  • 原文地址:https://www.cnblogs.com/zdkjob/p/3568390.html
Copyright © 2011-2022 走看看