PDA

View Full Version : Extjs 3.4 Window not draggable with DOCTYPE



icarey
17 Oct 2012, 1:13 AM
I am using estjs 3.4. On my html pages I am not using a DOCTYPE, and I have a css menu on these pages. Without the DOCTYPE the menu renders correctly in Firefox, Chrome and Opera, also my extjs windows are draggable. When I use IE9 the css menu does not render correctly so I need to put a DOCTYPE, the problem then is that with the DOCTYPE the extjs windows are no longer draggable in IE9 and chrome. Is there a way to over come this so that both the css menu displays correctly and the windows are draggable in all browsers.

scottmartin
19 Oct 2012, 8:00 AM
Can you provide a small test case so we can have a look?

Scott.

icarey
20 Oct 2012, 2:50 AM
These are the files I am using, some code has been cut out but the same problem exists. when a Doctype is added to BodyRegionTest.php the window will not drag in Chrome or IE but it does in FF and Opera

BodyRegionTest.php
<!DOCTYPE html>
<html>
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Body Region</title>
<link rel="stylesheet" href="menu.css" />
<script type="text/javascript" src="iefix.js"></script>

<link rel="stylesheet" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ux/ProgressBarPager.js"></script>
<script type="text/javascript" src="BodyRegionGridTest.js"></script>
</head>
<body>

<?php
include_once 'bodymenu.php';
?>

</body>
</html>

bodymenu.php
<div id="centeredmenu">
<ul>
<li><a href="#">Data Tables</a>
<ul>
<li><a href="BodyRegionTest.php" target="_self">Body Region</a></li>
<li><a href="#" target="_self">Consult</a></li>

</ul>
</li>
</ul>
</div>

BodyRegionGridTest.js
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();

BodyRegionDataStore = new Ext.data.Store({
id: 'BodyRegionDataStore',
proxy: new Ext.data.HttpProxy({
url: '',
method: 'POST'
}),
baseParams:{task: "LISTING"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'BodyRegionID', type: 'int', mapping: 'BodyRegionID'},
{name: 'BodyRegionName', type: 'string', mapping: 'BodyRegionName'},
{name: 'BodyRegionDescription', type: 'string', mapping: 'Description'}
]),
sortInfo:{field: 'BodyRegionName', direction: "ASC"}
});

BodyRegionColumnModel = new Ext.grid.ColumnModel(
[{
header: 'ID',
readOnly: true,
dataIndex: 'BodyRegionID',
sortable : true,
width: 30
//hidden: false
},{
header: 'Body Region',
dataIndex: 'BodyRegionName',
width: 150,
sortable : true,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 50
//maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Description',
dataIndex: 'BodyRegionDescription',
width: 300,
sortable : true,
editor: new Ext.form.TextField({
allowBlank: true,
maxLength: 255
//maskRe: /([a-zA-Z0-9\s]+)$/
})
}]
);

BodyRegionColumnModel.defaultSortable= true;

BodyRegionListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'BodyRegionListingEditorGrid',
store: BodyRegionDataStore,
cm: BodyRegionColumnModel,
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
tbar: [
{
text: 'Close',
tooltip: 'Click to Close this table',
handler: function(){
BodyRegionListingWindow.hide();
},
icon: 'png_gif/door_out.png',
cls: 'x-btn-text-icon'
}],
bbar: new Ext.PagingToolbar(
{
pageSize: 20,
store: BodyRegionDataStore,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
})
});

var BodyRegionListingWindow = new Ext.Window({
id: 'BodyRegionListingWindow',
title: 'Body Region Table',
closable:true,
constrain: true,
width:520,
height:540,
plain:true,
layout: 'fit',
items: BodyRegionListingEditorGrid
});
BodyRegionListingWindow.show();
});

iefix.js

function addhover() {
var navli,i;
// loop through all elements in the nav
navli = document.getElementById('centeredmenu').getElementsByTagName('li')
for(i=0;i<navli.length;i++) {
// add the hover functions to the li onmouseover and onmouseout
navli[i].onmouseover=function(){hover(this,'hover');};
navli[i].onmouseout=function(){hover(this,'');};
}
}
function hover(o,sClass) {
if (o) {
o.className = sClass;
}
}
addhover();

menu.css
/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #000; /* black line below menu */
width:100%;
font-family:Tahoma, Verdana, Geneva, sans-serif; /* Menu font */
font-size:90%; /* Menu text size */
z-index:99999; /* This makes the dropdown menus appear above the page content below */
position:relative;
}

/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:.95em;
line-height:1em;
background:#336699;
text-decoration:none;
color:#fff;

border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
color:#fff;
background:#336699;
}
#centeredmenu ul li a:hover {
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#1A4473; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:2em;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#990000;
color:#fff;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#660000; /* Sub menu items background colour */
color:#fff;
float:left;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}

Thanks,
Ivan