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

最新推荐文章于 2024-07-04 11:51:09 发布

七色花的姐姐

最新推荐文章于 2024-07-04 11:51:09 发布

阅读量1k

点赞数

分类专栏： ExtJs 文章标签： extjs propertygrid

本文链接：https://blog.csdn.net/u012155729/article/details/84876012

版权

ExtJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有时候需要做成表格形式的，用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之前

使用属性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'
});