PDA

View Full Version : How to set focus class for Ext-JS 4 Grid Class Cell Editor?



Bill M
18 Jan 2013, 10:51 AM
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
21 Jan 2013, 11:17 AM
You want to change the focus class for the editor form field or the actual grid cell when selected?

Bill M
22 Jan 2013, 7:08 AM
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
22 Jan 2013, 7:10 AM
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
22 Jan 2013, 11:29 AM
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
31 Jan 2013, 9:34 AM
Hi Mitch,

I am still having a problem with this.

Can I please get some help?

Thanks!

Patrick Bennett
15 Jan 2014, 10:21 AM
I believe you need to use the full class name 'x-item-selected'. This has been true for me for any property that contains "cls".

Hope that helps.
Patrick