Override row cell css

[xjpmauricio]

Hi, how can i override a row cell? This is what i got:

Capture.JPG (13.34 KiB) Viewed 5703 times

All i need is to override this css class...

.sch-schedulerpanel .x-grid3-row .x-grid3-td-0 .x-grid3-cell-inner {
	PADDING-LEFT: 24px; BACKGROUND: url(images/user_green.png) no-repeat 2px center
}

...but i still need to keep this css. I have two schedulers. But one of them needs a specific "x-grid3-cell-inner" css.

I can set a new css class but the base css (above) still is showing; here's what i do:

                colModel: new Ext.ux.grid.LockingColumnModel({
                    columns: [

                        { 
                            header: 'Rotations', sortable: true, width: 150, dataIndex: 'Name', locked: true,
                            renderer: function (v, m, r) {
                                m.css = 'rotationOuterRowCell';
                                return xTemplateRotationsRow.apply(r.data);
                            }
                        } 
                                               
                    ]
                }),

Any ideias?

[mats]

Why don't you just delete the CSS that you don't need?

This code is not part of the scheduler product, just something from an example.

.sch-schedulerpanel .x-grid3-row .x-grid3-td-0 .x-grid3-cell-inner {
   PADDING-LEFT: 24px; BACKGROUND: url(images/user_green.png) no-repeat 2px center
}

[xjpmauricio]

Why don't you just delete the CSS that you don't need?

This code is not part of the scheduler product, just something from an example.

.sch-schedulerpanel .x-grid3-row .x-grid3-td-0 .x-grid3-cell-inner {
   PADDING-LEFT: 24px; BACKGROUND: url(images/user_green.png) no-repeat 2px center
}

...Hi...i cannot delete this css:

.sch-schedulerpanel .x-grid3-row .x-grid3-td-0 .x-grid3-cell-inner {
	PADDING-LEFT: 24px; BACKGROUND: url(images/user_green.png) no-repeat 2px center
}

... because it's being used by another scheduler on the same page.
All i need is that both schedulers have diferent css classes for the rows, or at least one of them.

[mats]

Set a 'cls' property to a new class and change your css to:

yourSched = new Sch.SchedulerPanel({
    cls : 'scheduler1'
});

.scheduler1 .x-grid3-row .x-grid3-td-0 .x-grid3-cell-inner {
   PADDING-LEFT: 24px; BACKGROUND: url(images/user_green.png) no-repeat 2px center
}

[xjpmauricio]

Ok...i got it, it's easy; on the scheduler:

            var schPnlRotations = new Sch.SchedulerPanel({
                resizeHandles : 'none',
                enableDragCreation : false,
                id: 'schPnlRotations',
                cls: 'schPnlRotations',

...on the css:

.schPnlRotations .x-grid3-row .x-grid3-td-0 .x-grid3-cell-inner  {
	PADDING-LEFT: 24px!important; BACKGROUND: url(images/puzzle.png) no-repeat 2px center!important;
}

Thanks!!!

[mats]

If you already have an id set you can skip the cls and just change the rule to:

#schPnlRotations .x-grid3-row .x-grid3-td-0 .x-grid3-cell-inner  {
   PADDING-LEFT: 24px!important; BACKGROUND: url(images/puzzle.png) no-repeat 2px center!important;
}

[xjpmauricio]

...yes...now the options are many...

Thanks...