1. #1
    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

  2. #2
    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

  3. #3
    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.

  4. #4
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,966
    Vote Rating
    130
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      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.

  5. #5
    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.

  6. #6
    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)

  7. #7
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    24
    Vote Rating
    1
    |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

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. 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

Thread Participants: 4

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar