PDA

View Full Version : Ext.view.View with Ext.ux.DataView.Draggable



jeewiya
27 Dec 2011, 4:15 AM
hi ,
i am using Ext.ux.DataView.Draggable as a plugin to Ext.view.View. I can Drag the item but the drop zone does not work. and I cannot set the ghost TPL.





Ext.define('myStuff.myView', {
extend: 'Ext.view.View',
alias : 'widget.myView',
store: contentStore,
cls:'content-view-view',
tpl:contentViewTpl,
multiSelect: true,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: '.thumb-wrap',
resizable:true,
style: {
overflow:'auto'
},
initComponent: function() {
this.plugins = [Ext.create('Ext.ux.DataView.DragSelector',this),
Ext.create('Ext.ux.DataView.Draggable',{
ddConfig: {
ddGroup: 'organizerDD'
},

ghostTpl:[
'<img src="{thumb}" />',
'<tpl if="xindex % 4 == 0"><br /></tpl>',
'</tpl>',
'<div class="count">',
'{[values.length]} images selected',
'<div>'
]
})
]
this.callParent(arguments);
}
});


Extjs 4.0.2

mitchellsimoens
27 Dec 2011, 7:24 AM
Have you looked at the source for this example: http://docs.sencha.com/ext-js/4-0/#!/example/organizer/organizer.html

The ImageView.js file shows you how to use the Ext.ux.DataView.Draggable. It's a mixin not a plugin

jeewiya
27 Dec 2011, 7:19 PM
i have been also try that way, but some error occurred.



this.el is null this.callParent([this.el.dom, this.ddGroup || this.group,

ext-all-debug.js

(line 36942





Ext.define('myStuff.myView', {
extend: 'Ext.view.View',
alias : 'widget.myView',
mixins: {
dragSelector: 'Ext.ux.DataView.DragSelector',
draggable : 'Ext.ux.DataView.Draggable'
},
store: contentStore,
cls:'content-view-view',
tpl:contentViewTpl,
multiSelect: true,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: '.thumb-wrap',
resizable:true,
style: {
overflow:'auto'
},
initComponent: function() {
this.mixins.dragSelector.init(this);
this.mixins.draggable.init(this, {
ddConfig: {
ddGroup: 'organizerDD'
},
ghostTpl: [
'<img src="{thumb}" />',
'<tpl if="xindex % 4 == 0"><br /></tpl>',
'</tpl>',
'<div class="count">',
'{[values.length]} images selected',
'<div>'
]
});
this.callParent(arguments);
}
});

tavinashb
6 Jan 2012, 6:36 AM
I have tried to create example with reference of
http://docs.sencha.com/ext-js/4-0/#!...organizer.html (http://docs.sencha.com/ext-js/4-0/#%21/example/organizer/organizer.html)

I'm also getting following error

this.el is null
this.callParent([this.el.dom, this.ddGroup || this.group,