field-to-grid-dd.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:12k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.1.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ // A DropZone which cooperates with DragZones whose dragData contains
  2. // a "field" property representing a form Field. Fields may be dropped onto
  3. // grid data cells containing a matching data type.
  4. Ext.ux.CellFieldDropZone = Ext.extend(Ext.dd.DropZone, {
  5.     constructor: function(){},
  6. //  Call the DropZone constructor using the View's scrolling element
  7. //  only after the grid has been rendered.
  8.     init: function(grid) {
  9.         if (grid.rendered) {
  10.             this.grid = grid;
  11.             this.view = grid.getView();
  12.             this.store = grid.getStore();
  13.             Ext.ux.CellFieldDropZone.superclass.constructor.call(this, this.view.scroller);
  14.         } else {
  15.             grid.on('render', this.init, this);
  16.         }
  17.     },
  18. //  Scroll the main configured Element when we drag close to the edge
  19.     containerScroll: true,
  20.     getTargetFromEvent: function(e) {
  21. //      Ascertain whether the mousemove is within a grid cell
  22.         var t = e.getTarget(this.view.cellSelector);
  23.         if (t) {
  24. //          We *are* within a grid cell, so ask the View exactly which one,
  25. //          Extract data from the Model to create a target object for
  26. //          processing in subsequent onNodeXXXX methods. Note that the target does
  27. //          not have to be a DOM element. It can be whatever the noNodeXXX methods are
  28. //          programmed to expect.
  29.             var rowIndex = this.view.findRowIndex(t);
  30.             var columnIndex = this.view.findCellIndex(t);
  31.             if ((rowIndex !== false) && (columnIndex !== false)) {
  32.                 return {
  33.                     node: t,
  34.                     record: this.store.getAt(rowIndex),
  35.                     fieldName: this.grid.getColumnModel().getDataIndex(columnIndex)
  36.                 };
  37.             }
  38.         }
  39.     },
  40. //  On Node enter, see if it is valid for us to drop the field on that type of column.
  41.     onNodeEnter: function(target, dd, e, dragData) {
  42.         delete this.dropOK;
  43.         if (!target) {
  44.             return;
  45.         }
  46. //      Check that a field is being dragged.
  47.         var f = dragData.field;
  48.         if (!f) {
  49.             return;
  50.         }
  51. //      Check whether the data type of the column being dropped on accepts the
  52. //      dragged field type. If so, set dropOK flag, and highlight the target node.
  53.         var type = target.record.fields.get(target.fieldName).type;
  54.         switch (type) {
  55.             case 'float':
  56.             case 'int':
  57.                 if (!f.isXType('numberfield')) {
  58.                     return;
  59.                 }
  60.                 break;
  61.             case 'date':
  62.                 if (!f.isXType('datefield')) {
  63.                     return;
  64.                 }
  65.                 break;
  66.             case 'boolean':
  67.                 if (!f.isXType('checkbox')) {
  68.                     return;
  69.                 }
  70.         }
  71.         this.dropOK = true;
  72.         Ext.fly(target.node).addClass('x-drop-target-active');
  73.     },
  74. //  Return the class name to add to the drag proxy. This provides a visual indication
  75. //  of drop allowed or not allowed.
  76.     onNodeOver: function(target, dd, e, dragData) {
  77.         return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
  78.     },
  79. //   nhighlight the target node.
  80.     onNodeOut: function(target, dd, e, dragData) {
  81.         Ext.fly(target.node).removeClass('x-drop-target-active');
  82.     },
  83. //  Process the drop event if we have previously ascertained that a drop is OK.
  84.     onNodeDrop: function(target, dd, e, dragData) {
  85.         if (this.dropOK) {
  86.             target.record.set(target.fieldName, dragData.field.getValue());
  87.             return true;
  88.         }
  89.     }
  90. });
  91. //  A class which makes Fields within a Panel draggable.
  92. //  the dragData delivered to a coooperating DropZone's methods contains
  93. //  the dragged Field in the property "field".
  94. Ext.ux.PanelFieldDragZone = Ext.extend(Ext.dd.DragZone, {
  95.     constructor: function(){},
  96. //  Call the DRagZone's constructor. The Panel must have been rendered.
  97.     init: function(panel) {
  98.         if (panel.nodeType) {
  99.             Ext.ux.PanelFieldDragZone.superclass.init.apply(this, arguments);
  100.         } else {
  101.             if (panel.rendered) {
  102.                 Ext.ux.PanelFieldDragZone.superclass.constructor.call(this, panel.getEl());
  103.                 var i = Ext.fly(panel.getEl()).select('input');
  104.                 i.unselectable();
  105.             } else {
  106.                 panel.on('afterlayout', this.init, this, {single: true});
  107.             }
  108.         }
  109.     },
  110.     scroll: false,
  111. //  On mousedown, we ascertain whether it is on one of our draggable Fields.
  112. //  If so, we collect data about the draggable object, and return a drag data
  113. //  object which contains our own data, plus a "ddel" property which is a DOM
  114. //  node which provides a "view" of the dragged data.
  115.     getDragData: function(e) {
  116.         var t = e.getTarget('input');
  117.         if (t) {
  118.             e.stopEvent();
  119. //          Ugly code to "detach" the drag gesture from the input field.
  120. //          Without this, Opera never changes the mouseover target from the input field
  121. //          even when dragging outside of the field - it just keeps selecting.
  122.             if (Ext.isOpera) {
  123.                 Ext.fly(t).on('mousemove', function(e1){
  124.                     t.style.visibility = 'hidden';
  125.                     (function(){
  126.                         t.style.visibility = '';
  127.                     }).defer(1);
  128.                 }, null, {single:true});
  129.             }
  130. //          Get the data we are dragging: the Field
  131. //          create a ddel for the drag proxy to display
  132.             var f = Ext.getCmp(t.id);
  133.             var d = document.createElement('div');
  134.             d.className = 'x-form-text';
  135.             d.appendChild(document.createTextNode(t.value));
  136.             Ext.fly(d).setWidth(f.getEl().getWidth());
  137.             return {
  138.                 field: f,
  139.                 ddel: d
  140.             };
  141.         }
  142.     },
  143. //  The coordinates to slide the drag proxy back to on failed drop.
  144.     getRepairXY: function() {
  145.         return this.dragData.field.getEl().getXY();
  146.     }
  147. });
  148. Ext.onReady(function(){
  149.     var myData = [
  150.         ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  151.         ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
  152.         ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
  153.         ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
  154.         ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
  155.         ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
  156.         ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
  157.         ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
  158.         ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
  159.         ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
  160.         ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
  161.         ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
  162.         ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
  163.         ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
  164.         ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
  165.         ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
  166.         ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
  167.         ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
  168.         ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
  169.         ['McDonald's Corporation',36.76,0.86,2.40,'9/1 12:00am'],
  170.         ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
  171.         ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
  172.         ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
  173.         ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
  174.         ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
  175.         ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
  176.         ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
  177.         ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
  178.         ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
  179.     ];
  180.     // example of custom renderer function
  181.     function change(val){
  182.         if(val > 0){
  183.             return '<span style="color:green;">' + val + '</span>';
  184.         }else if(val < 0){
  185.             return '<span style="color:red;">' + val + '</span>';
  186.         }
  187.         return val;
  188.     }
  189.     // example of custom renderer function
  190.     function pctChange(val){
  191.         if(val > 0){
  192.             return '<span style="color:green;">' + val + '%</span>';
  193.         }else if(val < 0){
  194.             return '<span style="color:red;">' + val + '%</span>';
  195.         }
  196.         return val;
  197.     }
  198.     // create the data store
  199.     var store = new Ext.data.ArrayStore({
  200.         fields: [
  201.            {name: 'company'},
  202.            {name: 'price', type: 'float'},
  203.            {name: 'change', type: 'float'},
  204.            {name: 'pctChange', type: 'float'},
  205.            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  206.         ]
  207.     });
  208.     store.loadData(myData);
  209.     
  210.     var helpWindow = new Ext.Window({
  211.         title: 'Source code',
  212.         width: 920,
  213.         height: 500,
  214.         closeAction: 'hide',
  215.         bodyCfg: {tag: 'textarea', readonly: true},
  216.         bodyStyle: {
  217.             backgroundColor: 'white',
  218.             margin: '0px',
  219.             border: '0px none'
  220.         },
  221.         listeners: {
  222.             render: function(w) {
  223.                 Ext.Ajax.request({
  224.                     url: 'field-to-grid-dd.js',
  225.                     success: function(r) {
  226.                         w.body.dom.value = r.responseText;
  227.                     }
  228.                 });
  229.             }
  230.         }
  231.     });
  232.     // create the Grid
  233.     var grid = new Ext.grid.GridPanel({
  234.         store: store,
  235.         columns: [
  236.             {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
  237.             {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
  238.             {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
  239.             {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
  240.             {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
  241.         ],
  242.         plugins: new Ext.ux.CellFieldDropZone(),
  243.         stripeRows: true,
  244.         autoExpandColumn: 'company',
  245.         height:350,
  246.         width:600,
  247.         title:'Array Grid',
  248.         bbar: new Ext.PagingToolbar({
  249.             buttons: [{
  250.                 text: 'View Source',
  251.                 handler: function() {
  252.                     helpWindow.show();
  253.                 }
  254.             }],
  255.             store: store,
  256.             pageSize: 25
  257.         })
  258.     });
  259.     grid.render('grid-example');
  260.     grid.getSelectionModel().selectFirstRow();
  261.     var f = new Ext.Panel({
  262.         frame: true,
  263.         layout: 'form',
  264.         width: 600,
  265.         plugins: new Ext.ux.PanelFieldDragZone(),
  266.         style: {
  267.             'margin-top': '10px'
  268.         },
  269.         labelWidth: 150,
  270.         items: [{
  271.             xtype: 'textfield',
  272.             fieldLabel: 'Drag this text',
  273.             value: 'test'
  274.         },{
  275.             xtype: 'numberfield',
  276.             fieldLabel: 'Drag this number',
  277.             value: '1.2'
  278.         },{
  279.             xtype: 'datefield',
  280.             fieldLabel: 'Drag this date',
  281.             value: new Date()
  282.         }],
  283.         renderTo: Ext.getBody()
  284.     });
  285. });