examples/ux/DataView-more.js

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