PDA

View Full Version : ExtJS Alternative of jQuery UI Nested Sortable



JaremaCzajkowski
19 Feb 2014, 12:44 AM
http://jaremaczajkowski.pl/pub/forums/nestedSortable-screenshoot.jpeg

I use with perfection nestedSortable (http://mjsarfatti.com/sandbox/nestedSortable/).
I blocked all x-tree-bellow-* class to manage my own
folder-depth-N class. My question is:

How change dynamically folder-depth-N when node is dropped
How emulate behavior like in jQuery have when node is moving




.x-grid-row-over .x-grid-cell {
background-color: #FFF;
}
.x-grid-tree-node-expanded .x-tree-icon-parent, .x-tree-icon-parent {
width: 32px;
height: 32px;
background-image: url(/ui.images/coffee.ico)
}
.x-tree-panel .x-grid-row .x-grid-cell-inner {
height: 32px;
margin: 6px;
background: -moz-linear-gradient(center top

,rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(240, 236, 233) 100%)
repeat scroll 0% 0% transparent !important;
}
.x-tree-panel .x-grid-cell-inner {
border-width: 2px !important;
border-style: solid;
border-radius: 3px;
border-color: rgb(0, 0, 0) rgb(212, 212, 212) rgb(212, 212, 212) !important;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
}
.x-tree-elbow, .x-tree-elbow-empty, .x-tree-elbow-line, .x-tree-elbow-end {
width: 1px;
height:1px;
}
.folder-depth-1 {
padding-left: 8px;
}
.folder-depth-2 {
padding-left: 16px;
}
.folder-depth-3 {
padding-left: 24px;
}
.folder-depth-4 {
padding-left: 32px;
}
.folder-depth-5 {
padding-left: 40px;
}
.folder-depth-6 {
padding-left: 48px;
}
.folder-depth-7 {
padding-left: 56px;
}
.folder-depth-8 {
padding-left: 64px;
}
.folder-depth-9 {
padding-left: 72px;
}


var nestedStore = Ext.create('Ext.data.TreeStore',{
proxy: {
type: 'ajax'
,url: 'get-nodes.php'
}
,root: {
text: 'Ext JS Root'
,id: 'ext4.minimal'
,expanded: true
}
});

var nestedSortable = Ext.create('Ext.tree.Panel',{
title: 'Ext.tree.Panel :: Drag and Drop Reordering'
,width: 400
,height: 600
,store: nestedStore
,rootVisible: true
,lines: false
,viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
}
});

JaremaCzajkowski
20 Feb 2014, 7:07 AM
I Love answer to myself.
Note that the attachments is not minified so it is readable.