ExtJS4.2学习(九)属性表格控件PropertyGrid
2013-12-10 22:43
274 查看
PropertyGrid是在上节我们说的Editor的基础上开发的更灵活的高级表格组件,下面我们来看下它的功能和应用方式:
![](http://www.shuyangyang.com.cn/d/file/jishuliangongfang/qianduanjishu/20131115/4778bc1d8ca1b7b9abaf272e9080217d.jpg)
属性表格扩展自EditGrid,所以可以直接编辑右边的内容。注意,只有右边的,即使你单击左边的单元格,编辑器也只会出现在右边。
实际上,我们可以用散列表来形容PropertyGrid,左边可以看做key,右边的是value。key是由我们指定好的,用户只需要修改对应的value即可。对于某些属性而言,配置很方便。呵呵,是不是很像map。对了,下面的数据,你也可以用Java的HashMap或有键值对的组合来传递,通过Ext.ajax来实现。代码方面,因为只有两列,所以我们不用担心columns,store的部分确定是key和value的组合,因此也不用再分几步准备。下面用代码创建一个瞧瞧:
虽然PropertyGrid默认是提供编辑功能的,但是在某些情况下,也希望它只用来显示数据,这时就需要禁用PropertyGrid中的编辑功能。PropertyGrid中并没有直接提供可以开关编辑功能的参数,但我们可以通过Ext的事件监 听 器实现这一功能,具体代码如下:
连载中,请大家持续关注,本文出自我的个人网站思考者日记网
![](http://www.shuyangyang.com.cn/d/file/jishuliangongfang/qianduanjishu/20131115/4778bc1d8ca1b7b9abaf272e9080217d.jpg)
属性表格扩展自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; });现在表格就只能看不能编辑了。
连载中,请大家持续关注,本文出自我的个人网站思考者日记网
相关文章推荐
- ExtJS4.2学习(九)属性表格控件PropertyGrid(转)
- Ext属性表格控件——PropertyGrid
- 制作ListView表格-修改控件属性
- ExtJS中表格控件的使用,属性设置和数据的获取(copyfrom:http://www.itzhai.com/extjs-form-controls-in-the-use-of-property-)
- ASP.NET中服务器控件Table动态生成表格及其属性介绍
- SAP屏幕设计器专题:表格控件属性的设定(七)
- SAP屏幕设计器专题:表格控件属性的设定(七)
- 【Visual Studio风格开发系列 - PropertyGrid控件】如何在设计时隐藏从父控件继承的属性
- C# 属性控件PropertyGrid应用心得
- ExtJS中表格控件的使用,属性设置和数据的获取加载
- fineUI表格控件各属性说明
- [原创]使 PropertyGrid 控件显示中文属性
- PropertyGrid控件 分类(Category)及属性(Property)排序
- jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
- PropertyGrid控件 分类(Category)及属性(Property)排序
- easyui源码翻译1.32--PropertyGrid(属性表格)
- jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
- ExtJS4.2学习(10)分组表格控件--GroupingGrid 推荐
- 【转】ASP.NET中服务器控件Table动态生成表格及其属性介绍
- Delphi表格控件DBGridEh全属性设置详解 最全的属性设置说明