examples/docs/source/DataView-more.html

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