Problems with Panel

[thmatew]

Hello,

First of all, the Sencha Touch framework is really great, but I have some trouble to use it.
I am new in Sencha Touch framework and I want to load some HTML in a Ext.Panel, I found two ways for that.
The first one is to update my panel with a iframe tag, that is good, but I cannot use the Sencha habilities to move my web page.
The Second, is to read my page with javascript and update my panel with this content, this is the best way, for me, because on web browsers, I can use Sencha and I have my CSS styles, but I don't have my complete page, it's truncated at the bottom.
1st question, Why is my page truncated at the bottom ?
And second question, why my CSS is not displayed on my android phone ?

here is a part of my code :

onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
if(mainpanel==null)
{
mainpanel=new Ext.Panel({
layout:'card',
fullscreen:true,
cardSwitchAnimation:'slide',
scroll:{direction : 'vertical'},
style:{backgroundColor:'black'},
styleHtmlContent:true,
items:[{xtype: 'panel', style:{backgroundColor:'#FFFFFF'}, width:400},
{xtype: 'panel', style:{backgroundColor:'#F0C0C0'}, width:400}
],
dockedItems:
[
{
dock : 'top',
xtype: 'toolbar',
items :
[
{
text:'back',
handler:function (b,e)
{
mainpanel.hide({type : 'slide', direction: 'left'});
list.show();
}
}
]

}
]
});
}
if(list!=null)
{

getPage(record.get('url'));
mainpanel.items.getAt(1).update(xhr_object.responseText);
mainpanel.doLayout();
list.hide();
mainpanel.setActiveItem(1,'slide');
mainpanel.show('slide');

}
}
}
If you see something wrong, please tell me.

Thank you for your Help.

[thmatew]

nobody can answer ?

to simplify my questions, have you got some methods to dipslay a html page in a panel (or other component) which use CSS ?

[thmatew]

I found my answers
I set the scroll on my card layout, instead of my panel itself the code now is :

if(mainpanel==null)
{
mainpanel=new Ext.Panel({
layout:'card',
fullscreen:true,
cardSwitchAnimation:'slide',
style:{backgroundColor:'black'},
styleHtmlContent:true,
items:[{xtype: 'panel', style:{backgroundColor:'#FFFFFF'}},
{xtype: 'panel', style:{backgroundColor:'#F0C0C0'},scroll:'vertical'}
],
dockedItems:
[
{
dock : 'top',
xtype: 'toolbar',
items :
[
{
text:'back',
handler:function (b,e)
{
mainpanel.hide({type : 'slide', direction: 'left'});
list.show();
}
}
]

}
]
});
}

But, I don't even have my CSS on mobile, do you know why ?

[AndreaCammarata]

Hi thmatew.
What do you mean with "But, I don't even have my CSS on mobile, do you know why ?"

[thmatew]

If I declare my <link type="text/css" rel="Stylesheet" href="src/iframe.css" /> in the html I want to upadte in my panel, it doesn't appear to be valid on mobile, but in chrome it works, but if I declare the link tag in my first page source, it works on mobile.

Is this behavior is normal ?