PDA

View Full Version : [ext3.0.0] Render Formpanel into Panel



simpleContent
24 Aug 2009, 12:58 AM
Hi,

I have some problems, while render a formpanel into an existing panel.



Ext.onReady(function(){

var variantenBox = new Ext.Panel({
width:600,
frame:true,
style:'padding:10px 0 10px 10px',
renderTo: 'ext_combination_content',
title: 'Variantenauswahl',
id: 'variantenauswahlbox'
});

var selectBox = new Ext.FormPanel({
labelAlign: 'top',
renderTo: 'variantenauswahlbox',
width:580
});
});


Firebug say's:
this.body is null
http://.../ext-3.0.0/ext-all-debug.js
Line 21775
...
this.body.addClass(this.bodyCls + '-noheader');\n

i really have no idea what to do.
could anyone please help me?

greets

Animal
24 Aug 2009, 1:05 AM
Do not render!

Why do people just dive in and render instead of reading docs and examples?

simpleContent
24 Aug 2009, 1:15 AM
hi,

should I use this code?



var selectBox = new Ext.FormPanel({
labelAlign: 'top',
width:580
});
var variantenBox = new Ext.Panel({
width:600,
frame:true,
style:'padding:10px 0 10px 10px',
renderTo: 'ext_combination_content',
title: 'Variantenauswahl',
items:[{
items: selectBox
}]
});


this code doesnt work either.

greets

Animal
24 Aug 2009, 1:43 AM
"doesn't work"?

How high is that outer Panel going to be? Is it sized-managed by being a child item of a higher up Container, or is it your outermost Container?

But anyway, why are you inserting a FormPanel into a Panel?

simpleContent
24 Aug 2009, 2:02 AM
--> body
--> DIV
--> Panel
--> Formpanel

Okay, now i tried to render the formpanel direct to the Div-Container but now, firebug say's:

this.el is null
chrome://firebug/content/blank.gif this.id = this.el.id || Ext.id();




Ext.onReady(function(){
var variantenStore = new Ext.data.ArrayStore({
fields: ['id', 'variante'],
data : varianten
});

var combo = new Ext.form.ComboBox({
fieldLabel:'Variante',
store: variantenStore,
displayField:'variante',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:573,
value:varianten[0][1],
readOnly:true
});

var selectBox = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
width:580,
title: "Variantenauswahl",
items: [{
layout:'column',
items:[combo]
}],
buttons: [{
text: 'Hinzufügen',
listeners: {
click: function(){
addComponent(combo.getValue());
}
}
},{
text: 'Speichern',
listeners: {
click: function(){
saveData();
}
}
}]
});


selectBox.render("ext_combination_content");
});

Animal
24 Aug 2009, 2:31 AM
Why do you wrap that Combo in a Panel before putting it in your FormPanel?

Does an element called "ext_combination_content" exist?

simpleContent
24 Aug 2009, 3:00 AM
1. yes, a container[id=ext_combination_content] exists in the DOM.

2. I wrapped it into a container because i need the buttons

Animal
24 Aug 2009, 3:04 AM
No, I mean this Panel:



{
layout:'column',
items:[combo]
}


You put the combo inside a column layout Panel. Why?

As to your bug, use ext-all-debug.js, set Firebug to "Break on all errors", and when it breaks, see who made the el null.

simpleContent
24 Aug 2009, 3:20 AM
okay, now the combo is not in a column panel:



...
items: [combo],
...


and here a screenshot from the firebug inspector:

http://img197.imageshack.us/img197/4118/screenextjsrenderpanel.png

Animal
24 Aug 2009, 3:48 AM
ok. now go back through the call stack to see who first set it up wrong.

simpleContent
24 Aug 2009, 4:41 AM
i went back through the call stack, even in the first call, this.body is already undefined :s

24 Aug 2009, 4:50 AM
Do not render!

Why do people just dive in and render instead of reading docs and examples?

I think a lot of the examples still have the old 1.x ways of doing things, which people follow easily.

Animal
24 Aug 2009, 4:54 AM
So show the whole page HTML and the script which sets it up.

simpleContent
24 Aug 2009, 5:07 AM
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/xtheme-gray-colors.css" />
<link rel="stylesheet" type="text/css" href="ext-3.0.0/file-upload.css" />
<link rel="stylesheet" type="text/css" href="file-upload.css" />

<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-3.0.0/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.0.0/ux/FileUploadField.js"></script>
<script type="text/javascript" src="ext-3.0.0/ux/Spotlight.js"></script>
<script type="text/javascript" src="javascript/globals.js"></script>
<script type="text/javascript" src="javascript/save.js"></script>
<script type="text/javascript" src="javascript/tools.js"></script>
<script type="text/javascript" src="javascript/addComponent.js"></script>
<script type="text/javascript" src="javascript/upload.js"></script>
<script type="text/javascript" src="javascript/grids.js"></script>

<script type="text/javascript" src="javascript/menu.js"></script>
<script type="text/javascript" src="javascript/main.js"></script>

</head>
<body>
<div id="ext_combination_content">

</div>
</body>
</hmtl>




Main.js


Ext.onReady(function(){
var variantenStore = new Ext.data.ArrayStore({
fields: ['id', 'variante'],
data : varianten
});

var combo = new Ext.form.ComboBox({
fieldLabel:'Variante',
store: variantenStore,
displayField:'variante',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
width:573,
value:varianten[0][1],
readOnly:true
});

var selectBox = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
width:580,
title: "Variantenauswahl",
items: [combo],
buttons: [{
text: 'Hinzuf&uuml;gen',
listeners: {
click: function(){
addComponent(combo.getValue());
}
}
},{
text: 'Speichern',
listeners: {
click: function(){
saveData();
}
}
}]
});

selectBox.render("ext_combination_content");
});


var varianten,... are defined in "globals.js":


Array.prototype.lastIndex = function(){
var last;
for(var i = 0;i < this.length; i++){
last = i;
}
return last;
}


var varianten = [
[1,'Absatz ohne Bild, ohne Downloads'],
[2,'Absatz mit Bild rechts (ohne Downloads)'],
[3,'Absatz mit Bild rechts (mit Downloads)'],
[4,'Absatz mit Bildergalerie rechts (mit Downloads)'],
[5,'Absatz mit Video rechts (ohne Downloads)'],
[6,'Absatz mit Bild unterhalb (ohne Downloads)'],
[7,'Absatz mit Bild unterhalb (mit Downloads)']
];

var _varianten = function(name){
var a = new Array();
a['Absatz ohne Bild, ohne Downloads'] = 1;
a['Absatz mit Bild rechts (ohne Downloads)'] = 2;
a['Absatz mit Bild rechts (mit Downloads)'] = 3;
a['Absatz mit Bildergalerie rechts (mit Downloads)'] = 4;
a['Absatz mit Video rechts (ohne Downloads)'] = 5;
a['Absatz mit Bild unterhalb (ohne Downloads)'] = 6;
a['Absatz mit Bild unterhalb (mit Downloads)'] = 7;
return a[name];
}

var spot = new Ext.ux.Spotlight({
easing: 'easeOut',
duration: 0.6
});


var registry = {};
registry.components = new Array();
var index = {};
index.components = new Array();

var FILE_SAVE = "./ajax/save";
var FILE_UPLOAD = "./ajax/upload";

var IMG_ADD = "./img/add.gif";
var IMG_DELETE = "./img/delete.png";

var renderTo = 'ext_combination_content';

Animal
24 Aug 2009, 5:47 AM
Just render to document.body

simpleContent
24 Aug 2009, 6:07 AM
that won't work because after div#ext_combination_content also follows some content... :s

Animal
24 Aug 2009, 6:12 AM
You have a bug somewhere and you need to debug.

24 Aug 2009, 6:13 AM
On a side note: you can use "handler" instead of assigning a click listener to the buttons :)

simpleContent
24 Aug 2009, 6:14 AM
I know, I'm still debugging over 3 days but I can't find the failure :s
I searched the whole forum,....but nothing.

Animal
24 Aug 2009, 6:30 AM
You have to actually debug. With a debugger and see what's wrong and why.

Searching forums won't debug for you.

What did people do before the internet was available to get other people to do your job?