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



 PropertyGrid是在上节我们说的Editor的基础上开发的更灵活的高级表格组件,下面我们来看下它的功能和应用方式:my6思考者日记网-束洋洋个人博客

QQ截图20131115222311.jpgmy6思考者日记网-束洋洋个人博客

属性表格扩展自EditGrid,所以可以直接编辑右边的内容。注意,只有右边的,即使你单击左边的单元格,编辑器也只会出现在右边。my6思考者日记网-束洋洋个人博客

实际上,我们可以用散列表来形容PropertyGrid,左边可以看做key,右边的是value。key是由我们指定好的,用户只需要修改对应的value即可。对于某些属性而言,配置很方便。呵呵,是不是很像map。对了,下面的数据,你也可以用Java的HashMap或有键值对的组合来传递,通过Ext.ajax来实现。代码方面,因为只有两列,所以我们不用担心columns,store的部分确定是key和value的组合,因此也不用再分几步准备。下面用代码创建一个瞧瞧:my6思考者日记网-束洋洋个人博客

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学习之路"  
        }  
    });

 my6思考者日记网-束洋洋个人博客

大家看了肯定会明白,某些表单的功能也可以用PropertyGrid来实现,是不是方便多了,看起来互动性更强了?my6思考者日记网-束洋洋个人博客

虽然PropertyGrid默认是提供编辑功能的,但是在某些情况下,也希望它只用来显示数据,这时就需要禁用PropertyGrid中的编辑功能。PropertyGrid中并没有直接提供可以开关编辑功能的参数,但我们可以通过Ext的事件监 听 器实现这一功能,具体代码如下:my6思考者日记网-束洋洋个人博客

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

 my6思考者日记网-束洋洋个人博客

现在表格就只能看不能编辑了。my6思考者日记网-束洋洋个人博客

 my6思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridmy6思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridmy6思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingmy6思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格my6思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.Fieldmy6思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件my6思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditormy6思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 my6思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解my6思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目my6思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈