2015-05-21 6 views
2

Я хочу выделить всю сетку, когда я перемещаю мышь над этой сеткой, используя какой-либо цвет или, может быть, меняя границу или какой-либо другой способ, который должен выглядеть так, как будто я выбираю таблицу в Ext Js 4.0?Как выделить сетку для мыши в Extjs 4.0?

Некоторые другие варианты также будут работать.

ответ

3

Как MarthyM упоминает ниже, проще использовать «overCls» вместо прослушивателей. В вашем объявлении сетки:

overCls: 'borderred' 

В таблице стилей:

.borderred { border: 1px solid red; } 

Я обновил скрипку здесь с помощью 'overCls' для ExtJS 4.0.7: https://fiddle.sencha.com/#fiddle/na4

Оригинальный ответ:

listeners: { 
    containermouseover: { 
     fn: function (view) { 
      view.up('gridpanel').getEl().applyStyles('border: solid 1px red'); 
     } 
    }, 
    containermouseout: { 
     fn: function (view) { 
      view.up('gridpanel').getEl().applyStyles('border: solid 1px #99bce8'); 
     } 
    } 
} 
+0

Слушатели работают нормально, но проблема здесь не работает при перемещении курсора по заголовкам или строкам сетки. Мне нужно навести курсор, когда я перемещаю мышь на любую часть сетки. –

+1

У меня это есть. Я просто заменил «keepermouseover» и «containsermouseout» на «itemmouseenter» и «itemmouseleave» соответственно. Большое спасибо. :) –

+0

Приятно слышать, что у вас есть это и спасибо за обмен вашим решением. –

1

Единственное, что вам нужно сделать, это установить класс CSS с помощью..

overCls: 'gridHover' 

Это добавит класс CSS в вашу сетку, когда над ним нависнет мышь. Тогда вам просто нужно установить стиль в CSS:

.gridHover { 
    border: 2px solid red; /* or any other style */ 
} 

И все. Нет необходимости в jQuery или слушателях.

Документация: http://docs.sencha.com/extjs/4.0.0/#!/api/Ext.grid.Panel-cfg-overCls

Смежные вопросы