ExtJS 6.7.0 - SCSS类未加载。

Question

我试图在ExtJS中为网格中的一列应用背景色，这是我的代码，我应用了Sencha应用观察，所以我一切都在加载，但我一直没有应用任何stiles，我注意到，我的代码中没有应用任何stiles。

Ext.define('Ris.academic.student.situation.SituationColumn', {
    extend: 'Ext.grid.column.Column',
    xtype: 'studentsituationcolumn',

    text: 'Situaciones',
    dataIndex: 'situations',
    renderer(situations) {
        let tags = [];
        (situations || []).forEach(situation => {
            tags.push(
                `<div class="student-situation-tag" style="background-color: ${situation.color}">
                    ${situation.text}
                 </div>`
            );
        });
        return tags.join('');
    }
});

而这是SCSS。

.x-grid-cell-inner {
  .student-situation-tag {
    display: flex;
    font-size: smaller;
    font-weight: bold;
    color: #fff;
    padding: 0 3pt;
    border-radius: 3px;
    text-align: center;

    &:not(:first-child) {
      margin-left: 2px;
    }
  }
}

.male-row .x-grid-cell {
  background-color: lightblue; !important;
}

.female-row .x-grid-cell {
  background-color: lightpink; !important;
}

Answer 1

你在没有设置viewConfig的情况下附加样式。

我想你有这样的东西 getRowClass:

viewConfig: {
        getRowClass: function (record) {
            return record.get('gender') == 'm' ? 'male-row' : 'female-row';
        }
    },

在你 grid 配置。

请看fiddle上的例子。https:/fiddle.sencha.com#fiddle35VS

我看不出有什么问题（我用css代替scss，因为fiddle）。