3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 Ext.onReady(function() {
8 var toolbar = new Ext.Toolbar({
11 new Ext.ux.ToolbarDroppable({
12 createItem: function(data) {
13 var record = data.draggedRecord;
15 return new Ext.Button({
16 text : record.get('company'),
17 iconCls: record.get('change') > 0 ? 'money-up' : 'money-down',
22 new Ext.ux.ToolbarReorderer({defaultReorderable: false})
24 items: ['Drag items here:']
27 // sample static data for the store
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']
43 // create the data store
44 var store = new Ext.data.ArrayStore({
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'}
55 store.loadData(myData);
57 var dataview = new Ext.DataView({
58 emptyText: 'No items to display',
61 overClass: 'x-view-over',
62 itemSelector: 'div.company',
64 tpl: new Ext.XTemplate(
66 '<div class="company">',
68 '<p class="{[values.change > 0 ? "up" : "down"]}">{[values.change > 0 ? "Up" : "Down"]} {pctChange} since {lastChange:date("d/m/Y")}',
74 dataview.on('render', function(v) {
75 dataview.dragZone = new Ext.dd.DragZone(v.getEl(), {
77 getDragData: function(e) {
79 var sourceEl = e.getTarget(v.itemSelector, 10);
82 d = sourceEl.cloneNode(true);
87 repairXY: Ext.fly(sourceEl).getXY(),
89 draggedRecord: v.getRecord(sourceEl)
94 getRepairXY: function() {
95 return this.dragData.repairXY;