Hi,
I like this lightbox. I'm not verry familiar with extjs and just play a little bit around. Today I tried to open a lightbox and show a extjs.FormPanel. So far this works, but when i render my form inside of the lightbox I can't use any of the implemented buttons - no handler gets called. If i try to render the form to `document.body` all buttons work normal. Her is a little bit of my code:
In the HTML-code I do as in the Demo and place a hidden div:
HTML Code:
Motor editieren
I don't use a link to call the lightbox - It's opend by a menu
PHP Code:
function showLightbox(title, width, height){
Ext.ux.extbox.open(Ext.fly('inline'), 'inline', false, {
href: '#lightbox',
title: title,
inline: true,
scale: false,
animate: true,
width: width,
height: height,
close: '×',
hideInfo: 'auto'
});
};
render the form and show the lightbox:
PHP Code:
function editEngine(){
debug('Motor editieren', 'Formular rendern');
mdb.forms.editEngine = new Ext.FormPanel({
labelWidth: 75,
url: 'edit_engine_data',
frame: true,
title: 'Daten eingeben',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name',
allowBlank: false
}, {
fieldLabel: 'Bezeichnung',
name: 'description'
}, {
fieldLabel: 'Serialnummer',
name: 'serailNr'
}, {
fieldLabel: 'Leistung',
name: 'wattage'
}, {
fieldLabel: 'Spannung',
name: 'voltage'
}],
buttons: [{
text: 'Save',
handler: function(){console.log('saveButton')}
}, {
text: 'Cancel',
handler: function(){console.log('cancelButton')}
}]
});
mdb.forms.editEngine.addButton({
text: 'just close',
handler: function(){
Ext.ux.extbox.close();
}
})
mdb.forms.editEngine.render(Ext.fly('lightbox'));
showLightbox('Motor Editieren', 500, 350);
// mdb.forms.editEngine.render(document.body);
}
any idea what I am doing wrong?