← Back to branch summary

~crf-team/crf-irp/crf-irp

« back to all changes in this revision

Viewing changes to WebContent/js/extjs-2/examples/dd/dnd_grid_to_formpanel.js

  • Committer: Thomas
  • Date: 2010-03-10 23:55:46 UTC
  • Revision ID: thomas@daisybox-port-20100310235546-23635dk6x5asb1ca
Upgrade ExtJs 3.1.1
Upgrade Spring 3.0.1 + dependencies
Change Jawr JS post processor : YUI
Upgrade to last build of dwr 3 trunk 69 revision 3019(after build 116), upgrade jawr-dwr plugin 1.4 unofficiale from jose noheda, Jawr 3.2.1

Show diffs side-by-side

added added

removed removed

Lines of Context:
WebContent/js/extjs-2/examples/dd/dnd_grid_to_formpanel.js
1
 
/*
2
 
 * Ext JS Library 2.3.0
3
 
 * Copyright(c) 2006-2009, Ext JS, LLC.
4
 
 * licensing@extjs.com
5
 
 * 
6
 
 * http://extjs.com/license
7
 
 */
8
 
 
9
 
/*
10
 
 * Ext JS Library 2.1
11
 
 * Copyright(c) 2006-2008, Ext JS, LLC.
12
 
 * licensing@extjs.com
13
 
 * 
14
 
 * http://extjs.com/license
15
 
 */
16
 
 
17
 
Ext.onReady(function(){
18
 
  
19
 
    var myData = {
20
 
                records : [
21
 
                        { name : "Record 0", column1 : "0", column2 : "0" },
22
 
                        { name : "Record 1", column1 : "1", column2 : "1" },
23
 
                        { name : "Record 2", column1 : "2", column2 : "2" },
24
 
                        { name : "Record 3", column1 : "3", column2 : "3" },
25
 
                        { name : "Record 4", column1 : "4", column2 : "4" },
26
 
                        { name : "Record 5", column1 : "5", column2 : "5" },
27
 
                        { name : "Record 6", column1 : "6", column2 : "6" },
28
 
                        { name : "Record 7", column1 : "7", column2 : "7" },
29
 
                        { name : "Record 8", column1 : "8", column2 : "8" },
30
 
                        { name : "Record 9", column1 : "9", column2 : "9" }
31
 
                ]
32
 
        };
33
 
 
34
 
 
35
 
        // Generic fields array to use in both store defs.
36
 
        var fields = [
37
 
           {name: 'name', mapping : 'name'},
38
 
           {name: 'column1', mapping : 'column1'},
39
 
           {name: 'column2', mapping : 'column2'}
40
 
        ];
41
 
        
42
 
    // create the data store
43
 
    var gridStore = new Ext.data.JsonStore({
44
 
        fields : fields,
45
 
                data   : myData,
46
 
                root   : 'records'
47
 
    });
48
 
        
49
 
 
50
 
        // Column Model shortcut array
51
 
        var cols = [
52
 
                { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
53
 
                {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
54
 
                {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
55
 
        ];
56
 
    
57
 
        // declare the source Grid
58
 
    var grid = new Ext.grid.GridPanel({
59
 
                ddGroup          : 'gridDDGroup',
60
 
        store            : gridStore,
61
 
        columns          : cols,
62
 
                enableDragDrop   : true,
63
 
        stripeRows       : true,
64
 
        autoExpandColumn : 'name',
65
 
        width            : 325,
66
 
                region           : 'west',
67
 
        title            : 'Data Grid',
68
 
                selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
69
 
    });
70
 
 
71
 
        
72
 
        
73
 
        // Declare the text fields.  This could have been done inline, is easier to read
74
 
        // for folks learning :)
75
 
        var textField1 = new Ext.form.TextField({
76
 
                fieldLabel : 'Record Name',
77
 
                name       : 'name'
78
 
        });
79
 
        
80
 
        
81
 
        var textField2 = new Ext.form.TextField({
82
 
                fieldLabel : 'Column 1',
83
 
                name       : 'column1'
84
 
        });
85
 
        
86
 
        
87
 
        var textField3 = new Ext.form.TextField({
88
 
                fieldLabel : 'Column 2',
89
 
                name       : 'column2'
90
 
        });     
91
 
        
92
 
        
93
 
        // Setup the form panel 
94
 
        var formPanel = new Ext.form.FormPanel({
95
 
                region     : 'center',
96
 
                title      : 'Generic Form Panel',
97
 
                bodyStyle  : 'padding: 10px; background-color: #DFE8F6',
98
 
                labelWidth : 100,
99
 
                width      : 325,
100
 
                items      : [
101
 
                        textField1,
102
 
                        textField2,
103
 
                        textField3
104
 
                ]
105
 
        });
106
 
 
107
 
 
108
 
        
109
 
        //Simple 'border layout' panel to house both grids
110
 
        var displayPanel = new Ext.Panel({
111
 
                width    : 650,
112
 
                height   : 300,
113
 
                layout   : 'border',
114
 
                renderTo : 'panel',
115
 
                items    : [
116
 
                        grid,
117
 
                        formPanel
118
 
                ],
119
 
                bbar    : [
120
 
                        '->', // Fill
121
 
                        {
122
 
                                text    : 'Reset Example',
123
 
                                handler : function() {
124
 
                                        //refresh source grid
125
 
                                        gridStore.loadData(myData);
126
 
                                        formPanel.getForm().reset();
127
 
                                }
128
 
                        }
129
 
                ]
130
 
        });
131
 
        
132
 
 
133
 
        // used to add records to the destination stores
134
 
        var blankRecord =  Ext.data.Record.create(fields);
135
 
 
136
 
        /****
137
 
        * Setup Drop Targets
138
 
        ***/
139
 
        
140
 
        // This will make sure we only drop to the view container
141
 
        var formPanelDropTargetEl =  formPanel.body.dom;
142
 
        
143
 
        var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
144
 
                ddGroup     : 'gridDDGroup',
145
 
                notifyEnter : function(ddSource, e, data) {
146
 
                        
147
 
                        //Add some flare to invite drop.
148
 
                        formPanel.body.stopFx();
149
 
                        formPanel.body.highlight();
150
 
                },
151
 
                notifyDrop  : function(ddSource, e, data){
152
 
                        
153
 
                        // Reference the record (single selection) for readability
154
 
                        var selectedRecord = ddSource.dragData.selections[0];                                           
155
 
                        
156
 
                        
157
 
                        // Load the record into the form
158
 
                        formPanel.getForm().loadRecord(selectedRecord); 
159
 
                        
160
 
                        
161
 
                        // Delete record from the grid.  not really required.
162
 
                        ddSource.grid.store.remove(selectedRecord);     
163
 
 
164
 
                        return(true);
165
 
                }
166
 
        });     
167
 
        
168
 
 
169
 
});
 
 
b'\\ No newline at end of file'