Custom CSS in Sencha Touch 2 app

Question

Quick question, I've been trying to change the background color and the background image of my Sencha Touch views but it seems I haven't been able to implement this properly.

I've tried this:

extend:'Ext.form.Panel',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img'],

config:{
    title: 'Login',
    style: {
       background: "#000"   
    },

And this:

extend:'Ext.form.Panel',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img'],
    alias: 'widget.loginview',
style:{
    background: '#000'
},
config:{
    title: 'Login',

And even by adding a CSS class using cls:

extend:'Ext.form.Panel',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img'],
config:{
    title: 'Login',
    cls: 'custom-panel',

where custom-panel is defined as:

.custom-panel{
   background-image: url('../images/bg.jpg');
}

How could I make this work?

Answer 1

Try with baseCls attribute insteed of cls

extend:'Ext.form.Panel',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img'],
config:{
    title: 'Login',
    baseCls: 'custom-panel',