extjs5 中propertygrid修改样式以及数据更新

有时候需要做成表格形式的，用gridpanel有点大材小用了。

//grid.js
{flex:1, xtype: 'propertygrid',    reference:'onuGridPanel',//隐藏表头hideHeaders:true,margin:'10px',bodyBorder:true,border:true,disableSelection:true,//不让表格排序 默认是排序的sortableColumns:false,//表格的宽度nameColumnWidth: 165,viewConfig:{//表格的样式getRowClass: function (record, rowIndex, rowParams, store){return rowIndex % 2 !== 0 ? 'new-grid-rows' : 'new-grid-rows-other'}                       },//字段与对应的中文映射propertyNames : {   'name':'name','age':'age','tel':'tel'    },source:{//这块是表格显示的内容'name': 'echo','age': '-16','tel': '123456789090'},sourceConfig: {//对表格对应的内容做配置'name':{displayName: '姓名',renderer: function (value){return Ext.String.format('<span style="color: red;">{0}</span>', value);}},'tel':{displayName: '电话号码',renderer: function (value, metadata){metadata.tdAttr = Ext.String.format('data-qtip="{0}"', value);return value;}}
},
listeners:
{//不可以选中表格，意思就是说你点击表格的时候不会出现编辑框'beforeedit': function(e) {e.cancel = true;return false;}}

未使用属性sortableColumns:false之前，默认是true

使用属性sortableColumns:false之后

//css样式 不用x-grid-rows原因是框架里面默认的样式都是x-开头的，避免混淆
.new-grid-rows {height: 27px;font-size: 14px;line-height: 27px;font-family: Tahoma, Helvetica, Arial, Verdana;font-weight: normal;background-color: #f9f9f9
}.new-grid-rows-other {height: 27px;line-height: 27px;font-size: 14px;font-family: Tahoma, Helvetica, Arial, Verdana;font-weight: normal
}
x-grid-cell-name 单元格样式 可以用来设置左边栏的背景等

说下更新数据 在controller里面
this.getReferences = this.getReferences();
this.getReferences.onuGridPanel.setSource(
{'name': '张三','age': '18','tel': '654788999999'
});

转载请标明出处，祝天天开心！

extjs5 中propertygrid修改样式以及数据更新相关推荐

c++ builder groupbox修改样式_Pandas也能修改样式？快速给你的数据换个Style！
前言在之前的很多文章中我们都说过,Pandas与openpyxl有一个很大的区别就是openpyxl可以进行丰富的样式调整,但其实在Pandas中每一个DataFrame都有一个Style属性,我们 ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
Word中新建样式/修改样式对话框中的各个选项意义
名称(N): 显示您在"样式"对话框中选择的样式的名称.您可以更改此样式,或者键入新名称来新建样式,长文档中,样式的名称要注意易于理解和记忆,如"篇样式",&q ...
vue 方法里面修改样式_vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. .swiper-contain ...
css中如何修改鼠标光标（指针）的样式和颜色
今天在开发过程中遇到一个问题,如下: 我的输入框的背景比较暗导致鼠标的指针(系统默认为黑色)停留在那也看不清楚. 上网查了一下,全是关于修改鼠标指针样式的,而没有颜色的教程. 那么,我在这里先简单地记 ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_js相关：layui中table表头样式修改方法
js相关:layui中table表头样式修改方法发布于 2020-7-25| 复制链接分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
换行样式不要首行缩进_修改文档样式库中的“正文”样式，使得文档中所有正文段落首行缩进2个字符。...
问答题请在[答题]菜单下选择[进入考生文件夹]命令,并按照题目要求完成下面的操作.注意:以下的文件必须都保存在考生文件夹下.在考生文件夹下打开文档WORD．DOCX.[背景素材]为了更好地介绍公司的服 ...

extjs5 中propertygrid修改样式以及数据更新

extjs5 中propertygrid修改样式以及数据更新相关推荐

最新文章

热门文章