PDA

View Full Version : Dynamically Adding Resizable Containers



dabl62
12 May 2011, 7:41 AM
I have a problem with Ext.Resizable when trying to add multiple resizable containers to a panel. My code works for the first container added but as soon as I add a 2nd container and call doLayout the first container is automatically moved to left of it's container. On checking the DOM you notice that container is moved but the resizing components are left where they were.
I'm sure it's something I'm doing wrong but I have tried various options and still can't get it working.

Web Page:
<html>
<head>
<title>Ext Resizable Example</title>
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />

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

<script type="text/javascript" src="MyApp.Designer.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext-3.3.1/resources/images/default/s.gif';

Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
title: 'Navigation Panel',
html: 'Navigation controls here'
},
{
region: 'center',
title: 'Main Window',
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title : 'Designer',
xtype : 'panel',
layout: 'fit',
autoScroll: true,
items : [{xtype: 'myappdesigner'}]
}
]
}
]
});
}); //end onReady
</script>
</head>
<body>
</body>
</html>


MyApp.Designer.js:
Ext.ns('MyApp');
MyApp.Designer = Ext.extend(Ext.Panel, {
layout: 'absolute',

initComponent: function() {
this.tbar = new Ext.Toolbar({
items: [
{ text: 'Add Panel', iconCls: '', handler: this.addPanel, scope: this }
]
});
this.bbar = new Ext.Toolbar({
items: [
{ text: 'Save', iconCls: '' },
{ text: 'Cancel', iconCls: '' }
]
});
var slideContainer = new Ext.Container({
layout: 'absolute',
style: 'border: 1px solid silver',
width: 600,
height: 300,
x: 10,
y: 10
});
Ext.apply(this, { items: [slideContainer] });
this.slideContainer = slideContainer;
MyApp.Designer.superclass.initComponent.apply(this, arguments);
},
onRender: function() {
MyApp.Designer.superclass.onRender.apply(this, arguments);
},

addPanel: function() {
var offset = this.slideContainer.items.length * 10;
var newPanel = this.slideContainer.add(new Ext.BoxComponent({
style: 'border: 1px solid blue',
width: 100,
height: 50,
html: 'Item ' + this.slideContainer.items.length,
x: 10 + offset,
y: 10 + offset
}));
this.slideContainer.doLayout();
newPanel.resizable = new Ext.Resizable(newPanel.id, {
wrap: true,
draggable: true,
handles: 'all',
transparent: true,
dynamic: true,
constrainTo: this.slideContainer.el
});
}

});
Ext.reg('myappdesigner', MyApp.Designer);

dabl62
12 May 2011, 7:53 AM
As is usually the case, I found the answer just after I posted the issue.

Changing the wrap attribute to false makes the code work as I'd expect.