PDA

View Full Version : Strange Error while rendering...



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

vietits
12 Apr 2012, 10:52 PM
See my fix in red color.


var panel = {
title: 'Stammdaten',
border: false,
xtype: 'panel',
// renderTo: 'rowOne', <- remove this line
layout: {
type: 'table',
columns: 2
},


items: [
anredeCombo, nachnameFeld, vornameFeld, adresseFeld, plzFeld, ortFeld, telefonFeld, emailFeld]
};

gilaras
12 Apr 2012, 11:02 PM
See my fix in red color.


var panel = {
title: 'Stammdaten',
border: false,
xtype: 'panel',
// renderTo: 'rowOne', <- remove this line
layout: {
type: 'table',
columns: 2
},


items: [
anredeCombo, nachnameFeld, vornameFeld, adresseFeld, plzFeld, ortFeld, telefonFeld, emailFeld]
};




Why remove it? I want the app to render to that div (the viewport-thing was just to try if it renders in general ... but it doesn't... >.<), so that wouldn't make any sense, or do i get something wrong?

Edit: nevermind, thought you meant a different ow :"> I'll give it a try :-)

gilaras
12 Apr 2012, 11:09 PM
Hmmm...
now i renders my form ... to the body of the site, when I use the viewport (that's what I expected it to do, though :D). But when I comment out the viewport-stuff and tell the form to "renderTo: 'someId'", it does nothing ... :/ Without any errormessage...

vietits
12 Apr 2012, 11:11 PM
Here is what I get from the document


renderTo (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/Ext.AbstractComponent-cfg-renderTo) : String (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/String)/HTMLElement/Ext.Element (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/Ext.dom.Element)
Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.
Notes:
Do not use this option if the Component is to be a child item of a Container (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/Ext.container.Container). It is the responsibility of the Container (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/Ext.container.Container)'s layout manager (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/Ext.container.Container-cfg-layout) to render and manage its child items.
When using this config, a call to render() is not required.
See render (file:///D:/Prog/script/sencha.com/extjs-4.1.0-rc3/docs/index.html#!/api/Ext.AbstractComponent-event-render) also.

gilaras
12 Apr 2012, 11:31 PM
Hi,

thanks for your reply, but I don't get what you want to tell me with the text from the docs. I read them (the docs...) through and through and never had this problem ... >.<

vietits
13 Apr 2012, 12:08 AM
Your code works well on my Chrome, Ext 4.0.7 after doing the following things (marked in red color in your code):

adding a <DIV id="renderHere"></DIV> to the html file
comment out the viewport stuff,
set renderTo of form to 'renderHere',
comment out renderTo: 'rowOne' of panel
Add Ext.create('widget.form', form).
There is one error however: "Registering duplicate id "anrede" with this manager"


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('widget.form', form);
//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';
}

});

gilaras
13 Apr 2012, 1:17 AM
Your code works well on my Chrome, Ext 4.0.7 after doing the following things (marked in red color in your code):

adding a <DIV id="renderHere"></DIV> to the html file
comment out the viewport stuff,
set renderTo of form to 'renderHere',
comment out renderTo: 'rowOne' of panel
Add Ext.create('widget.form', form).

There is one error however: "Registering duplicate id "anrede" with this manager"


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('widget.form', form);
//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';
}

});




Hi,

thanks for your reply :-)
The ID does not get assigned on any machines I tested my app on, so that's why I had to assign it manually ... I don't know, why it seems to be assigned two times, but I guess it doesn't matter, because it's assigned two times to the same element... ;-)

I got it running by changig "var form = ..." to " var form = Ext.create('Ext.form.Panel',{..."; that's where my mistake really was :-)
Thanks for your help, I learned a lot I guess... :-) (no sarcasm here, if you thought so ...)