[CLOSED] [1.0] ext window control and styles

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] [1.0] ext window control and styles

    I am having a difficult time forcing my styles on a control I've created which inherits from ext.net.window.
    The screenshots show where I'm at, and the 2 main issues, and also a screenshot of the look I am trying to acheive.

    The two issues both seem to involve how ext handles the resize of the window, and it's shadow. The width of x-window-body and the display attrib of x-shadow are at the element level and are reset with each resize.

    I need either x-window-body to be smaller than it is, or I need to position my borders farther out. I also do not need the x-shadow in this situation because the semi-transparent images I use for the borders already have simulated shadows.

    I have done all my manipulation using window.css as my template and am overriding the values that affect the changes I am looking for. Here are most of the relevant classes I've been working with:
    .x-window-tc {
        background-image:url("/UI/window1/divPopUp/topBorderDrag.png");    
        background-repeat:repeat-x;
    }
     
    .x-window-tl {
        background-image:url("/UI/window1/divPopUp/cornerLeftDrag.png");    
        background-repeat:no-repeat;
        padding-left:12px;
    }
     
    .x-window-tr {
        background-image:url("/UI/window1/divPopUp/cornerRightDrag.png");
        background-repeat:no-repeat;
        padding-right:19px;
    }
     
    .x-window-bc {
        background-image:url("/UI/window1/divPopUp/bottomBorder.png");
        background-repeat:repeat-x;    
    }
     
    .x-window-bc .x-window-footer {    
        margin-left:12px;
        margin-right:19px;
    }
     
    .x-window-bl {    
        background-image:url("/UI/window1/divPopUp/cornerBottomLeft.png");    
        background-repeat:no-repeat;
        padding-left:12px;
    }
     
    .x-window-br {
        background-image:url("/UI/window1/divPopUp/cornerBottomRight.png");    
        background-repeat:no-repeat;
        padding-right:19px;
    }
     
    .x-window-mc {
        background-color: transparent;    
        padding:0;
        margin:0;
    }
     
    .x-window-ml {
        background-image:url("/UI/window1/divPopUp/leftBorder.png");    
        background-repeat:repeat-y;
        padding-left:12px;
    }
     
    .x-window-mr {
        background-image:url("/UI/window1/divPopUp/rightBorder.png");    
        background-repeat:repeat-y;
        padding-right:0px;
    }
     
    .x-window-body {
        background-image:none;
        background-color:#FFFFFF;
        background-repeat:repeat-x;
        overflow:hidden;
    }
    .x-panel-nofooter .x-panel-bc, .x-panel-nofooter .x-window-bc {
     
        height:6px;
        padding-top:13px;
    }
     
    .x-window .x-shadow{
        display:none;
    }
     
    .x-window .x-tool{
        background-image:none;
        height:0px;
    }.ext-el-mask {
        background-color:#FFFFFF;
        opacity:.4;
    }
    The padding accounts for the differfence in my image widths versus ext.

    The attachment limits you have make the notes fairly hard to read, but I hope you get the general idea from the description above.

    One other issue mentioned in the screenshot is how to get a custom-button-ribbon control added programatically inside the window to act as a footer and posotion itself on the baseline. I cannot get a lock on the control because the id is not consistent when rendered.
    Attached Thumbnails Click image for larger version. 

Name:	EXTwindow-ss (Custom).jpg 
Views:	394 
Size:	14.8 KB 
ID:	1378   Click image for larger version. 

Name:	end-result-ss (Custom).jpg 
Views:	359 
Size:	16.1 KB 
ID:	1379  
    Last edited by geoffrey.mcgill; Jul 26, 2010 at 6:58 AM.
  2. #2
    Hi,

    Maybe post a larger image to http://imgur.com/ and paste links in a reply.

    I'll look into bumping up the image file size limits on the forum.
    Geoffrey McGill
    Founder
  3. #3
    My current screen shot can be seen at http://imgur.com/dLNuA.jpg

    And the desired look can be seen here: http://imgur.com/dipGi.jpg
  4. #4
    Hi,

    Can youn provide those custom images which you use? Also can you provide the code which you demontrates how do you add that ribbon to the window?

    I will try to play with you styles to accomplish desired look
  5. #5
    I have created a zip with the window class, buttonribbon class and images folder. The window class inherits from Ext.Net.window. The window class instantiates an instance of the buttonribbin class and adds the buttonribbon as a control. I have also included the windowstyle1.css I have used to override the Ext window.css.

    There are also something similar to your x-resizable-handle images (dragbar.gif and resize.gif) that show in the "desired look" image. The way I have my css set up now, they are behind the other images, regardless of how I set their z-index. They would need to be on top, as they are in Ext.

    The help is greatly appreciated.
    Attached Files
  6. #6
    Hi,

    1. To disable the shadow please set Shadow="None" (in the codebehid, this.Shadow = ShadowMode.None)
    2. You did not provide right border image therefore i used rightBorder_IE6.gif image
    3. For your riboon need to set absolute position with bottom:22px and right:22px

    I made some modifications in the css file

    Please see atachment
    Attached Files
  7. #7
    Thanks for taking the time to look at that. Your suggestions got me much closer. After hammering on it for most of the day, I feel like I have gotten it as close as I can to the project specs... except for the drag and resize handles, and "body" header. I will be looking at those next week and may need a little more assistance.

    Thanks
  8. #8

    modify x-panel-ghost

    I need, at the least, to strip the ghost window, that appears when dragging my window, down to just a semi-transparent box with no header and no buttons. It would be desirable to be able to change the background-color of the ghost window to match my theme.

    I would like to know, as well, if the use of the ghost window can be prevented all together during the drag event.
  9. #9
    Hi,

    What about the following sample?
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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">
    <head id="Head1" runat="server">
        <title></title>
        
        <script type="text/javascript">
            function myGhost(){
                return this.el;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            
            <ext:Window runat="server" Ghost="={myGhost}">            
            </ext:Window>
        </form>
    </body>
    </html>
  10. #10
    Hi,

    Also you can easly invetigate ghost structure after calling the following js code
    Window1.ghost();
    After this you can use FireBug (or IE8 console) to investigate ghost html code (it is very simple)
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Feb 06, 2012, 9:06 AM
  2. [CLOSED] [1.0] Window/Component Styles
    By GavinR in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 24, 2010, 2:38 PM
  3. Replies: 4
    Last Post: Feb 23, 2010, 7:38 AM
  4. Replies: 0
    Last Post: Nov 19, 2009, 11:50 AM
  5. Replies: 3
    Last Post: Feb 03, 2009, 5:57 PM

Posting Permissions