I am trying to create a overlay panel over viewport, and put some components into this overlay panel, so I tried following codes:
Code:
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://docs.sencha.com/touch/2-0/touch/resources/css/sencha-touch.css" type="text/css"> <script type="text/javascript" src="http://docs.sencha.com/touch/2-0/touch/sencha-touch-all.js"></script>
<script type="text/javascript">
Ext.setup({
onReady : function() {
Ext.create('Ext.Panel', { //viewport panel
fullscreen: true,
layout: 'fit',
html: 'test'
});
var overlayPanel = Ext.create('Ext.tab.Panel', { //overlay panel
floating: true,
modal: true,
tabBarPosition: 'bottom',
width: 400,
height: 600,
items: [
{
title: 'Settings',
iconCls: 'settings',
layout: 'fit',
items: [{
xtype: 'panel',
id: 'settingPanel',
layout: 'vbox',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Settings'
},
{
xtype: 'fieldset',
title: 'Search',
items: [
{
xtype: 'togglefield',
label: 'Enable'
},
{
xtype: 'selectfield',
label: 'Search By',
options:
[{
text: 'GDP',
value: '0'
},
{
text: 'Profit',
value: '1'
}]
}]
}]
}]
}]
});
overlayPanel.show();
}
});
</script>
</head>
<body>
</body>
</html>
but there are several issues:
1. overlay panel becomes transparent
2. overlay panel lost border
3. selectfield hideOnMaskTap: the option panel of selectfield doesn't hide when tap at the overlay panel, only works when tap in viewport panel, i.e., outer space other than overlay panel
4. If I first change the selection of selectfield, the mask will be gone, then, the hideOnMaskTap config of overlayPanel doesn't work anymore....
I am wondering do I need to apply more configs into overlayPanel? and if so, what configs?
wish somebody can help me out!!
thanks!
Unanswered: Overlay panel: not properly rendered and behaved...
Reply With Quote
