PDA

View Full Version : ExtJS 4.1 Tree Drag & Drop



ShrutiRuparel
23 May 2012, 4:29 AM
I have recently started using ExtJS 4.1 & working with drag & drop. I had prev posted a similar ques(extjs 4.0.7) & had got perfectly working soln. : http://www.sencha.com/forum/showthread.php?145862-extjs-4-adding-node-to-tree-panel

I want drag & drop with tree panel, but i want to COPY node when i drag it from one tree to another instead of MOVE which i am able to achieve through this :


......
onTreedragdroppluginBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {
data.copy = true;
}
......

The problem is I am not able to copy dragged node's CHILDREN. So i want drag node alongwith its children & drop it to a newer node.
Can someone redirect me to the solution!?

Ashulove
23 May 2012, 6:35 AM
hi i need help to make a dd form with these ditals...

1. What should the application contain?
- Viewport (Layout: border)
- Header (Region: north)
- Navigation (Region: west)
- Main area (Region: center)


2. What's the use of the application?
- Movie collection database, where you can store details about moviews


3. Content in each region
- Header:
- Left side : Small logo (We will create this, he just needs to implement it)
- Right side: Link to refresh the system


- Navigation:
- Categories
- Add : Open a window to add a category
Fields:
- Category name (Mandatory)
- Description (Optional)


- List : Open a window with a grid panel
Grid headers:
- Category name
- Description


- Directors
- Add : Open a window to add a director
Fields:
- Name (Mandatory)
- Description (Optional)


- List : Open a window with a grid panel
Fields:
- Name
- Description
- Content: (Tab panel)
- Grid panel to view a list of movies
Fields:
- Move title (Mandatory)
- Release year (Optional)
- Category (Mandatory)
- Director (Mandatory)
- IMDB Link (Optional)
- Toolbar
- Add : Open a window with a form
Fields:
- Move title (Mandatory)
- Release year (Optional)
- Category (Mandatory, multi select, combo box)
- Director (Mandatory)
- IMDB Link (Optional)


- Edit : Open a window with a form
Fields:
- Same as in add


- Delete : Delete all selected rows
- IMDB : Display the movies IMDB page in a new tab
NOTE:
- If no row is selected, display an information window telling the user to select a row first
- If no link is present, display an information window telling the user that there is no IMDB link saved on this movie
without mvc
does any one help me...


my still code is

Ext.onReady(function()
{
var store = Ext.create('Ext.data.TreeStore', {
region: 'west',
collapsible: true,
title: 'Navigation',
root: {
expanded: false,
children: [{
text: "Category",
expanded: true,
children: [{
text: "Add",
id: 'add',
leaf: true
}, {
text: "List",
id: 'list',
leaf: true
}]
}, {
text: "Director",
expanded: true,
children: [{
text: "Add",
id: 'aadd',
leaf: true
}, {
text: "List",
id: 'llist',
leaf: true
}]
}]
}
});

tab_center = new Ext.TabPanel({
xtype: 'tabpanel',
id: 'pa',
resizeTabs: true,
//floating: true,
// centered: true,
iconCls: 'icon-user-add',
closable: true,
minTabWidth: 115,
tabWidth: 100,
enableTabScroll: true,
layoutOnTabChange: true,
border: false,
activeItem: 'tab_ADD',
autoDestroy: false,
items: [{
xtype: 'panel',
id: 'tab_ADD',
closable: true,
bodyStyle: 'padding:10px',
title: 'ADD'
}]
});
{
var viewport = Ext.create('Ext.Viewport', {
id: 'example',
items: [{
region: 'South',
border: false,
height: 20,
tbar: [ '->', {
text: 'Refresh'
}, '-', {
text: 'Logout'

}]
},
]
})
}
/*Ext.define('Ext.Category', {
models: [ 'Category' ],
stores: [ 'Category' ],
views: [ 'category.Tree' ],
init: function() {
this.control({
'categorytree': {
itemdblclick: this.onTreeItemdblclick
}
});
},
onTreeItemdblclick: function (tree, record, item, index, e, eOpts) {
var mainTabs = Ext.getCmp('tabpanel');
var tabId = record.get('id');
if (mainTabs) {
var checkTab = mainTabs.getComponent(tabId);
if (checkTab) {
mainTabs.setActiveTab(checkTab);
} else {
var controller;
var list;
switch (tabId) {
case '0101':
list = Ext.widget('list');
break;
}
if (list)
{
var tabPage = mainTabs.add({
id: record.get('id'),
title: record.get('name'),
closable: true,
layout: 'fit',
items: [ list ]
});
mainTabs.setActiveTab(tabPage);
}
}
}
}
})*/
tree_dir = Ext.create('Ext.tree.Panel', {
id: 'forum-tree',
region: 'west',
title: 'Forum',
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
split: true,
width: 150,
height: 300,
margins: '0 0 5 5',
lines: true,
autoScroll: true,
listeners: {
itemclick: function(){
var tab = tab_center.add({
closable: true,
title: (tab_center.items.length +'ADD'),
});
tab_center.setActiveTab(tab);
}
}
});
viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'anchor',
width: 700,
height: 400,
layout: 'border',
bodyStyle: 'padding: 5px;',


items: [tree_dir, tab_center]
});
viewport.show();


});
PLZ Help me
thnx in advance...

ShrutiRuparel
23 May 2012, 8:46 AM
i would suggest you to post new(seperate) thread for your ques..

kid-
23 May 2012, 8:39 PM
You need to add the following to your tree.Panel definition


viewConfig: {
copy: true
}

Ashulove
23 May 2012, 9:40 PM
hi i need help to make a dd form with these ditals...


1. What should the application contain?
- Viewport (Layout: border)
- Header (Region: north)
- Navigation (Region: west)
- Main area (Region: center)

Ashulove
23 May 2012, 9:44 PM
1. What should the application contain?
- Viewport (Layout: border)
- Header (Region: north)
- Navigation (Region: west)
- Main area (Region: center)

Content in each region
Header:
- Right side: Link to refresh the system


- Navigation:
- Categories
- Add : Open a window to add a category
Fields:
- Category name (Mandatory)
- Description (Optional)



- List : Open a window with a grid panel
Grid headers:
- Category name
- Description


- Directors
- Add : Open a window to add a director
Fields:
- Name (Mandatory)
- Description (Optional)


- List : Open a window with a grid panel
Fields:
- Name
- Description
- Content: (Tab panel)
- Grid panel to view a list of movies
Fields:
- Move title (Mandatory)
- Release year (Optional)
- Category (Mandatory)
- Director (Mandatory)

ShrutiRuparel
23 May 2012, 9:48 PM
stop posting your questions into my thread..i have posted thread to get ans to my ques.. Put some efforts yourself..As i have prev said, post ques as DIFFERENT/NEW thread NOT INTO MY THREAD..

ShrutiRuparel
23 May 2012, 9:55 PM
thnx @kid..i have specified it in beforedrop event..my code looks like this :




Ext.define('MyApp.view.ProdConfigVP', {
extend: 'Ext.container.Viewport',
id: 'ProdConfigVP',
layout: {
align: 'stretch',
type: 'hbox'
},


initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
id: 'ProdConfigP1',
title: 'My Tree Panel',
store: 'P1Store',
rootVisible: false,
flex: 1,
viewConfig: {
draggable: true,
plugins: [
Ext.create('Ext.tree.plugin.TreeViewDragDrop', {
ptype: 'treeviewdragdrop',
ddGroup: 'treeTOtree',
enableDrop: false
})
],
listeners: {
beforedrop: {
fn: me.onTreedragdroppluginBeforeDrop1,
scope: me
}
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'combobox',
width: 250,
fieldLabel: 'Select Category',
displayField: 'search_key',
store: 'ProductCatagory',
valueField: 'id',
listeners: {
change: {
fn: me.onComboboxChange,
scope: me
}
}
}
]
}
]
},
{
xtype: 'treepanel',
id: 'ProdConfigP2',
title: 'My Tree Panel',
store: 'P2Store',
root: {
text: 'myRoot',
id: 0
},
flex: 1,
viewConfig: {
plugins: [
Ext.create('Ext.tree.plugin.TreeViewDragDrop', {
ptype: 'treeviewdragdrop',
appendOnly: true,
ddGroup: 'treeTOtree'
})
],
listeners: {
beforedrop: {
fn: me.onTreedragdroppluginBeforeDrop,
scope: me
}
}
}
},
{
xtype: 'tabpanel',
id: 'ProdConfigP3',
activeTab: 0,
flex: 1,
items: [
{
xtype: 'panel',
title: 'Tab 1'
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}
]
});


me.callParent(arguments);
},

onTreedragdroppluginBeforeDrop1: function(node, data, overModel, dropPosition, dropFunction, options) {
},

onComboboxChange: function(field, newValue, oldValue, options) {
var catProductStore = Ext.data.StoreManager.lookup('P1Store');
catProductStore.load({params:{product_category_id:newValue}});
},


onTreedragdroppluginBeforeDrop: function(node, data, overModel, dropPosition, dropFunction, options) {
data.copy = true;
}

});

kid-
23 May 2012, 10:01 PM
Nevertheless, try to specify copy: true in viewConfig. It looks like data object in beforedrop event doesn't influence to dropped item behavior.


copy : Boolean (http://docs.sencha.com/ext-js/4-1/#!/api/Boolean)The value of the TreeView's copy property, or true if the TreeView was configured with allowCopy: true and the control key was pressed when the drag operation was begun

Ashulove
23 May 2012, 10:02 PM
okkk sorry for that... its not repeated again, im so sorry..