{"id":20,"date":"2008-07-29T16:12:26","date_gmt":"2008-07-29T14:12:26","guid":{"rendered":"http:\/\/kinsey.no\/wp\/?p=20"},"modified":"2009-08-20T17:15:19","modified_gmt":"2009-08-20T15:15:19","slug":"a-simple-reorder-list-in-ext-js","status":"publish","type":"post","link":"https:\/\/kinsey.no\/blog\/index.php\/2008\/07\/29\/a-simple-reorder-list-in-ext-js\/","title":{"rendered":"A simple reorder list in Ext JS"},"content":{"rendered":"

I’ve been using Ext JS<\/a> for quite some time now, and I must say, I love it.<\/p>\n

There is quite good support for drag’n’drop here, but it lacks one thing; the precious reorder list.
\nAn example of such can be found here<\/a><\/p>\n

Since doing the google didn’t return anything like this I ended up implementing it my self.
\n
\nI started out with the example given here<\/a>, but this only implements basic d’n’d of elements, not the reordering.
\nSo with the following html:<\/p>\n

\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot;&gt;\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;..\/lib\/ext\/resources\/css\/ext-all.css&quot; temp_href=&quot;..\/lib\/ext\/resources\/css\/ext-all.css&quot;&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;..\/lib\/ext\/adapter\/ext\/ext-base.js&quot; temp_src=&quot;..\/lib\/ext\/adapter\/ext\/ext-base.js&quot;&gt;\r\n&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;..\/lib\/ext\/ext-all-debug.js&quot; temp_src=&quot;..\/lib\/ext\/ext-all-debug.js&quot;&gt;\r\n&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;custom.js&quot; temp_src=&quot;custom.js&quot;&gt;\r\n&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;Ext.onReady(Tutorial.dd.init, Tutorial.dd);\r\n&lt;\/script&gt;\r\n&lt;title&gt;Custom Drag &amp;amp;amp;amp;amp; Drop Tutorial&lt;\/title&gt;\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n\r\n.dd-item {\r\nheight: 18px;\r\nborder: 1px solid #a0a0a0;\r\nbackground-color: #c4d0ff;\r\nvertical-align: middle;\r\ncursor: move;\r\npadding: 2px;\r\nz-index: 1000;\r\n}\r\n\r\n.dd-ct .dd-item {\r\nmargin: 2px;\r\nwidth:200px;\r\n}\r\n\r\n.dd-proxy {\r\nopacity: 0.4;\r\n-moz-opacity: 0.4;\r\nfilter: alpha( opacity = 40 );\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div class=&quot;dd-ct&quot; id=&quot;dd1-ct&quot;&gt;\r\n&lt;div class=&quot;dd-item&quot; id=&quot;dd1-item1&quot;&gt;\r\nItem 1.1\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;dd-item&quot; id=&quot;dd1-item2&quot;&gt;\r\nItem 1.2\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;dd-item&quot; id=&quot;dd1-item3&quot;&gt;\r\nItem 1.3\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n
and the following Javascript in index.js:<\/p>\n
Ext.BLANK_IMAGE_URL = '..\/lib\/ext\/resources\/images\/default\/s.gif';\r\nExt.namespace('Tutorial');\r\nExt.override(Ext.dd.DDProxy, {\r\nstartDrag: function(x, y){\r\nvar dragEl = Ext.get(this.getDragEl());\r\nvar el = Ext.get(this.getEl());\r\ndragEl.applyStyles({\r\nborder: '',\r\n'z-index': 2000\r\n});\r\ndragEl.update(el.dom.innerHTML);\r\ndragEl.addClass(el.dom.className + ' dd-proxy');\r\n},\r\nonDragEnter: function(e, targetId){\r\nvar target = Ext.get(targetId);\r\n\r\nif (target.dd instanceof Ext.dd.DDProxy) {\r\nthis._target = target;\r\nthis.updateTargetPosition();\r\n}\r\n},\r\nupdateTargetPosition: function(){\r\nvar _box = this._target.getBox();\r\nthis._crossOver = {\r\nx: (this._target.getLeft() + (_box.width \/ 2)),\r\ny: (this._target.getTop() + (_box.height \/ 2))\r\n}\r\n},\r\nonDragOver: function(e, targetId){\r\nif (this._target) {\r\nvar el = Ext.get(this.getEl());\r\nif (el.id != this._target.id) {\r\nif (this._placement == &quot;before&quot;) {\r\nel.insertBefore(this._target);\r\n}\r\nelse {\r\nel.insertAfter(this._target);\r\n}\r\nthis.updateTargetPosition();\r\nvar xy = e.getXY();\r\nthis._placement = (xy[1] &lt; this._crossOver.y) ? &quot;before&quot; : &quot;after&quot;;\r\n}\r\n}\r\n},\r\nendDrag: function(){\r\nvar el = Ext.get(this.getEl());\r\nel.applyStyles({\r\nposition: '',\r\nwidth: ''\r\n});\r\nthis._target = null;\r\nthis._placement = null;\r\nthis._crossOver = null;\r\n}\r\n});\r\n\r\nTutorial.dd = function(){\r\nreturn {\r\n\r\ninit: function(){\r\nvar dz1 = new Ext.dd.DropZone('dd1-ct', {\r\nddGroup: 'group'\r\n});\r\n\r\nvar dd11 = Ext.get('dd1-item1');\r\ndd11.dd = new Ext.dd.DDProxy('dd1-item1', 'group');\r\nvar dd12 = Ext.get('dd1-item2');\r\ndd12.dd = new Ext.dd.DDProxy('dd1-item2', 'group');\r\nvar dd13 = Ext.get('dd1-item3');\r\ndd13.dd = new Ext.dd.DDProxy('dd1-item3', 'group');\r\n\r\n}\r\n};\r\n}\r\n();\r\n<\/pre>\n
we suddenly have what we need.
\nFor now this only supports non-floating block elements, but I will extend it to also support floats.<\/p>\n
UPDATE 1<\/strong>
\nThis demo is now available at http:\/\/kinsey.no\/examples\/reorderlist\/<\/a><\/p>\n
UPDATE 2
\n<\/strong>I now have a version supporting float ready and will publish this when I have the time.
\nThere is also a reorderview available using a reading and updating from a standard datastore.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been using Ext JS for quite some time now, and I must say, I love it. There is quite good support for drag’n’drop here, but it lacks one thing; the precious reorder list. An example of such can be found here Since doing the google didn’t return anything like this I ended up implementing […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[34,1],"tags":[23,8,24],"_links":{"self":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/20"}],"collection":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":11,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":97,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/posts\/20\/revisions\/97"}],"wp:attachment":[{"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsey.no\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}