Ext.grid.Panel如何做到根据需要动态的显示或者是隐藏行或列

Posted 2023-05-11

下面代码对于隐藏列是有效的,但是隐藏后通过第二句代码列就找不回来了,

比如当前表格有三列,设计的时候通过下面的代码把三列隐藏
var columnIdx=0;//列位置

Ext.getCmp('grid').view.getHeaderAtIndex(columnIdx).hide();//第一次运行
Ext.getCmp('grid').view.getHeaderAtIndex(columnIdx).hide();//第二次运行
Ext.getCmp('grid').view.getHeaderAtIndex(columnIdx).hide();//第三次运行

这时如果运行
Ext.getCmp('grid').view.getHeaderAtIndex(columnIdx).show();

程序将会提示错误信息
"Uncaught TypeError: Cannot read property 'show' of null"

能不能够通过列名隐藏呢

参考技术A var columnIdx=1;//列位置
Ext.getCmp('grid').view.getHeaderAtIndex(columnIdx).hide();
Ext.getCmp('grid').view.getHeaderAtIndex(columnIdx).show();追问

见问题补充部分

追答

报错是因为你把所有列都隐藏了，view是根据位置来找到那一列然后再隐藏/显示的，可以用其他方法
方法1：通过列ID来隐藏显示
列：id:'a',text: 'First Name', dataIndex:'firstname'
Ext.defer(function()Ext.getCmp('a').hide();,3000);
Ext.defer(function()Ext.getCmp('a').show();,5000);
方法2：通过列名来隐藏
表格id是'grid'
Ext.defer(function()Ext.getCmp('grid').down('gridcolumn[text=First Name]').hide();,3000);
Ext.defer(function()Ext.getCmp('grid').down('gridcolumn[text=First Name]').show();,5000);
能看懂么~~

追问

差不多了就是代码比较的繁琐,分还是给你吧

追答

方式2比较好点，不算繁琐吧

本回答被提问者采纳

如何根据Sencha ExtReact中网格的行数改变行背景颜色？

我想根据ExtReact网格中的行数据更改行背景，我在文档中找不到任何选项

答案

我想你正在寻找Ext.grid.feature.RowBody。您必须覆盖getAdditionalData方法并返回包含rowBodyCls的对象。

Ext.create('Ext.grid.Panel', {
  ...
  features: [{
    ftype: 'rowbody',
    getAdditionalData: function (data, idx, record, orig) {
        // Use the data/record to determine which class to apply, then
        // style the row body in CSS.
        return {
            rowBodyCls: "my-body-class"
        };
    }
  }],
...