docs/source/DataView-more.html

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