How to set focus class for Ext-JS 4 Grid Class Cell Editor?

[Bill M]

Hi,

I would like to know how to set the focus class for editable cells within the Grid Class. Does anyone know how to do this, or could provide an example?

For textfields I have been using the property- focusCls: 'focusClass',
with the corresponding entry placed in a CSS file:

.x-field-focusClass {
background: #FAFAD2 !important;
border: 2px solid blue !important;
}

However, doesn't seem to work for the Grid Class.

Here is an example of my code:

var cellEditing= Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

The above is passed to the Component below via an argument to the call to Ext.create(), which I used to create the Component below.

Ext.define('src.guiComponent...

extend: 'Ext.panel.Panel',

initComponent: function() {

Ext.apply(this, {

...
...
items: [

id: 'turboX_Tab_Id',
xtype: 'grid',

store: xxx
plugins: [this.cellEditingArg]
selType: 'cellmodel',

columns: [
{
text: 'ID',
dataIndex: 'id',
sortable: false,
...
},
{
text: 'XML Data Field',
sortable: false,
...
},
{
text: "Data Select',
dataIndex: 'BLANK_FIELD',
width: 100,
sortable: false,
...
editor: {
allowBlank: true <-- How Can I supply a focusCls for the editor/cell used in this column???
}

Thanks!!

[mitchellsimoens]

You want to change the focus class for the editor form field or the actual grid cell when selected?

[Bill M]

Hi Mitch,

I would like when I click on a Editable Cell within my Grid table, for the Border of the Cell to HighLight with a Thickened Border and the Background Color of the Cell to change. Is this something I can control from a CSS file? I have a solution that does this with Textfields, from what I have posted. But this does not work with Editable Grid Cells.

Do you know of a way to do this for Editable Cells within a Grid Table?

Hope I am clear now

Thanks.

[mitchellsimoens]

If you want a grid cell when selected to have a border you can use the selectedItemCls on the grid's view to change it with CSS

[Bill M]

Hi Mitch,

I've tried your suggestion, but it doesn't seem to be working.

Here is the code:

In my CSS file I added:

.x-item-selected {
background: #FAFAD2 !important;
border: 2px solid blue !important;
}

And my Ext-JS 4.1 code looks like ths:

Ext.define...
...
items: [
{
id: 'dataFields_Id',
xtype: 'grid',
columnLines: true,
...
selectedItemCls: 'selected' , <--- Is this correct?
columns: [
{
text: 'Column 1',
...
},
{
text 'Column 2',
....
},
{
text 'Column 3',
...
editor: {
allowBlank: true
},
selectedItemCls: 'selected', <--- This is actually the only column that has editable cells. Not sure if property belongs here or not.
...
}


Please let me know what I am doing wrong

Thanks.

[Bill M]

Hi Mitch,

I am still having a problem with this.

Can I please get some help?

Thanks!