Проблема ExtJS с 4 ячейками - PullRequest
Новая
       21

Проблема ExtJS с 4 ячейками

0 голосов
/ 19 сентября 2011

После прочтения этой статьи мне удалось изменить рендеринг.

Я вызываю внутреннюю функцию: 

renderer: this.onRenderCell

И эта функция такова: 

onRenderCell: function(value, metaData, record, rowIndex,
  colIndex, store, view) {
  metaData.css = 'ini-cell-pas-traduit';
  return '«'+value+'»';
}

Если вы внимательно прочитаете, я верну '«'+value+'»';, поэтому для каждого значения оно преобразуется в: ' "value" '; , Это доказательство того, что в каждой строке он работает отлично. Так должно быть и для CSS. Но CSS применяется один раз из двух! Это сводит меня с ума.

Вот что он дает (последний Firefox, то же самое с последним Chrome):

ExtJS cell css problem

Есть идеи, куда мне взглянуть?

Вот большой пример моего исходного кода: 

Ext.define('Lang.grid.Panel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.langgrid',

    requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],

    initComponent: function(){

        this.editing = Ext.create('Ext.grid.plugin.CellEditing');

        Ext.apply(this, {
            iconCls: 'icon-grid',
            plugins: [this.editing],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    iconCls: 'icon-add',
                    text: 'Add',
                    scope: this,
                    handler: this.onAddClick
                }, {
                    iconCls: 'icon-delete',
                    text: 'Delete',
                    disabled: true,
                    itemId: 'delete',
                    scope: this,
                    handler: this.onDeleteClick
                }]
            }],
            columns: [{
                text: 'label',
                flex:2,
                sortable: true,
                dataIndex: 'label'
            },{
              header: 'fr',
              flex: 3,
              sortable: true,
              dataIndex: 'fr',
              renderer: this.onRenderCell,
              field: {
                type: 'textfield'
              }
            },{
              header: 'es',
              flex: 3,
              sortable: true,
              dataIndex: 'es',
              renderer: this.onRenderCell,
              field: {
                type: 'textfield'
              }
            },{
              header: 'us',
              flex: 3,
              sortable: true,
              dataIndex: 'us',
              renderer: this.onRenderCell,
              field: {
                type: 'textfield'
              }
            }
            ]
        });
        this.callParent();
        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
    },

    (...)
    (snip useless code)
    (...)

    onRenderCell: function(value, metaData, record, rowIndex,
      colIndex, store, view) {
      metaData.css = 'ini-cell-pas-traduit';
      return '<span style="color:red; font-weight:bold;">&laquo;'+
        value+'&raquo;</span>';
    }
});

Ответы [ 2 ]

3 голосов
/ 19 сентября 2011

В metadata.css (ini-cell-pas-traduit) сделайте это для background-color

background-color : red !important //or whichever color you've specified.

РЕДАКТИРОВАТЬ: Это происходит потому, что сетка настроена с stripeRows : true.Я не знаю, если это сделано по умолчанию или вы сделали это в конфиге, но забыл упомянуть об этом здесь.Когда вы используете stripeRows, он устанавливает background-color, который можно переопределить с помощью ключевого слова !important.

2 голосов
/ 09 октября 2011

Варун Ахар прав в использовании! Важный, но так как вы используете Ext JS 4, вам также следует изменить

metaData.css = 'ini-cell-pas-traduit';

до

metaData.tdCls = 'ini-cell-pas-traduit';

Члены metaData css и attrтеперь были заменены на tdCls и tdAttr, и старые будут работать только в Ext JS 4, если вы также установите уровень совместимости Ext 3.

...