1. 22 May 2010 12:13 PM #1
    mschlanser
    mschlanser is offline
    Ext User
    Join Date
    May 2010
    Posts
    7
    Vote Rating
    0
    mschlanser is on a distinguished road
      0  

    Exclamation GXT webdesktop - no background image

    GXT webdesktop - no background image


    I copied the sample code ( .java file ) and put the appropriate div tags in the HTML and it still isn't working correctly. The only thing that appears is the taskbar at the bottom, but no background image or desktop icons.

    Any help is appreciated!!!

    Thanks,
    Mike
    Reply With Quote Reply With Quote
  2. 17 Aug 2010 6:51 AM #2
    tortexy
    tortexy is offline
    Sencha User
    Join Date
    Jul 2009
    Posts
    37
    Vote Rating
    0
    tortexy is on a distinguished road
      0  

    Default


    Hi Mike!

    Perhaps you did not copy everything.
    Don't forget to put the css of the "desktop" into your html.

    Zoltan
    Reply With Quote Reply With Quote
  3. 20 Aug 2010 4:05 AM #3
    user100
    user100 is offline
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    user100 is on a distinguished road
      0  

    Default


    Same with me - no background image on the Desktop. It actually appears, but only for a part of a second during page load. I also noticed that the DOM structure differs from the compiled example (which works fine), so I think there is a bug.
    Reply With Quote Reply With Quote
  4. 20 Aug 2010 4:07 AM #4
    sven
    sven is offline
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,712
    Vote Rating
    107
    sven is just really nice sven is just really nice sven is just really nice sven is just really nice
      0  

    Default


    If you think there is a bug, than please post a fully workingtestcase that implements EntryPoint and shows your problem. You should also add the html file here.
    Reply With Quote Reply With Quote
  5. 20 Aug 2010 4:13 AM #5
    tortexy
    tortexy is offline
    Sencha User
    Join Date
    Jul 2009
    Posts
    37
    Vote Rating
    0
    tortexy is on a distinguished road
      0  

    Default


    Hi Folks!

    I don't think that there is a bug in gxt.
    Perhaps your source has some bug.
    I am using the desktop app sample and it works fine for me: it has the background picture, etc.

    Please post it.

    z.
    Reply With Quote Reply With Quote
  6. 20 Aug 2010 4:15 AM #6
    user100
    user100 is offline
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    user100 is on a distinguished road
      0  

    Default


    OK, I'll try to find the project later and post it here (I tested it few weeks ago)
    Reply With Quote Reply With Quote
  7. 14 Mar 2012 11:40 PM #7
    |ZUTI|
    |ZUTI| is offline
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    24
    Vote Rating
    0
    |ZUTI| is on a distinguished road
      0  

    Default


    Old topic, still, I have the same problem with desktop background... and here is the code:

    - html file
    Code:
    <!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <!--                                                               -->
        <!-- Consider inlining CSS to reduce the number of requested files -->
        <!--                                                               -->
        <link type="text/css" rel="stylesheet" href="ExtGWT/css/gxt-all.css">
        <link type="text/css" rel="stylesheet" href="WebDesktopMain.css">
    
        <!--                                           -->
        <!-- Any title is fine                         -->
        <!--                                           -->
        <title>Wrapper HTML for WebDesktopMain</title>

        <!--                                           -->
        <!-- This script loads your compiled module.   -->
        <!-- If you add any GWT meta tags, they must   -->
        <!-- be added before this line.                -->
        <!--                                           -->
        <script language="javascript" src="com.mycompany.project.WebDesktopMain/com.mycompany.project.WebDesktopMain.nocache.js"></script>
        
    </head>

    <!--                                           -->
    <!-- The body can have arbitrary html, or      -->
    <!-- we leave the body empty because we want   -->
    <!-- to create a completely dynamic ui         -->
    <!--                                           -->
    <body>

        <!-- OPTIONAL: include this if you want history support -->
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

    </body>
</html>
    - css file
    Code:
    /*
 * Ext GWT 2.2.5 - Ext for GWT
 * Copyright(c) 2007-2010, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
/*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
html,body {
  background: #3d71b8 url(wallpapers/desktop.jpg) no-repeat left top;
  font: normal 12px tahoma, arial, verdana, sans-serif;
  margin: 0;
  padding: 0;
  border: 0 none;
  overflow: hidden;
  height: 100%;
}

.start {
  background-image: url( ../images/taskbar/black/startbutton-icon.gif ) !important;
}

.bogus {
  background-image: url( ../images/bogus.png ) !important;
}

.logout {
  background-image: url( ../images/logout.gif ) !important;
}

.settings {
  background-image: url( ../images/gears.gif ) !important;
}

#dpanels {
  width: 250px;
  float: right;
}

#dpanels .x-panel {
  margin: 15px;
}

#dpanels .x-date-picker {
  border: 0 none;
  border-top: 0 none;
  background: transparent;
}

#dpanels .x-date-picker td.x-date-active {
  background: #ffffff;
}

#dpanels .x-date-picker {
  width: 100% !important;
}

#x-desktop {
  width: 100%;
  height: 100%;
  border: 0 none;
  position: relative;
  overflow: hidden;
  zoom: 1;
}

#ux-taskbar .x-btn {
  float: left;
  margin: 1px 0 0 1px;
  position: relative;
}

#ux-taskbar-start .x-btn {
  float: left;
  margin: 0;
  position: relative;
}

#ux-taskbar button { /* width: 150px;
    overflow: hidden; */
  text-align: left;
  color: #ffffff;
}

#title-bar-wrapper {
  height: 35px;
}

#title-bar {
  color: #225599;
  padding: 9px 7px;
  font: bold 16px tahoma, arial, verdana, sans-serif;
  float: left;
}

#x-logout {
  float: right;
  padding: 6px 7px;
}

.x-btn-text-icon .x-btn-center .logout {
  background-position: 0pt 3px;
  background-repeat: no-repeat;
  padding: 3px 0pt 3px 18px;
}

#ux-taskbar {
  background: transparent none;
  height: 30px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 12001;
}

.x-btn-icon .ux-taskbutton-center .x-btn-text {
  background-position: center;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
}

.x-btn-icon .ux-taskbutton-center {
  padding: 1px;
}

.ux-startbutton-center .x-btn-text {
  color: #000000 !important;
  font-weight: bold;
}

.ux-taskbutton-left,.ux-taskbutton-right {
  font-size: 1px;
  line-height: 1px;
}

.ux-taskbutton-left {
  width: 4px;
  height: 28px;
  background: url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 0;
}

.ux-taskbutton-right {
  width: 4px;
  height: 28px;
  background: url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -28px;
}

.ux-taskbutton-left i,.ux-taskbutton-right i {
  display: block;
  width: 4px;
  overflow: hidden;
  font-size: 1px;
  line-height: 1px;
}

.ux-taskbutton-center {
  background: url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -56px;
  vertical-align: middle;
  text-align: center;
  padding: 0 5px;
  cursor: pointer;
  white-space: nowrap;
}

#ux-taskbar .ux-taskbutton-left {
  background-position: 0 0;
}

#ux-taskbar .ux-taskbutton-right {
  background-position: 0 -28px;
}

#ux-taskbar .ux-taskbutton-center {
  background-position: 0 -56px;
}

#ux-taskbar .x-btn-over .ux-taskbutton-left {
  background-position: 0 -252px;
}

#ux-taskbar .x-btn-over  .ux-taskbutton-right {
  background-position: 0 -280px;
}

#ux-taskbar .x-btn-over .ux-taskbutton-center {
  background-position: 0 -308px;
}

#ux-taskbar .x-btn-click .ux-taskbutton-left {
  background-position: 0 -168px;
}

#ux-taskbar .x-btn-click  .ux-taskbutton-right {
  background-position: 0 -196px;
}

#ux-taskbar .x-btn-click .ux-taskbutton-center {
  background-position: 0 -224px;
}

#ux-taskbar .active-win .ux-taskbutton-left {
  background-position: 0 -84px;
}

#ux-taskbar .active-win  .ux-taskbutton-right {
  background: url( ../images/taskbar/black/taskbutton.gif ) no-repeat 0 -112px;
}

#ux-taskbar .active-win .ux-taskbutton-center {
  background: url( ../images/taskbar/black/taskbutton.gif ) repeat-x 0 -140px;
}

#ux-taskbar .active-win .ux-taskbutton-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-maximized .x-window-bc {
  height: 0;
}

.add {
  background-image: url(../images/add.gif) !important;
}

.option {
  background-image: url(../images/plugin.gif) !important;
}

.remove {
  background-image: url(../images/delete.gif) !important;
}

.tabs {
  background-image: url(../images/tabs.gif) !important;
}

.ux-start-menu {
  background: transparent none;
  border: 0px none;
  padding: 0;
}

.ux-start-menu-tl .x-window-header {
  color: #f1f1f1;
  font: bold 11px tahoma, arial, verdana, sans-serif;
  padding: 5px 0 4px 0;
}

.x-panel-tl .x-panel-icon,.ux-start-menu-tl .x-panel-icon {
  background-position: 0pt 4px;
  background-repeat: no-repeat;
  padding-left: 20px !important;
}

.ux-start-menu-tl {
  background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0 0;
  padding-left: 6px;
  zoom: 1;
  z-index: 1;
  position: relative;
}

.ux-start-menu-tr {
  background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right
    0;
  padding-right: 6px;
}

.ux-start-menu-tc {
  background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 0;
  overflow: hidden;
  zoom: 1;
}

.ux-start-menu-ml {
  background: transparent url( ../images/taskbar/black/start-menu-left-right.png ) repeat-y 0 0;
  padding-left: 6px;
  zoom: 1;
}

.ux-start-menu-bc {
  background: transparent url( ../images/taskbar/black/start-menu-top-bottom.png ) repeat-x 0 bottom;
  zoom: 1;
}

.ux-start-menu-bc .x-window-footer {
  padding-bottom: 6px;
  zoom: 1;
  font-size: 0;
  line-height: 0;
}

.ux-start-menu-bl {
  background: transparent url( ../images/taskbar/black/start-menu-left-corners.png ) no-repeat 0
    bottom;
  padding-left: 6px;
  zoom: 1;
}

.ux-start-menu-br {
  background: transparent url( ../images/taskbar/black/start-menu-right-corners.png ) no-repeat right
    bottom;
  padding-right: 6px;
  zoom: 1;
}

.x-panel-nofooter .ux-start-menu-bc {
  height: 6px;
}

.ux-start-menu-splitbar-h {
  background-color: #d0d0d0;
}

.ux-start-menu-bwrap {
  background: transparent none;
  border: 0px none;
}

.ux-start-menu-body {
  background: transparent none;
  border: 0px none;
}

.ux-start-menu-apps-panel {
  background: #ffffff none;
  border: 1px solid #1e2124;
}

.ux-start-menu-tools-panel {
  border: 0px none;
  background: transparent url( ../images/taskbar/black/start-menu-right.png ) repeat-y scroll right
    0pt;
}

#ux-taskbar-start {
  background: #000000 url( ../images/taskbar/black/taskbar-start-panel-bg.gif ) repeat-x left top;
  left: 0px;
  padding: 0;
  position: absolute;
}

#ux-taskbar-start .x-toolbar {
  background: none;
  padding: 0px;
  border: 0px none;
}

#ux-taskbuttons-panel {
  background: #000000 url( ../images/taskbar/black/taskbuttons-panel-bg.gif ) repeat-x left top;
  padding-top: 0;
  position: relative;
}

.ux-taskbuttons-strip-wrap { /* overflow:hidden;
    position:relative;
    width:100%; */
  width: 100%;
  overflow: hidden;
  position: relative;
  zoom: 1;
}

ul.ux-taskbuttons-strip {
  display: block;
  width: 5000px;
  zoom: 1;
}

ul.ux-taskbuttons-strip li {
  float: left;
  margin-left: 2px;
}

ul.ux-taskbuttons-strip li.ux-taskbuttons-edge {
  float: left;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  font-size: 1px !important;
  line-height: 1px !important;
  overflow: hidden;
  zoom: 1;
  background: transparent !important;
  width: 1px;
}

.x-clear {
  clear: both;
  height: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

.x-taskbuttons-scrolling {
  position: relative;
}

.x-taskbuttons-scrolling .ux-taskbuttons-strip-wrap {
  margin-left: 18px;
  margin-right: 18px;
}

td.ux-taskButtons-edge { /*float:left;*/
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  font-size: 1px !important;
  line-height: 1px !important;
  overflow: hidden;
  zoom: 1;
  background: transparent !important;
  width: 1px;
}

.ux-taskbuttons-scroller-left {
  background: transparent url( ../images/taskbar/black/scroll-left.gif ) no-repeat -18px 0;
  width: 18px;
  position: absolute;
  left: 1px;
  top: 0px;
  z-index: 10;
  cursor: pointer;
}

.ux-taskbuttons-scroller-left-over {
  background-position: 0 0;
}

.ux-taskbuttons-scroller-left-disabled {
  background-position: -18px 0;
  opacity: .5;
  -moz-opacity: .5;
  filter: alpha(opacity =   50);
  cursor: default;
}

.ux-taskbuttons-scroller-right {
  background: transparent url( ../images/taskbar/black/scroll-right.gif ) no-repeat 0 0;
  width: 18px;
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 10;
  cursor: pointer;
}

.ux-taskbuttons-scroller-right-over {
  background-position: -18px 0;
}

.ux-taskbuttons-scroller-right-disabled {
  background-position: 0 0;
  opacity: .5;
  -moz-opacity: .5;
  filter: alpha(opacity =   50);
  cursor: default;
}

.ux-toolmenu-sep {
  background-color: #18191a;
  border-bottom: 1px solid #858789;
  display: block;
  font-size: 1px;
  line-height: 1px;
  margin: 2px 3px;
}

.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item a.x-menu-item {
  color: #ffffff;
}

.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item .x-menu-item-active a.x-menu-item {
  color: #000000;
}

.ux-start-menu-tools-panel .x-menu-item-active {
  background: #525456 url( ../images/taskbar/black/item-over.gif ) repeat-x left bottom;
  border: 1px solid #000000;
  padding: 0;
}

#ux-taskbar .x-splitbar-h {
  background: #000000 url( ../images/taskbar/black/taskbar-split-h.gif ) no-repeat 0 0;
  width: 8px;
}

.x-window-header-text {
  cursor: default;
}

/*
 * Begin Start button
 */
.ux-startbutton-left,.ux-startbutton-right {
  font-size: 1px;
  line-height: 1px;
}

.ux-startbutton-left {
  width: 10px;
  height: 28px;
  background: url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 0;
}

.ux-startbutton-right {
  width: 10px;
  height: 30px;
  background: url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -28px;
}

.ux-startbutton-left i,.ux-startbutton-right i {
  display: block;
  width: 10px;
  overflow: hidden;
  font-size: 1px;
  line-height: 1px;
}

.ux-startbutton-center {
  background: url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -56px;
  vertical-align: middle;
  text-align: center;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

#ux-taskbar .ux-startbutton-left {
  background-position: 0 0;
}

#ux-taskbar .ux-startbutton-right {
  background-position: 0 -30px;
}

#ux-taskbar .ux-startbutton-center {
  background-position: 0 -60px;
}

#ux-taskbar .x-btn-over .ux-startbutton-left {
  background-position: 0 -270px;
}

#ux-taskbar .x-btn-over  .ux-startbutton-right {
  background-position: 0 -300px;
}

#ux-taskbar .x-btn-over .ux-startbutton-center {
  background-position: 0 -330px;
}

#ux-taskbar .x-btn-click .ux-startbutton-left {
  background-position: 0 -180px;
}

#ux-taskbar .x-btn-click  .ux-startbutton-right {
  background-position: 0 -210px;
}

#ux-taskbar .x-btn-click .ux-startbutton-center {
  background-position: 0 -240px;
}

#ux-taskbar .active-win .ux-startbutton-left {
  background-position: 0 -90px;
}

#ux-taskbar .active-win  .ux-startbutton-right {
  background: url( ../images/taskbar/black/startbutton.gif ) no-repeat 0 -120px;
}

#ux-taskbar .active-win .ux-startbutton-center {
  background: url( ../images/taskbar/black/startbutton.gif ) repeat-x 0 -150px;
}

#ux-taskbar .active-win .ux-startbutton-center button {
  color: #fff;
}

/*
 * End Start button
 */
.x-resizable-proxy {
  background: #C7DFFC;
  opacity: .5;
  -moz-opacity: .5;
  filter: alpha(opacity =   50);
  border: 1px solid #3b5a82;
}

/* Desktop Shortcuts */
#x-shortcuts dt {
  float: left;
  margin: 15px 0 0 15px;
  clear: left;
  width: 64px;
  font: normal 10px tahoma, arial, verdana, sans-serif;
  text-align: center;
  zoom: 1;
  display: block;
}

#x-shortcuts dt a {
  width: 64px;
  display: block;
  color: white;
  text-decoration: none;
}

#x-shortcuts dt div {
  width: 100%;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

#x-shortcuts dt a:hover {
  text-decoration: underline;
}
    - java file
    Code:
    /*******************************************************************************
 * Copyright 2011 Google Inc. All Rights Reserved.
 *
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *******************************************************************************/
package com.mycompany.project.client;

import com.extjs.gxt.desktop.client.Desktop;
import com.extjs.gxt.desktop.client.StartMenu;
import com.extjs.gxt.desktop.client.TaskBar;
import com.extjs.gxt.ui.client.event.MenuEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.menu.MenuItem;
import com.google.gwt.core.client.EntryPoint;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class WebDesktopMain implements EntryPoint {
    private Desktop desktop = new Desktop();

    public void onModuleLoad() {

        TaskBar taskBar = desktop.getTaskBar();

        StartMenu menu = taskBar.getStartMenu();
        menu.setHeading("Darrell Meyer");
        menu.setIconStyle("user");
        // tools
        MenuItem tool = new MenuItem("Settings");
        tool.setIcon(IconHelper.createStyle("settings"));
        tool.addSelectionListener(new SelectionListener<MenuEvent>() {
            @Override
            public void componentSelected(MenuEvent ce) {
                Info.display("Event", "The 'Settings' tool was clicked");
            }
        });
        menu.addTool(tool);

        menu.addToolSeperator();

        tool = new MenuItem("Logout");
        tool.setIcon(IconHelper.createStyle("logout"));
        tool.addSelectionListener(new SelectionListener<MenuEvent>() {
            @Override
            public void componentSelected(MenuEvent ce) {
                Info.display("Event", "The 'Logout' tool was clicked");
            }
        });
        menu.addTool(tool);
    }
}
    - gwt.xml file
    Code:
    <module>
    <inherits name="com.google.gwt.user.User"/>
    <inherits name="com.google.gwt.user.theme.standard.Standard"/>
    <inherits name="com.extjs.gxt.ui.GXT"/>
    <inherits name='com.extjs.gxt.desktop.WebDesktop' />
    <entry-point class="com.mycompany.project.client.WebDesktopMain"/>
</module>
    So, what have I missed/did wrong that background is not showing?

    Thanks
    Reply With Quote Reply With Quote

Similar Threads

  1. Panel with image as background
    By waken in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 8 Apr 2010, 2:26 AM
  2. background image
    By tomalex0 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Jan 2010, 11:00 PM
  3. Background image
    By akirillov in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 4 Dec 2009, 4:31 AM
  4. how to put a background image or change the background color of a login form?
    By kcireneg in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 12 Apr 2009, 5:52 PM
  5. background Image position
    By dima_toxsoft in forum Community Discussion
    Replies: 6
    Last Post: 12 Feb 2009, 7:44 AM

Tags for this Thread