Attempting to create draggable panel within another panel, stuck in upper left corner

[cflynn07]

I'm attempting to add a small panel within another panel and allow users to drag it around the screen.

Ext.define('CS.view.StartScreen', {	extend: 'Ext.panel.Panel',
	alias: 'widget.startscreen',
	items: [{
		xtype: 'panel',
		title: 'Hello',
	//	closable: true,
	//	collapsible: true,
		draggable: true,
	//	resizable: true,
	//	maximizable: true,
		constrain: true,
		height: 300,
		width: 300
	}],
	dockedItems: [{
		xtype: 'toolbar',
		dock: 'bottom',
		layout: 'hbox',
		pack: 'center',
		items: [
			{xtype: 'button', text: 'Click Me'}
		]
	}]
});

However whenever I attempt to drag the panel it snaps back to the upper left hand corner. Can anyone tell me what I'm doing wrong? Thanks!

Screen Shot 2012-01-21 at 8.25.33 PM.jpg

[cflynn07]

Any help here guys? Still pretty lost.

[cflynn07]

I've also noticed that in the examples, panels that have the draggable: true property are not draggable. They snap back to their original location instead of remaining where they're dragged to.

http://docs.sencha.com/ext-js/4-0/gu...loating_panel/