that looks awesome.
But if you want add some individual style to the start button, you can do something like this 
desktop.htm
Code:
<div id="x-desktop">
<div style="padding:15px;"></div>
</div>
<div id="x-windows">
<!-- this div contains the start menu -->
<div id="x-toolbar" style="float:left;"></div>
<div id="x-winlist" style="float:left;">
<div id="spacer"></div>
</div>
<div class="x-clear"></div>
</div>
desktop.css
Code:
/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/
html, body {
font: normal 12px tahoma, arial, verdana, sans-serif;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
img {
behavior: url("css/pngbehavior.htc");
}
#x-desktop {
width: 100%;
height: 100%;
border: 0 none;
position: relative;
overflow:hidden;
zoom: 1;
}
#x-windows .x-toolbar {
border: 0 none;
background: 0 none;
width: 70px;
padding-right: 5px;
margin-right: 3px;
border-right: 1px solid #3A75BD;
}
#x-winlist .x-btn {
float: left;
margin: 2px 0 0 2px;
position:relative;
}
#x-winlist button {
width: 150px;
overflow: hidden;
text-align: left;
color: #15428b;
}
#x-windows {
border-top: 1px solid #3A75BD;
background-color: #D5E2F2;
padding-top: 2px;
height: 26px;
position:relative;
z-index:12001;
}
#x-info {
float:right;
}
#x-winlist .x-btn-left{
background:url(../images/winbar-btn.gif) no-repeat 0 -189px;
}
#x-winlist .x-btn-right{
background:url(../images/winbar-btn.gif) no-repeat 0 -210px;
}
#x-winlist .x-btn-center{
background:url(../images/winbar-btn.gif) repeat-x 0 -231px;
}
#x-winlist .x-btn-over .x-btn-left{
background:url(../images/winbar-btn.gif) no-repeat 0 0;
}
#x-winlist .x-btn-over .x-btn-right{
background:url(../images/winbar-btn.gif) no-repeat 0 -21px;
}
#x-winlist .x-btn-over .x-btn-center{
background:url(../images/winbar-btn.gif) repeat-x 0 -42px;
}
#x-winlist .x-btn-click .x-btn-left{
background:url(../images/winbar-btn.gif) no-repeat 0 -63px;
}
#x-winlist .x-btn-click .x-btn-right{
background:url(../images/winbar-btn.gif) no-repeat 0 -84px;
}
#x-winlist .x-btn-click .x-btn-center{
background:url(../images/winbar-btn.gif) repeat-x 0 -105px;
}
#x-winlist .active-win .x-btn-left{
background:url(../images/winbar-btn.gif) no-repeat 0 -126px;
}
#x-winlist .active-win .x-btn-right{
background:url(../images/winbar-btn.gif) no-repeat 0 -147px;
}
#x-winlist .active-win .x-btn-center{
background:url(../images/winbar-btn.gif) repeat-x 0 -168px;
}
#x-winlist .active-win .x-btn-center button {
color:#fff;
}
#spacer {
height: 25px;
float: left;
width: 0;
overflow: hidden;
margin-top: 2px;
}
.x-window-body p,.x-panel-body p {
padding: 10px;
margin: 0;
}
.x-window-body {
background:#fff;
}
.add {
background-image:url(../shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(../shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(../shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(../shared/icons/save.gif) !important;
}
And maybe this small snippet could interest you. With this you could submit your form by pressing the enter Button in a Form Field
Code:
function sendForm(e) {
if(e.getKey() == e.ENTER){
login.getForm().submit({
waitMsg:'Überprüfe Daten...',
// callback handler if submit has successed
success: doLogin,
// callback handler if submit has failed
failure: function() {
Ext.MessageBox.alert('Fehler', 'Ihre Login-Daten sind Fehlerhaft');
}
});
}
}
Ext.get('loginFormUserField').on('keydown', sendForm);/**/
Ext.get('loginFormPassField').on('keydown', sendForm);/**/
Ext.get('loginFormUserField').focus();
Start Menu for 2.0 Desktop
The quick start panel is now working correctly in all the browsers I have. The bug in Opera and Safari was a simple CSS error on my part.
Originally Posted by cluettr
