NAVIGATION -  HOME |  | |
| [SOLVED] Extended form in window => Shadow problem | | Published by: mike 2009-01-09 |
Moon-Face & Other Stories:The Shadow and the Flash::
In the end she solved the problem in her own way, to everybodys satisfaction till I extended it under the skylight and saw its shadow plainly blotted on
http://london.sonoma.edu/Writings/MoonFace/shadowflash.htmlHOME |
I have taken the form field extension code from someone on this forum for showing a small questionmark image with tooltip near the field label, the code is:
Ext.override(Ext.form.Field, {
Dr. Dobbs | Rapid Prototyping with SWIG | November 1, 1998::
Any programming problem can be solved by adding another layer of indirection, or to a class regardless of what is in the C++ declaration, allowing easy extension.
http://www.ddj.com/cpp/184403568HOME |
afterRender : function() {
if(this.helpText){
var label = findLabel(this);
if(label)
{
var helpImage = label.createChild({
tag: 'img',
src: '/images/global/questionmark.gif',
style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;'
});
Ext.QuickTips.register({
target: helpImage,
title: '',
text: this.helpText,
enabled: true
});
}
}
Ext.form.Field.superclass.afterRender.call(this);
this.initEvents();
}
});
var findLabel = function(field) {
var wrapDiv = null;
var label = null
//find form-item and label
Postfix-Cyrus-Web-cyradm-HOWTO::
NEVER put your address in a web-form or put it on your website. the background information as well as show you how to solve a specific problem.
http://www.ibiblio.org/pub/Linux/docs/HOWTO/other-formats/rus-Web-cyradm-HOWTO.htmlHOME |
wrapDiv = field.getEl().up('div.x-form-item');
if(wrapDiv)
{
label = wrapDiv.child('label');
}
if(label) {
return label;
}
}
Now I build a form with fields with helpText config set, then I put the form into a window with:
FormMessageBox = function(element, options)
{
dlg = new Ext.Window({
autoCreate : true,
title: options.title,
draggable: true,
resizable: options.resizable ? options.resizable : false,
constrain:true,
constrainHeader:true,
minimizable : false,
maximizable : false,
modal: true,
shim:true,
buttonAlign:"center",
width:element.width 400,
plain:true,
maskDisabled: false,
footer:true,
closable:true
});
this.window = dlg;
this.element = element;
this.window.add(element);
if (options.createButton)
{
this.window.addButton("Create", function(){ FormMessageBox.thisCallbackFunction(element, dlg, 0)});
}
if (options.updateButton)
{
this.window.addButton("Update", function(){ FormMessageBox.thisCallbackFunction(element, dlg, 1)});
}
if (options.okButton)
{
this.window.addButton("OK", function(){ FormMessageBox.thisCallbackFunction(element, dlg, 0)});
}
if (options.cancelButton)
{
this.window.addButton("Cancel", function(){ dlg.hide() } );
}
this.window.show();
}
FormMessageBox.thisCallbackFunction = function(element, window, isUpdate)
{
if (element && element.callback)
{
element.callback(element, window, isUpdate);
}
}
The window appears, but now the shadow is to high for the window. I have tried using syncShadow, syncSize, doLayout on the window on "render", but nothing works.
But: when I drag the window, the shadow gets recalculated and is correct "afterDrag".
Any ideas?
Thank you in advance for any help!
I have fixed the problem now, I had to specify the image width and height in the form extension. This fixed the high shadow.
var helpImage = label.createChild({
tag: 'img',
src: '/images/global/questionmark.gif',
style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;',
width: 10,
height: 11
});
 Where's The Advantage In Windows Genuine Advantage?
 Stocks Bounce After S&P Joins Bear Market |
#If you have any other info about this subject , Please add it free.# | |
|
PRINT
Add to favorites