examples/ux/DataView-more.js

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