examples/toolbar/droppable.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function() {
   8     var toolbar = new Ext.Toolbar({
   9         renderTo: 'docbody',
  10         plugins : [
  11             new Ext.ux.ToolbarDroppable({
  12                 createItem: function(data) {
  13                     var record = data.draggedRecord;
  14
  15                     return new Ext.Button({
  16                         text   : record.get('company'),
  17                         iconCls: record.get('change') > 0 ? 'money-up' : 'money-down',
  18                         reorderable: true
  19                     });
  20                 }
  21             }),
  22             new Ext.ux.ToolbarReorderer({defaultReorderable: false})
  23         ],
  24         items: ['Drag items here:']
  25     });
  26
  27     // sample static data for the store
  28     var myData = [
  29         [1,  '3m Co',71.72,0.02,0.03,'9/1 12:00am'],
  30         [2,  'Alcoa',29.01,0.42,1.47,'9/1 12:00am'],
  31         [3,  'Altria Group',83.81,-0.28,0.34,'9/1 12:00am'],
  32         [4,  'American Express',52.55,0.01,0.02,'9/1 12:00am'],
  33         [5,  'Microsoft',25.84,-0.14,0.54,'9/1 12:00am'],
  34         [6,  'Pfizer Inc',27.96,-0.4,1.45,'9/1 12:00am'],
  35         [7,  'Coca-Cola',45.07,0.26,0.58,'9/1 12:00am'],
  36         [8,  'Home Depot.',34.64,0.35,1.02,'9/1 12:00am'],
  37         [9,  'Procter & Gamble',61.91,0.01,0.02,'9/1 12:00am'],
  38         [10, 'United Technologies',63.26,-0.55,0.88,'9/1 12:00am'],
  39         [11, 'Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
  40         [12, 'Wal-Mart Stores',45.45,-0.73,1.63,'9/1 12:00am']
  41     ];
  42
  43     // create the data store
  44     var store = new Ext.data.ArrayStore({
  45         fields: [
  46             {name: 'id'},
  47             {name: 'company'},
  48             {name: 'price',      type: 'float'},
  49             {name: 'change',     type: 'float'},
  50             {name: 'pctChange',  type: 'float'},
  51             {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  52         ]
  53     });
  54
  55     store.loadData(myData);
  56
  57     var dataview = new Ext.DataView({
  58         emptyText:    'No items to display',
  59         singleSelect: true,
  60         autoScroll:   true,
  61         overClass:    'x-view-over',
  62         itemSelector: 'div.company',
  63         store:        store,
  64         tpl:          new Ext.XTemplate(
  65           '<tpl for=".">',
  66               '<div class="company">',
  67                   '<h3>{company}</h3>',
  68                   '<p class="{[values.change > 0 ? "up" : "down"]}">{[values.change > 0 ? "Up" : "Down"]} {pctChange} since {lastChange:date("d/m/Y")}',
  69               '</div>',
  70           '</tpl>'
  71         )
  72     });
  73
  74     dataview.on('render', function(v) {
  75         dataview.dragZone = new Ext.dd.DragZone(v.getEl(), {
  76
  77             getDragData: function(e) {
  78
  79                 var sourceEl = e.getTarget(v.itemSelector, 10);
  80
  81                 if (sourceEl) {
  82                     d = sourceEl.cloneNode(true);
  83                     d.id = Ext.id();
  84                     return {
  85                         ddel: d,
  86                         sourceEl: sourceEl,
  87                         repairXY: Ext.fly(sourceEl).getXY(),
  88                         sourceStore: v.store,
  89                         draggedRecord: v.getRecord(sourceEl)
  90                     };
  91                 }
  92             },
  93
  94             getRepairXY: function() {
  95                 return this.dragData.repairXY;
  96             }
  97         });
  98     });
  99
 100     new Ext.Panel({
 101         renderTo: 'docbody',
 102         tbar    : toolbar,
 103         border  : true,
 104         width   : 600,
 105         height  : 400,
 106         layout  : 'fit',
 107         items   : dataview
 108     });
 109 });