Jul 14, 2010, 8:40 PM
[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:
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.
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.
Last edited by geoffrey.mcgill; Jul 26, 2010 at 6:58 AM.