set panel height sencha -touch

Question

I am New In sencha -touch and need your help.

I add new panel and want to set the height of this panel in css.

 this.clockContainer = new Ext.Panel({
id:'clock',
    html:'00:00'
});
#clock {height:142px}

however,sencha calculates the height style to 91px (according to the html content) and ignores my css.

I dont want to add the height property to the panel like this:

this.clockContainer = new Ext.Panel({
id:'clock',
    html:'00:00',
    height:'142px'
});

what can I do?How can I prevent sencha calculates the height?

thank you.

edit: if I set the height property to '142px' it works fine but if I set it to '8.06em' senchs ignores it and calculate itself.

Incidentally, why don't you want to use the height property? would like to understand your use case. — Michael Mullany

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2012-02-21T13:06:12

You need to add a cls attributes to your Ext.Panel like so

this.clockContainer = new Ext.Panel({
    id:'clock',
    html:'00:00',
    cls:'clock-panel'
});

Then in your CSS you add this

.clock-panel .x-panel-body{
    height:142px;
}

Hope it helps