gilaras
12 Apr 2012, 10:26 PM
Hi there,
I developed a little webapp for a friend of mine. Worked really fine, when I used is "standalone", i.e. when I wasn't trying to let it render into a website.
Now I wanted to implement the app into his website and ... well, it doesn't render anything. So I tried a whole lot of things, without any success. I even changed the website itself, so that it just contains one single <div> with the id i want to use (and I tried using Ext.container.Viewport, but that brought no success, too :().
Sometimes I get the following error:
Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
I tried debugging, but I couldn't find anything that seemed wrong to me until the error was thrown ...
So i guess there must be something wrong about my code, but I can't find anything wrong there either ... maybe someone here can? :-) Would really appreciate that! :-)
Here's the code:
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.tab.*', 'Ext.window.*', 'Ext.ux.*', 'Ext.container.Viewport']);
Ext.application({
name: 'Onlineangebot',
launch: function () {
Ext.Loader.setConfig({enabled:true});
var anredeCombo = {
xtype: 'combo',
mode: 'local',
emptyText: ' ',
forceSelection: 'true',
fieldLabel: 'Anrede',
editable: 'false',
name: 'anrede',
id: 'anrede',
displayField: 'display',
valueField: 'value',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['display', 'value'],
data: [{
'display': 'Herr',
'value': 'm'
}, {
'display': 'Frau',
'value': 'w'
}]
})
};
var plzFeld = {
xtype: 'textfield',
fieldLabel: 'PLZ',
name: 'plz',
margin: '2 10 1 1',
regex: '\d+',
regexText: 'Bitte eine 5-stellige Zahl eingeben...',
validateOnChange: true
};
var vornameFeld = {
xtype: 'textfield',
fieldLabel: 'Vorname',
name: 'vorname',
margin: '2 10 1 1'
};
var ortFeld = {
xtype: 'textfield',
fieldLabel: 'Ort',
name: 'ort',
margin: '2 10 1 1'
};
var nachnameFeld = {
xtype: 'textfield',
fieldLabel: 'Nachname',
name: 'nachname',
margin: '2 10 1 1'
};
var telefonFeld = {
xtype: 'textfield',
fieldLabel: 'Telefon',
name: 'tel',
margin: '2 10 1 1'
};
var adresseFeld = {
xtype: 'textfield',
fieldLabel: 'Adresse',
name: 'adresse',
margin: '2 10 1 1'
};
var emailFeld = {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
margin: '2 10 1 1'
};
var bildEins = {
border: false,
id: 'bildEins',
xtype: 'image',
src: '/images/Gable_roof.jpg'
};
var bildZwei = {
border: false,
id: 'bildZwei',
xtype: 'image',
src: '/images/Single_sloped_roof.jpg'
};
var bildDrei = {
border: false,
id: 'bildDrei',
xtype: 'image',
src: '/images/Flat_roof.jpg'
};
var bildVier = {
border: false,
id: 'bildVier',
xtype: 'image',
src: '/images/Hip_roof.jpg'
};
var bildFuenf = {
border: false,
id: 'bildFuenf',
xtype: 'image',
src: '/images/Sawtooth_roof.jpg'
};
// var bildSechs = {
// border: false,
// id: 'bildSechs',
// xtype: 'image',
// src: '/images/sechs.png'
// };
var radioEins = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '1',
id: 'radioEins'
};
var radioZwei = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '2',
id: 'radioZwei'
};
var radioDrei = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '3',
id: 'radioDrei'
};
var radioVier = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '4',
id: 'radioVier'
};
var radioFuenf = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '5',
id: 'radioFuenf'
};
// var radioSechs = {
// xtype: 'radiofield',
// name: 'dachForm',
// inputValue: '6',
// id: 'radioSechs'
// };
var dachFormPanel = {
title: 'Dachform',
xtype: 'panel',
height: 260,
layout: {
type: 'table',
columns: 5
},
items: [
bildEins, bildZwei, bildDrei, bildVier, bildFuenf, radioEins, radioZwei, radioDrei, radioVier, radioFuenf]
};
var humanVerificationPanel = {
xtype: 'panel',
title: 'Sicherheitsabfrage',
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'label',
text: '2+5=?',
margin: '0 10 0 0'
}, {
xtype: 'textfield',
name: 'security',
margin: '2 10 1 1',
id: 'secText'
}]
};
var dachausrichtungPanel = {
xtype: 'panel',
title: 'Dachausrichtung',
name: 'dachausrichtung',
border: 'false',
layout: {
type: 'hbox'
},
items: [{
xtype: 'radio',
boxLabel: 'Sued ',
name: 'dachausrichtung',
width: 50,
inputValue: 's',
id: 'ausrichtungSued'
}, {
xtype: 'radio',
boxLabel: 'Sued/West ',
width: 85,
name: 'dachausrichtung',
inputValue: 'sw',
id: 'ausrichtungSuedWest'
}, {
xtype: 'radio',
boxLabel: 'Sued/Ost ',
width: 75,
name: 'dachausrichtung',
inputValue: 'so',
id: 'ausrichtungSuedOst'
}, {
xtype: 'radio',
boxLabel: 'Ost/West ',
width: 80,
name: 'dachausrichtung',
inputValue: 'ow',
id: 'ausrichtungOstWest'
}]
};
var dachEindeckungPanel = {
xtype: 'panel',
title: 'Dacheindeckung',
name: 'dacheindeckung',
border: 'false',
layout: {
type: 'hbox'
},
items: [{
xtype: 'radio',
boxLabel: 'Dachstein/Ziegel',
width: 120,
name: 'dacheindeckung',
inputValue: 'ziegel',
id: 'eindeckungZiegel'
}, {
xtype: 'radio',
boxLabel: 'Sandwich',
width: 80,
name: 'dacheindeckung',
inputValue: 'sandwich',
id: 'eindeckungAndwich'
},
{
xtype: 'radio',
boxLabel: 'Trapez',
width: 80,
name: 'dacheindeckung',
inputValue: 'trapez',
id: 'eindeckungTrapez'
},
{
xtype: 'radio',
boxLabel: 'Sonstiges',
width: 80,
name: 'dacheindeckung',
inputValue: 'sonst',
id: 'eindeckungSonstiges'
}, {
xtype: 'textfield',
name: 'eindeckungSonstigesText'
}
]
};
var dachInfoPanel = {
xtype: 'panel',
border: false,
title: 'Dach-Informationen',
layout: {
type: 'hbox'
},
items: [{
xtype: 'numberfield',
fieldLabel: 'Dachneigung',
minValue: 0,
maxValue: 90,
name: 'dachneigung',
margin: '0 10 0 0'
}, {
xtype: 'textfield',
fieldLabel: 'Dachbreite',
name: 'dachbreite'
}, {
xtype: 'label',
text: 'm',
width: 10,
margin: '0 10 0 0'
}, {
xtype: 'textfield',
fieldLabel: 'Dachlaenge',
name: 'dachlaenge'
}, {
xtype: 'label',
text: 'm'
}]
};
var panel = {
title: 'Stammdaten',
border: false,
xtype: 'panel',
renderTo: 'rowOne',
layout: {
type: 'table',
columns: 2
},
items: [
anredeCombo, nachnameFeld, vornameFeld, adresseFeld, plzFeld, ortFeld, telefonFeld, emailFeld]
};
var uploadPanel = {
title: 'Foto vom Dach',
border: false,
xtype: 'panel',
layout: {
type: 'hbox'
},
items: [{
xtype: 'filefield',
id: 'fileUpload',
width: 400,
emptyText: 'Datei zum Hochladen auswaehlen',
fieldLabel: 'Datei',
name: 'file',
buttonText: 'Durchsuchen'
}]
};
var sperrflaechenPanel = {
xtype: 'panel',
border: false,
name: 'sperrflaeche',
title: 'Sperrflaechen auf dem Dach vorhanden?',
layout: {
type: 'hbox'
},
items: [{
xtype: 'radio',
boxLabel: 'Ja',
width: 40,
name: 'sperrflaeche',
inputValue: 'ja',
id: 'sperrflaecheJa'
}, {
xtype: 'radio',
boxLabel: 'Nein',
name: 'sperrflaeche',
inputValue: 'nein',
id: 'sperrflaecheNein'
}]
};
var bemerkungenPanel = {
xtype: 'panel',
border: false,
title: 'Bemerkungen',
items: [{
xtype: 'textarea',
width: 300,
name: 'bemerkungen',
grow: true
}]
};
var form = {
xtype: 'form',
url: 'mail.php',
method: 'POST',
border: false,
// renderTo: 'renderHere',
// standardSubmit: true,
items: [panel, dachFormPanel, dachausrichtungPanel, dachEindeckungPanel, dachInfoPanel, uploadPanel, sperrflaechenPanel, bemerkungenPanel, humanVerificationPanel],
buttons: [{
text: 'Zuruecksetzen',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: 'Absenden',
handler: function () {
if (document.getElementById('secText').children[0].children[0].value == 7) {
var form = this.up('form').getForm();
form.submit({
headers: {
'Content-Type': 'multipart/form-data; charset=UTF-8'
}
});
Ext.Msg.alert('Vielen Dank!', 'Ihre Anfrage wurde per Mail an uns weitergeleitet. Sie erhalten eine Kopie dieser Mail.');
window.setTimeout(function () {
form.reset();
}, 2000);
} else {
Ext.Msg.alert('Fehler!', 'Sie haben die Sicherheitsabfrage nicht korrekt beantwortet...');
}
}
}]
};
Ext.create('Ext.container.Viewport', {
items: [form]
});
// document.getElementById('anrede-bodyEl').children[1].name = 'anrede';
// document.getElementById('radioEins-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioZwei-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioDrei-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioVier-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioFuenf-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioSechs-bodyEl').children[0].name = 'dachForm';
}
});
// Ext.require('Ext.container.Viewport');
As you can see, i kind of tried changing the behavior by commenting things out ... no success ...
Can anyone help me with this? :-)
Thanks in advance and greets
gilaras
I developed a little webapp for a friend of mine. Worked really fine, when I used is "standalone", i.e. when I wasn't trying to let it render into a website.
Now I wanted to implement the app into his website and ... well, it doesn't render anything. So I tried a whole lot of things, without any success. I even changed the website itself, so that it just contains one single <div> with the id i want to use (and I tried using Ext.container.Viewport, but that brought no success, too :().
Sometimes I get the following error:
Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null
I tried debugging, but I couldn't find anything that seemed wrong to me until the error was thrown ...
So i guess there must be something wrong about my code, but I can't find anything wrong there either ... maybe someone here can? :-) Would really appreciate that! :-)
Here's the code:
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.tab.*', 'Ext.window.*', 'Ext.ux.*', 'Ext.container.Viewport']);
Ext.application({
name: 'Onlineangebot',
launch: function () {
Ext.Loader.setConfig({enabled:true});
var anredeCombo = {
xtype: 'combo',
mode: 'local',
emptyText: ' ',
forceSelection: 'true',
fieldLabel: 'Anrede',
editable: 'false',
name: 'anrede',
id: 'anrede',
displayField: 'display',
valueField: 'value',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['display', 'value'],
data: [{
'display': 'Herr',
'value': 'm'
}, {
'display': 'Frau',
'value': 'w'
}]
})
};
var plzFeld = {
xtype: 'textfield',
fieldLabel: 'PLZ',
name: 'plz',
margin: '2 10 1 1',
regex: '\d+',
regexText: 'Bitte eine 5-stellige Zahl eingeben...',
validateOnChange: true
};
var vornameFeld = {
xtype: 'textfield',
fieldLabel: 'Vorname',
name: 'vorname',
margin: '2 10 1 1'
};
var ortFeld = {
xtype: 'textfield',
fieldLabel: 'Ort',
name: 'ort',
margin: '2 10 1 1'
};
var nachnameFeld = {
xtype: 'textfield',
fieldLabel: 'Nachname',
name: 'nachname',
margin: '2 10 1 1'
};
var telefonFeld = {
xtype: 'textfield',
fieldLabel: 'Telefon',
name: 'tel',
margin: '2 10 1 1'
};
var adresseFeld = {
xtype: 'textfield',
fieldLabel: 'Adresse',
name: 'adresse',
margin: '2 10 1 1'
};
var emailFeld = {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
margin: '2 10 1 1'
};
var bildEins = {
border: false,
id: 'bildEins',
xtype: 'image',
src: '/images/Gable_roof.jpg'
};
var bildZwei = {
border: false,
id: 'bildZwei',
xtype: 'image',
src: '/images/Single_sloped_roof.jpg'
};
var bildDrei = {
border: false,
id: 'bildDrei',
xtype: 'image',
src: '/images/Flat_roof.jpg'
};
var bildVier = {
border: false,
id: 'bildVier',
xtype: 'image',
src: '/images/Hip_roof.jpg'
};
var bildFuenf = {
border: false,
id: 'bildFuenf',
xtype: 'image',
src: '/images/Sawtooth_roof.jpg'
};
// var bildSechs = {
// border: false,
// id: 'bildSechs',
// xtype: 'image',
// src: '/images/sechs.png'
// };
var radioEins = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '1',
id: 'radioEins'
};
var radioZwei = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '2',
id: 'radioZwei'
};
var radioDrei = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '3',
id: 'radioDrei'
};
var radioVier = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '4',
id: 'radioVier'
};
var radioFuenf = {
xtype: 'radiofield',
name: 'dachForm',
inputValue: '5',
id: 'radioFuenf'
};
// var radioSechs = {
// xtype: 'radiofield',
// name: 'dachForm',
// inputValue: '6',
// id: 'radioSechs'
// };
var dachFormPanel = {
title: 'Dachform',
xtype: 'panel',
height: 260,
layout: {
type: 'table',
columns: 5
},
items: [
bildEins, bildZwei, bildDrei, bildVier, bildFuenf, radioEins, radioZwei, radioDrei, radioVier, radioFuenf]
};
var humanVerificationPanel = {
xtype: 'panel',
title: 'Sicherheitsabfrage',
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'label',
text: '2+5=?',
margin: '0 10 0 0'
}, {
xtype: 'textfield',
name: 'security',
margin: '2 10 1 1',
id: 'secText'
}]
};
var dachausrichtungPanel = {
xtype: 'panel',
title: 'Dachausrichtung',
name: 'dachausrichtung',
border: 'false',
layout: {
type: 'hbox'
},
items: [{
xtype: 'radio',
boxLabel: 'Sued ',
name: 'dachausrichtung',
width: 50,
inputValue: 's',
id: 'ausrichtungSued'
}, {
xtype: 'radio',
boxLabel: 'Sued/West ',
width: 85,
name: 'dachausrichtung',
inputValue: 'sw',
id: 'ausrichtungSuedWest'
}, {
xtype: 'radio',
boxLabel: 'Sued/Ost ',
width: 75,
name: 'dachausrichtung',
inputValue: 'so',
id: 'ausrichtungSuedOst'
}, {
xtype: 'radio',
boxLabel: 'Ost/West ',
width: 80,
name: 'dachausrichtung',
inputValue: 'ow',
id: 'ausrichtungOstWest'
}]
};
var dachEindeckungPanel = {
xtype: 'panel',
title: 'Dacheindeckung',
name: 'dacheindeckung',
border: 'false',
layout: {
type: 'hbox'
},
items: [{
xtype: 'radio',
boxLabel: 'Dachstein/Ziegel',
width: 120,
name: 'dacheindeckung',
inputValue: 'ziegel',
id: 'eindeckungZiegel'
}, {
xtype: 'radio',
boxLabel: 'Sandwich',
width: 80,
name: 'dacheindeckung',
inputValue: 'sandwich',
id: 'eindeckungAndwich'
},
{
xtype: 'radio',
boxLabel: 'Trapez',
width: 80,
name: 'dacheindeckung',
inputValue: 'trapez',
id: 'eindeckungTrapez'
},
{
xtype: 'radio',
boxLabel: 'Sonstiges',
width: 80,
name: 'dacheindeckung',
inputValue: 'sonst',
id: 'eindeckungSonstiges'
}, {
xtype: 'textfield',
name: 'eindeckungSonstigesText'
}
]
};
var dachInfoPanel = {
xtype: 'panel',
border: false,
title: 'Dach-Informationen',
layout: {
type: 'hbox'
},
items: [{
xtype: 'numberfield',
fieldLabel: 'Dachneigung',
minValue: 0,
maxValue: 90,
name: 'dachneigung',
margin: '0 10 0 0'
}, {
xtype: 'textfield',
fieldLabel: 'Dachbreite',
name: 'dachbreite'
}, {
xtype: 'label',
text: 'm',
width: 10,
margin: '0 10 0 0'
}, {
xtype: 'textfield',
fieldLabel: 'Dachlaenge',
name: 'dachlaenge'
}, {
xtype: 'label',
text: 'm'
}]
};
var panel = {
title: 'Stammdaten',
border: false,
xtype: 'panel',
renderTo: 'rowOne',
layout: {
type: 'table',
columns: 2
},
items: [
anredeCombo, nachnameFeld, vornameFeld, adresseFeld, plzFeld, ortFeld, telefonFeld, emailFeld]
};
var uploadPanel = {
title: 'Foto vom Dach',
border: false,
xtype: 'panel',
layout: {
type: 'hbox'
},
items: [{
xtype: 'filefield',
id: 'fileUpload',
width: 400,
emptyText: 'Datei zum Hochladen auswaehlen',
fieldLabel: 'Datei',
name: 'file',
buttonText: 'Durchsuchen'
}]
};
var sperrflaechenPanel = {
xtype: 'panel',
border: false,
name: 'sperrflaeche',
title: 'Sperrflaechen auf dem Dach vorhanden?',
layout: {
type: 'hbox'
},
items: [{
xtype: 'radio',
boxLabel: 'Ja',
width: 40,
name: 'sperrflaeche',
inputValue: 'ja',
id: 'sperrflaecheJa'
}, {
xtype: 'radio',
boxLabel: 'Nein',
name: 'sperrflaeche',
inputValue: 'nein',
id: 'sperrflaecheNein'
}]
};
var bemerkungenPanel = {
xtype: 'panel',
border: false,
title: 'Bemerkungen',
items: [{
xtype: 'textarea',
width: 300,
name: 'bemerkungen',
grow: true
}]
};
var form = {
xtype: 'form',
url: 'mail.php',
method: 'POST',
border: false,
// renderTo: 'renderHere',
// standardSubmit: true,
items: [panel, dachFormPanel, dachausrichtungPanel, dachEindeckungPanel, dachInfoPanel, uploadPanel, sperrflaechenPanel, bemerkungenPanel, humanVerificationPanel],
buttons: [{
text: 'Zuruecksetzen',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: 'Absenden',
handler: function () {
if (document.getElementById('secText').children[0].children[0].value == 7) {
var form = this.up('form').getForm();
form.submit({
headers: {
'Content-Type': 'multipart/form-data; charset=UTF-8'
}
});
Ext.Msg.alert('Vielen Dank!', 'Ihre Anfrage wurde per Mail an uns weitergeleitet. Sie erhalten eine Kopie dieser Mail.');
window.setTimeout(function () {
form.reset();
}, 2000);
} else {
Ext.Msg.alert('Fehler!', 'Sie haben die Sicherheitsabfrage nicht korrekt beantwortet...');
}
}
}]
};
Ext.create('Ext.container.Viewport', {
items: [form]
});
// document.getElementById('anrede-bodyEl').children[1].name = 'anrede';
// document.getElementById('radioEins-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioZwei-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioDrei-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioVier-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioFuenf-bodyEl').children[0].name = 'dachForm';
// document.getElementById('radioSechs-bodyEl').children[0].name = 'dachForm';
}
});
// Ext.require('Ext.container.Viewport');
As you can see, i kind of tried changing the behavior by commenting things out ... no success ...
Can anyone help me with this? :-)
Thanks in advance and greets
gilaras