PDA

View Full Version : Problems with Menu Element



dragon001
25 Oct 2010, 2:37 PM
Hi,
I'm having a small problem with the menu.

Firstof all here's the application:

The Main Index (is parsed by PHP)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<base href="<?=$this->header_baseURL?>" />
<title>
Title
</title>
<style type="text/css">
HTML, BODY {
background-image: url(images/gfx/sitebackground.jpg);
height: 100%;
}
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#loading {
position: absolute;
width:30%;
top: 40%;
left: 35%;
z-index: 2;
border: 1px black dashed;
background-color: lightsteelblue;
}
#loading SPAN {
padding-top:80px;
display: block;
left:150px;
height: 100px;
width:100%;
background: url('../../images/ui/preLoader/images.gif') no-repeat left center;
text-align: center;
}
</style>
</head>
<body>
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading. Please wait...</span>
</div>
<script>document.getElementById('loading-message').innerHTML = 'Preloading ...';</script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'preLoader'))?>"></script>
<script>document.getElementById('loading-message').innerHTML = 'Loading Core Styles ...';</script>
<link href="js/extJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen" href="<?=$this->link('system','fileStyle',array('style'=>'application'))?>" />
<!--<link rel="stylesheet" type="text/css" media="screen" href="js/extJS/resources/css/xtheme-gray.css" />-->
<script>document.getElementById('loading-message').innerHTML = 'Loading Core Libraries ...';</script>
<script type="text/javascript" src="js/extJS/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="js/extJS/ext-all-debug.js"></script>
<script>document.getElementById('loading-message').innerHTML = 'Loading Translation Files ...';</script>
<script type="text/javascript" src="js/extJS/src/locale/ext-lang-en.js"></script>
<script>document.getElementById('loading-message').innerHTML = 'Loading Libraries ...';</script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'focus'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'aria'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'library'))?>"></script>
<script>document.getElementById('loading-message').innerHTML = 'Preparing Workspace ...';</script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'crm'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'support'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'address'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'bug'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'finance'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'intranet'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'marketing'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'messanger'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'personal'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'webmail'))?>"></script>
<script type="text/javascript" src="<?=$this->link('system','fileJS',array('js'=>'application'))?>"></script>
<script type="text/javascript">
Ext.onReady(function(){
//Now Start the Application
application.tree();
application.Master();
application.runClock();
//Divs Remove
document.getElementById('loading-message').innerHTML = 'Running Application ...';
document.getElementById('loading-mask').parentNode.removeChild(document.getElementById('loading-mask'));
document.getElementById('loading-message').parentNode.removeChild(document.getElementById('loading-message'));
document.getElementById('loading').parentNode.removeChild(document.getElementById('loading'));
});
</script>
</body>
</html>


The Main Application is this File (also Parsed by PHP)



Ext.BLANK_IMAGE_URL = 'js/extJS/resources/images/default/s.gif';
// Main Application
var application = new Object();
application.MainLevel = null;
application.L1 = null;
application.L2 = null;
application.L3 = null;
application.L4 = null;
application.L5 = null;
application.Ltree = null;
application.SystemWidth = 640;
application.SystemHeight = 480;
application.AvailableHeight = 0;

function getWidth(){
if (self.innerWidth){
application.SystemWidth = self.innerWidth;
}else{
if (document.documentElement && document.documentElement.clientWidth){
application.SystemWidth = document.documentElement.clientWidth;
}else{
if (document.body){
application.SystemWidth = document.body.clientWidth;
}
}
}
}

function getHeight(){
if (self.innerHeight){
application.SystemHeight = self.innerHeight;
}else{
if (document.documentElement && document.documentElement.clientHeight){
application.SystemHeight = document.documentElement.clientHeight;
}else{
if (document.body){
application.SystemHeight = document.body.clientHeight;
}
}
}
}
application.resizer = function(){
getWidth();
getHeight();
application.AvailableHeight = application.SystemHeight - 26 - 26;
}

application.Master = function(){
application.resizer();
var scrollerMenu = new Ext.ux.TabScrollerMenu({
maxText : 15,
pageSize : 5
});
application.MainLevel = new Ext.Viewport({
layout: 'border',
id: 'CRMworkbench',
items:[
{
region: 'north',
xtype: 'toolbar',
height: 26,
id: 'BarSection',
items:[
{
xtype: 'tbtext',
text: 'Main >>'
},{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'System Managment',
menu:[
{
text: 'Users Managment'
},{
text: 'Company Managment'
},{
text: 'System Log'
},{
text: 'Preferences'
},{
text: 'Tools'
},{
text: 'System Informations'
}
]
},{
xtype: 'tbbutton',
text: 'CRM',
menu:[
{
text: 'Dashboard'
},{
text: 'Documents'
},{
text: 'Finance'
},{
text: 'Marketing'
},{
text: 'Support'
},{
text: 'Bug Tickets'
}
]
},{
xtype: 'tbseparator'
},
{
xtype: 'tbbutton',
text: 'New',
menu: [
{
text: 'new User'
},{
text: 'new Company'
},{
text: 'new Invoice'
},{
text: 'new Letter'
},{
text: 'new Ticket'
},{
text: 'new Bug'
},{
text: 'new Message'
},{
text: 'new Email'
}
]
},{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'personal',
menu: [
{
text: 'Personal Dashboard'
},{
text: 'Messages'
},{
text: 'Email'
},{
text: 'Own Documents'
}
]
},{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'Intranet',
menu: [
{
text: 'Startpage'
},{
text: 'News'
},{
text: 'Project Manager',
handler: function(){
application.addExtTab('Project Manager','tab_Project',"http://p");
}
}
]
},{
xtype: 'tbseparator'
},{
xtype: 'tbbutton',
text: 'Page',
menu: [
{
text: 'Frontend',
handler: function(){
application.addExtTab('IM Frontend','IMFrontend',"<?=$this->link('user','screen')?>");
}
},{
text: 'Homepage',
handler: function(){
application.addExtTab('Homepage','SpectwareHomePage',"http://www.");
}
},{
text: 'Customer Frontend',
handler: function(){
application.addExtTab('Customer Frontend','CustomerFrontend',"http://i");
}
},{
text: 'Subversion Frontend',
handler: function(){
application.addExtTab('Subversion Frontend','SubversionFrontend',"http://svn.spectware.net");
}
},{
text: 'developerBlog',
handler: function(){
application.addExtTab('developerBlog','developerBlog',"http://d");
}
}
]
},{
xtype: 'tbfill'
},{
xtype: 'tbbutton',
text: 'Logout',
handler: function(){
window.location = "<?=$this->link('login','logout')?>";
}
}
]
},{
region: 'west',
xtype: 'panel',
title: 'Company',
width: 175,
height: application.AvailableHeight,
split: true,
id: 'TreeSection',
collapsible: false,
listeners: {
afterlayout: application.treeReload,
resize: application.treeReload
}
},{
region: 'center',
xtype: 'tabpanel',
id: 'ContentSection',
enableTabScroll: true,
resizeTabs: true,
plugins: [
scrollerMenu
]
},{
region: 'south',
xtype: 'toolbar',
height: 26,
id: 'FooterSection',
items:[
{
xtype: 'tbtext',
width: 450,
text: 'News Ticker'
},
{
xtype: 'tbfill'
},
{
xtype: 'tbtext',
text: '<?=date("l, F jS, Y (\W\e\e\k: W)")?>'
},{
xtype: 'tbseparator'
},{
xtype: 'tbtext',
text: '',
id: 'ClockCenter'
}
]
}
],
renderTo: Ext.getBody()
});
}

application.runClock = function(){
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
//if(hours < 10){
// hours = "0" + hours;
//}
if(seconds < 10){
seconds = "0" + seconds;
}
minutes=((minutes < 10) ? "0" : "") + minutes;ampm = (hours >= 12) ? "PM" : "AM";hours=(hours > 12) ? hours-12 : hours;hours=(hours == 0) ? 12 : hours;if(hours < 10){hours = "0" + hours;
}
var clock = hours + ":" + minutes + ":" + seconds +" " + ampm;
if(clock != document.getElementById('ClockCenter').innerHTML) document.getElementById('ClockCenter').innerHTML = clock;
timer = setTimeout("application.runClock()",1000);
}
application.addTab = function(title,tabid,listener){
Ext.getCmp('CRMworkbench').findById('ContentSection').add(
{
title: title,
id: tabid,
height: application.AvailableHeight,
listeners: {
activate: listener
},
closable:true
}
).show();
}
application.addExtTab = function(title,tabid,src){
Ext.getCmp('CRMworkbench').findById('ContentSection').add(
{
title: title,
id: tabid,
height: application.AvailableHeight,
html: '<iframe src="' + src + '" width="100%" height="' + application.AvailableHeight + '" scrolling="auto"></iframe>',
closable:true
}
).show();
}
application.addTabs = function(config){
Ext.getCmp('CRMworkbench').findById('ContentSection').add(config).show();
}
application.addExTab = function(config,divID,divSec){
Ext.getCmp(divID).findById(divSec).add(config).show();
}
application.gridCreator = function(config,mode){
if(mode==true){
return new Ext.grid.EditorGridPanel(config);
}else{
return new Ext.grid.GridPanel(config);
}
}
application.dynamicStore = function (url,colums,id,root,init){
var store = new Ext.data.Store(
{
url: url,
reader: new Ext.data.JsonReader(
{
root: root,
id: id
},
colums
)
}
);
if(init == true){store.load();}return store;
}
application.store = function(data,columns,init){
var ldata = data;
var store = new Ext.data.ArrayStore(
{
fields: columns
});
if(init == true){store.loadData(ldata);}return store;
}
application.clicker = function(StrElementId){
var theight = application.AvailableHeight - 54;
pattern = StrElementId.split('---');
if(pattern[0] == 'user'){
crm.View(true,pattern[1]);
}else if(pattern[0]=='userpanel'){
crm.View(false,pattern[1]);
}
}
application.tree = function(){
application.Ltree = function(){
var Tree = Ext.tree;
return {init : function(){
var tree = new Tree.TreePanel(
{
animate:true,
autoScroll:true,
loader: new Tree.TreeLoader({
dataUrl:"<?=$this->link('system','core',array('sub'=>'core','main'=>'tree'))?>"
}),
containerScroll: true,
border: false,
height: application.AvailableHeight,
width: '100%',
listeners: {
click: function(n) {
application.clicker(n.attributes.id);
}
}
}
);
new Tree.TreeSorter(tree, {folderSort:true});
var root = new Tree.AsyncTreeNode(
{
text: 'Customer',
draggable:false,
id:'src'
}
);
tree.setRootNode(root);
tree.render('TreeSection');
root.expand(false, /*no anim*/ false);
tree.bodyFocus.fi.setFrameEl(tree.el);
tree.getSelectionModel().select(tree.getRootNode());
tree.enter.defer(100, tree);
}
};
}();
}
application.treeReload = function(){
application.resizer();
Ext.fly('TreeSection').update('', false);
application.Ltree.init();
}


Everythings works so far.
Also If I change the Templates to grey it works to.
But as soon as I open one of the menu's it looks like this:
23013
(The blueline on the bottom.
I'm using the original stylesheets.
My Own Stylesheet
<link rel="stylesheet" type="text/css" media="screen" href="<?=$this->link('system','fileStyle',array('style'=>'application'))?>" />
is not yet used (is empty)
I'm using extJS 3.3.
Is this an bug in this release?

If more Information is needed, please tell me.
^^

dragon001
31 Oct 2010, 5:28 PM
I tried a lot.
Rebuilt the Main Page
Removed all additional Stuff, but nothing helped.
Does any one else have problems with the drop down menu?

evant
31 Oct 2010, 5:48 PM
It's the ARIA stuff you're loading.

Animal
1 Nov 2010, 2:10 AM
On a performance note dragon, you should arrange to concatenate all those JS files into one file, and minify it when your application is released.

As you have it, it is good for testing purposes, but it won't be efficient if served to customers like that.