Skip to content

Instantly share code, notes, and snippets.

@jjulian

jjulian/chapter12-dnd-example.html

Created March 15, 2010 18:12
Show Gist options
  • Save jjulian/333114 to your computer and use it in GitHub Desktop.
Save jjulian/333114 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chapter12-dnd-example.html
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var personStore = new Ext.data.ArrayStore({
fields: ['id', 'name', 'image', 'city', 'country'],
data: [[1,'Mike','http://a3.twimg.com/profile_images/648721379/twitter-ravens_normal.jpg','bmore','usa'],
[2,'Chris','http://a3.twimg.com/profile_images/651575553/twittergithub2.png','sf','USA']]
});
var personView = new Ext.DataView({
tpl: '<tpl for=".">' +
'<div class="person">' +
'<h1>{name}</h1>' +
'<div><img src="{image}" alt="{name}" height="50"/></div>' +
'</div>' +
'</tpl>',
itemSelector: 'div.person',
store: personStore
});
personView.render('people');
new Ext.dd.DragZone(personView.getEl(), {
getDragData : function(e) {
// var container = e.getTarget('div.person', 5, true);
return { ddel : document.createElement('div'), //ddel is the drag proxy
record : personView.getRecord(container.dom) }
}
})
var detailForm = new Ext.form.FormPanel({
width: 250,
height: 80,
defaultType: 'textfield',
items: [
{ fieldLabel: 'Name', name:'name' },
{ fieldLabel: 'City', name:'city' },
{ fieldLabel: 'Country', name:'country' }
]
});
detailForm.render('detail');
new Ext.dd.DropTarget(detailForm.body.dom, {
notifyDrop : function(source, e, data){
var record = source.dragData.record;
detailForm.getForm().loadRecord(record);
return true;
}
});
});
</script>
</head>
<body>
<div id="people"></div>
<div id="detail"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment