PDA

View Full Version : [SOLVED] Placing Ext.Toolbar into Ext.LayoutDialog


cowabunga1984
27 Sep 2007, 2:46 AM
Hi all :)

Here what I want to do:
I want to place a toolbar into the 'center'-region of a LayoutDialog. I don't want to user html-code to do that.

Here my problem:
The toolbar is always placed into the document.body and not in my LayoutDialog.

Here my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExtJs - Example</title>

<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/ext-all-debug.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ytheme-vista.css">

<!-- Init namespace -->
<script type="text/javascript">
Ext.onReady(function() {
// create dialog
var myDivDialog = Ext.DomHelper.append(document.body,
'<div></div>', true);

var myDialog = new Ext.LayoutDialog(myDivDialog, {
height: 400,
width: 500,
center: {}
}
);

// create toolbar
var myDivToolbar = Ext.DomHelper.append(document.body,
{tag: 'div'}, true);

var myToolbar = new Ext.Toolbar(myDivToolbar);

myToolbar.addButton({
text: 'Test'
}
);

// create center-panel
var myDivPanel = Ext.DomHelper.append(document.body,
{tag: 'div'}, true);

this.theCenterPnl = new Ext.ContentPanel(myDivPanel, {
toolbar: myToolbar
}
);

myDialog.show();
});
</script>
</head>
<body>
</body>

</html>I hope you can help me :)

Regards,
cowabunga
cowabunga1984
27 Sep 2007, 2:56 AM
Ah, I did a mistake while copy/paste. Here is the code again:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExtJs - Example</title>

<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/ext-all-debug.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ytheme-vista.css">

<!-- Init namespace -->
<script type="text/javascript">
Ext.onReady(function() {
// create dialog
var myDivDialog = Ext.DomHelper.append(document.body,
'<div></div>', true);

var myDialog = new Ext.LayoutDialog(myDivDialog, {
height: 400,
width: 500,
center: {}
}
);

// create toolbar
var myDivToolbar = Ext.DomHelper.append(document.body,
{tag: 'div'}, true);

var myToolbar = new Ext.Toolbar(myDivToolbar);

myToolbar.addButton({
text: 'Test'
}
);

// create center-panel
var myDivPanel = Ext.DomHelper.append(document.body,
{tag: 'div'}, true);

var myCenterPnl = new Ext.ContentPanel(myDivPanel, {
toolbar: myToolbar
}
);

var myLayout = myDialog.getLayout();
myLayout.beginUpdate();
myLayout.add('center', myCenterPnl);
myLayout.endUpdate();

myDialog.show();
});
</script>
</head>
<body>
</body>

</html>
fay
27 Sep 2007, 3:18 AM
This should do it for ya:


<script type="text/javascript">
Ext.onReady(function() {

var myDialog = new Ext.LayoutDialog('my-dialog', {autoCreate: true, height: 400, width: 500, center: {}});

var myToolbar = new Ext.Toolbar(Ext.DomHelper.append(myDialog.getEl(), {id: Ext.id()}));
myToolbar.addButton({text: 'Test'})

var layout = myDialog.getLayout();

layout.beginUpdate();
var cp = new Ext.ContentPanel(Ext.DomHelper.append(myDialog.getEl(), {id: Ext.id()}), {toolbar: myToolbar});
layout.add('center', cp);
cp.getEl().appendChild(cp.getToolbar().getEl()); // The important bit!
layout.endUpdate();

myDialog.show();
});
</script>
cowabunga1984
27 Sep 2007, 3:43 AM
Thank you VERY MUCH :D

Here is the working code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExtJs - Example</title>

<!-- Include YUI utilities and Ext: -->
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="web/js/ext1_1_1/ext-all-debug.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ytheme-vista.css">

<!-- Init namespace -->
<script type="text/javascript">
Ext.onReady(function() {
// create dialog
var myDivDialog = Ext.DomHelper.append(document.body,
{tag: 'div'}, true);
var myDialog = new Ext.LayoutDialog(myDivDialog, {
height: 400,
width: 500,
syncHeightBeforeShow: true,
center: {}
}
);

// create toolbar
var myToolbar = new Ext.Toolbar(myDialog.getEl().createChild({tag:'div'}));

myToolbar.addButton({
text: 'Test'
}
);

// create center-panel
var myPnlDiv = Ext.DomHelper.append(myDialog.getEl(), {tag: 'div'},
true);
var myCenterPnl = new Ext.ContentPanel(myPnlDiv, {
toolbar: myToolbar,
fitToFrame: true,
autoCreate : true
}
);

myCenterPnl.getEl().appendChild(myCenterPnl.getToolbar().getEl());

var myLayout = myDialog.getLayout();
myLayout.beginUpdate();
myLayout.add('center', myCenterPnl);
myLayout.endUpdate();

myDialog.show();
});
</script>
</head>
<body>
</body>
</html>

THX :D
cowabunga1984
27 Sep 2007, 10:32 PM
Do I have to mark this thread as resolved? If yes: How? :)
aconran
28 Sep 2007, 6:01 AM
I went ahead and marked this thread as SOLVED. In the future you can just edit your original post and then go into advanced mode and change the title.

Aaron