examples/view/data-view-plugins.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 \r
  10 Ext.DataView.LabelEditor = function(cfg, field){\r
  11     Ext.DataView.LabelEditor.superclass.constructor.call(this,\r
  12         field || new Ext.form.TextField({\r
  13             allowBlank: false,\r
  14             growMin:90,\r
  15             growMax:240,\r
  16             grow:true,\r
  17             selectOnFocus:true\r
  18         }), cfg\r
  19     );\r
  20 }\r
  21 \r
  22 Ext.extend(Ext.DataView.LabelEditor, Ext.Editor, {\r
  23     alignment: "tl-tl",\r
  24     hideEl : false,\r
  25     cls: "x-small-editor",\r
  26     shim: false,\r
  27     completeOnEnter: true,\r
  28     cancelOnEsc: true,\r
  29     labelSelector: 'span.x-editable',\r
  30 \r
  31     init : function(view){\r
  32         this.view = view;\r
  33         view.on('render', this.initEditor, this);\r
  34         this.on('complete', this.onSave, this);\r
  35     },\r
  36 \r
  37     initEditor : function(){\r
  38         this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});\r
  39     },\r
  40 \r
  41     onMouseDown : function(e, target){\r
  42         if(!e.ctrlKey && !e.shiftKey){\r
  43             var item = this.view.findItemFromChild(target);\r
  44             e.stopEvent();\r
  45             var record = this.view.store.getAt(this.view.indexOf(item));\r
  46             this.startEdit(target, record.data[this.dataIndex]);\r
  47             this.activeRecord = record;\r
  48         }else{\r
  49             e.preventDefault();\r
  50         }\r
  51     },\r
  52 \r
  53     onSave : function(ed, value){\r
  54         this.activeRecord.set(this.dataIndex, value);\r
  55     }\r
  56 });\r
  57 \r
  58 \r
  59 Ext.DataView.DragSelector = function(cfg){\r
  60     cfg = cfg || {};\r
  61     var view, regions, proxy, tracker;\r
  62     var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);\r
  63     var dragSafe = cfg.dragSafe === true;\r
  64 \r
  65     this.init = function(dataView){\r
  66         view = dataView;\r
  67         view.on('render', onRender);\r
  68     };\r
  69 \r
  70     function fillRegions(){\r
  71         rs = [];\r
  72         view.all.each(function(el){\r
  73             rs[rs.length] = el.getRegion();\r
  74         });\r
  75         bodyRegion = view.el.getRegion();\r
  76     }\r
  77 \r
  78     function cancelClick(){\r
  79         return false;\r
  80     }\r
  81 \r
  82     function onBeforeStart(e){\r
  83         return !dragSafe || e.target == view.el.dom;\r
  84     }\r
  85 \r
  86     function onStart(e){\r
  87         view.on('containerclick', cancelClick, view, {single:true});\r
  88         if(!proxy){\r
  89             proxy = view.el.createChild({cls:'x-view-selector'});\r
  90         }else{\r
  91             proxy.setDisplayed('block');\r
  92         }\r
  93         fillRegions();\r
  94         view.clearSelections();\r
  95     }\r
  96 \r
  97     function onDrag(e){\r
  98         var startXY = tracker.startXY;\r
  99         var xy = tracker.getXY();\r
 100 \r
 101         var x = Math.min(startXY[0], xy[0]);\r
 102         var y = Math.min(startXY[1], xy[1]);\r
 103         var w = Math.abs(startXY[0] - xy[0]);\r
 104         var h = Math.abs(startXY[1] - xy[1]);\r
 105 \r
 106         dragRegion.left = x;\r
 107         dragRegion.top = y;\r
 108         dragRegion.right = x+w;\r
 109         dragRegion.bottom = y+h;\r
 110 \r
 111         dragRegion.constrainTo(bodyRegion);\r
 112         proxy.setRegion(dragRegion);\r
 113 \r
 114         for(var i = 0, len = rs.length; i < len; i++){\r
 115             var r = rs[i], sel = dragRegion.intersect(r);\r
 116             if(sel && !r.selected){\r
 117                 r.selected = true;\r
 118                 view.select(i, true);\r
 119             }else if(!sel && r.selected){\r
 120                 r.selected = false;\r
 121                 view.deselect(i);\r
 122             }\r
 123         }\r
 124     }\r
 125 \r
 126     function onEnd(e){\r
 127         if(proxy){\r
 128             proxy.setDisplayed(false);\r
 129         }\r
 130     }\r
 131 \r
 132     function onRender(view){\r
 133         tracker = new Ext.dd.DragTracker({\r
 134             onBeforeStart: onBeforeStart,\r
 135             onStart: onStart,\r
 136             onDrag: onDrag,\r
 137             onEnd: onEnd\r
 138         });\r
 139         tracker.initEl(view.el);\r
 140     }\r
 141 };