ExtJs中如何在表格下层添加带样式的背景模板

针对你用ExtJS Grid实现订单簿时无法添加带颜色边框的背景区块及中间特殊样式，且新增行宽高失控的问题，可通过自定义行模板+CSS定位的方式解决，具体步骤如下：

1. 自定义Grid行模板（rowTpl） #

修改Grid的viewConfig，通过rowTpl定义包含背景层的行结构，让背景层独立于单元格内容，方便样式控制：

viewConfig: {
  getRowClass: function (record) {
    if (record.get('sell').length > 0) {
      return 'sell-row'
    } else if (record.get('buy').length > 0) {
      return 'buy-row'
    }
    return ''
  },
  // 自定义行模板，添加背景容器
  rowTpl: [
    '<tr class="{rowCls}" style="position: relative;">',
      '<div class="order-book-bg {rowCls}-bg"></div>', // 背景层元素
      '<tpl for="columns">',
        '<td class="{cls}" style="{style}" data-columnId="{id}">',
          '<div class="x-grid-cell-inner" style="{innerStyle}">{value}</div>',
        '</td>',
      '</tpl>',
    '</tr>'
  ].join('')
}

2. 编写CSS样式实现背景区块 #

通过绝对定位和比例宽度匹配Grid列分布（4个sell列+1个价格列+4个buy列），实现目标背景样式：

.order-book .x-grid-row {
  position: relative;
  overflow: hidden; /* 防止背景层溢出 */
}

/* 背景层基础样式 */
.order-book-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0; /* 置于单元格内容下方 */
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Sell行背景：左侧4列区域 */
.sell-row-bg {
  left: 0;
  width: calc(4/9 * 100%); /* 4列占总宽度比例 */
  background-color: #ffebee; /* 自定义sell背景色 */
}

/* Buy行背景：右侧4列区域 */
.buy-row-bg {
  right: 0;
  width: calc(4/9 * 100%); /* 4列占总宽度比例 */
  background-color: #e8f5e9; /* 自定义buy背景色 */
}

/* 中间价格列特殊样式 */
.order-book .amount {
  position: relative;
  z-index: 1; /* 确保内容在背景层上方 */
  background-color: #fff3e0; /* 中间区域背景色 */
  border-left: 1px solid #ffcc80;
  border-right: 1px solid #ffcc80;
}

/* 单元格内容层级 */
.order-book .x-grid-cell-inner {
  position: relative;
  z-index: 1;
  padding: 8px;
}

3. 解决新增行宽高失控问题 #

• 确保Grid关闭自动高度，通过固定高度或flex适配父容器：

xtype: 'grid',
cls: 'order-book',
height: 600, // 固定容器高度，或用flex适配父容器
autoHeight: false,

• 可选：给行设置固定高度，保证背景层高度一致：

.order-book .x-grid-row {
  height: 40px; /* 固定行高 */
}

关键说明 #

• 行模板中的{rowCls}会自动绑定getRowClass返回的类名，实现背景层与行类型关联；
• 百分比宽度需与实际列数匹配，若列宽为固定值，可直接替换为像素宽度；
• 单元格内容需设置z-index:1，避免被背景层遮挡。

内容的提问来源于stack exchange，提问作者Michael