ExtJS4.2学习(九)属性表格控件PropertyGrid

PropertyGrid是在上节咱们说的Editor的基础上开发的更灵活的高级表格组件，下面咱们来看下它的功能和应用方式：

属性表格扩展自EditGrid，因此能够直接编辑右边的内容。注意，只有右边的，即便你单击左边的单元格，编辑器也只会出如今右边。
实际上，咱们能够用散列表来形容PropertyGrid，左边能够看作key，右边的是value。key是由咱们指定好的，用户只须要修改对应的value便可。对于某些属性而言，配置很方便。呵呵，是否是很像map。对了，下面的数据，你也能够用Java的HashMap或有键值对的组合来传递，经过Ext.ajax来实现。代码方面，由于只有两列，因此咱们不用担忧columns，store的部分肯定是key和value的组合，所以也不用再分几步准备。下面用代码建立一个瞧瞧：

var grid = new Ext.grid.PropertyGrid({ 
        title:'属性表格', //表格标题 
        autoHeight:true, //有了它就不须要咱们为div指定style 
        width:300, 
        renderTo:'grid', 
        viewConfig:{ 
            forceFit:true 
        }, 
        source:{ //json数据里指定了一组key和value 
            "名字":"束洋洋", 
            "建立时间":new Date(Date.parse('2013/11/15')), 
            "是否有效":false, 
            "版本号":.01, 
            "描述":"ExtJs4.2学习之路" 
        } 
    });

你们看了确定会明白，某些表单的功能也能够用PropertyGrid来实现，是否是方便多了，看起来互动性更强了？
虽然PropertyGrid默认是提供编辑功能的，可是在某些状况下，也但愿它只用来显示数据，这时就须要禁用PropertyGrid中的编辑功能。PropertyGrid中并无直接提供能够开关编辑功能的参数，但咱们能够经过Ext的事件监 听 器实现这一功能，具体代码以下：

//只能看不能动，经过如下方式实现 
    grid.on("beforeedit",function(e){ 
        e.cancel = true; 
        return false; 
    });

如今表格就只能看不能编辑了。
连载中，请你们持续关注，本文出自个人我的网站思考者日记网