<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
- <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
</script>
</head>
<body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-view-DragZone'>/**
-</span> * @class Ext.view.DragZone
+ <pre class="prettyprint lang-js"><span id='Ext-grid-header-DragZone'>/**
+</span> * @class Ext.grid.header.DragZone
* @extends Ext.dd.DragZone
* @private
*/
-Ext.define('Ext.view.DragZone', {
+Ext.define('Ext.grid.header.DragZone', {
extend: 'Ext.dd.DragZone',
- containerScroll: false,
-
- constructor: function(config) {
- var me = this;
-
- Ext.apply(me, config);
-
- // Create a ddGroup unless one has been configured.
- // User configuration of ddGroups allows users to specify which
- // DD instances can interact with each other. Using one
- // based on the id of the View would isolate it and mean it can only
- // interact with a DropZone on the same View also using a generated ID.
- if (!me.ddGroup) {
- me.ddGroup = 'view-dd-zone-' + me.view.id;
- }
-
- // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
- // So a View's DragZone cannot use the View's main element because the DropZone must use that
- // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
- // main element which handles scrolling.
- // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
- // is transient; DataView's recreate the internal structure dynamically as data changes.
- // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
- me.callParent([me.view.el.dom.parentNode]);
-
- me.ddel = Ext.get(document.createElement('div'));
- me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
+ colHeaderCls: Ext.baseCSSPrefix + 'column-header',
+ maxProxyWidth: 120,
+
+ constructor: function(headerCt) {
+ this.headerCt = headerCt;
+ this.ddGroup = this.getDDGroup();
+ this.callParent([headerCt.el]);
+ this.proxy.el.addCls(Ext.baseCSSPrefix + 'grid-col-dd');
},
- init: function(id, sGroup, config) {
- this.initTarget(id, sGroup, config);
- this.view.mon(this.view, {
- itemmousedown: this.onItemMouseDown,
- scope: this
- });
+ getDDGroup: function() {
+ return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;
},
- onItemMouseDown: function(view, record, item, index, e) {
- if (!this.isPreventDrag(e, record, item, index)) {
- this.handleMouseDown(e);
-
- // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
- // if the mousedowned record is selected
- if (view.getSelectionModel().selectionMode == 'MULTI' && !e.ctrlKey && view.getSelectionModel().isSelected(record)) {
- return false;
+ getDragData: function(e) {
+ var header = e.getTarget('.'+this.colHeaderCls),
+ headerCmp;
+
+ if (header) {
+ headerCmp = Ext.getCmp(header.id);
+ if (!this.headerCt.dragging && headerCmp.draggable && !(headerCmp.isOnLeftEdge(e) || headerCmp.isOnRightEdge(e))) {
+ var ddel = document.createElement('div');
+ ddel.innerHTML = Ext.getCmp(header.id).text;
+ return {
+ ddel: ddel,
+ header: headerCmp
+ };
}
}
- },
-
- // private template method
- isPreventDrag: function(e) {
return false;
},
- getDragData: function(e) {
- var view = this.view,
- item = e.getTarget(view.getItemSelector()),
- record, selectionModel, records;
-
- if (item) {
- record = view.getRecord(item);
- selectionModel = view.getSelectionModel();
- records = selectionModel.getSelection();
- return {
- copy: this.view.copy || (this.view.allowCopy && e.ctrlKey),
- event: new Ext.EventObjectImpl(e),
- view: view,
- ddel: this.ddel,
- item: item,
- records: records,
- fromPosition: Ext.fly(item).getXY()
- };
- }
+ onBeforeDrag: function() {
+ return !(this.headerCt.dragging || this.disabled);
},
- onInitDrag: function(x, y) {
- var me = this,
- data = me.dragData,
- view = data.view,
- selectionModel = view.getSelectionModel(),
- record = view.getRecord(data.item),
- e = data.event;
-
- // Update the selection to match what would have been selected if the user had
- // done a full click on the target node rather than starting a drag from it
- if (!selectionModel.isSelected(record) || e.hasModifier()) {
- selectionModel.selectWithEvent(record, e, true);
- }
- data.records = selectionModel.getSelection();
+ onInitDrag: function() {
+ this.headerCt.dragging = true;
+ this.callParent(arguments);
+ },
- me.ddel.update(me.getDragText());
- me.proxy.update(me.ddel.dom);
- me.onStartDrag(x, y);
- return true;
+ onDragDrop: function() {
+ this.headerCt.dragging = false;
+ this.callParent(arguments);
},
- getDragText: function() {
- var count = this.dragData.records.length;
- return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
+ afterRepair: function() {
+ this.callParent();
+ this.headerCt.dragging = false;
},
- getRepairXY : function(e, data){
- return data ? data.fromPosition : false;
+ getRepairXY: function() {
+ return this.dragData.header.el.getXY();
+ },
+
+ disable: function() {
+ this.disabled = true;
+ },
+
+ enable: function() {
+ this.disabled = false;
}
-});</pre>
+});
+</pre>
</body>
</html>
git.ithinksw.org / extjs.git / blobdiff