-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require(['*']);
+
Ext.onReady(function(){
- var myData = {
- records : [
- { name : "Record 0", column1 : "0", column2 : "0" },
- { name : "Record 1", column1 : "1", column2 : "1" },
- { name : "Record 2", column1 : "2", column2 : "2" },
- { name : "Record 3", column1 : "3", column2 : "3" },
- { name : "Record 4", column1 : "4", column2 : "4" },
- { name : "Record 5", column1 : "5", column2 : "5" },
- { name : "Record 6", column1 : "6", column2 : "6" },
- { name : "Record 7", column1 : "7", column2 : "7" },
- { name : "Record 8", column1 : "8", column2 : "8" },
- { name : "Record 9", column1 : "9", column2 : "9" }
- ]
- };
-
-
- // Generic fields array to use in both store defs.
- var fields = [
- {name: 'name', mapping : 'name'},
- {name: 'column1', mapping : 'column1'},
- {name: 'column2', mapping : 'column2'}
- ];
+ var myData = [
+ { name : "Record 0", column1 : "0", column2 : "0" },
+ { name : "Record 1", column1 : "1", column2 : "1" },
+ { name : "Record 2", column1 : "2", column2 : "2" },
+ { name : "Record 3", column1 : "3", column2 : "3" },
+ { name : "Record 4", column1 : "4", column2 : "4" },
+ { name : "Record 5", column1 : "5", column2 : "5" },
+ { name : "Record 6", column1 : "6", column2 : "6" },
+ { name : "Record 7", column1 : "7", column2 : "7" },
+ { name : "Record 8", column1 : "8", column2 : "8" },
+ { name : "Record 9", column1 : "9", column2 : "9" }
+ ];
+
+ // Generic fields array to use in both store defs.
+ Ext.define('DataObject', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'name', mapping : 'name'},
+ {name: 'column1', mapping : 'column1'},
+ {name: 'column2', mapping : 'column2'}
+ ]
+ });
// create the data store
- var gridStore = new Ext.data.JsonStore({
- fields : fields,
- data : myData,
- root : 'records'
+ var gridStore = Ext.create('Ext.data.Store', {
+ model : 'DataObject',
+ data : myData
});
-
- // Column Model shortcut array
- var cols = [
- { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
- {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
- {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
- ];
-
- // declare the source Grid
- var grid = new Ext.grid.GridPanel({
- ddGroup : 'gridDDGroup',
+ // Column Model shortcut array
+ var columns = [
+ { id : 'name', flex: 1, header: "Record Name", sortable: true, dataIndex: 'name'},
+ {header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
+ {header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
+ ];
+
+ // declare the source Grid
+ var grid = Ext.create('Ext.grid.Panel', {
+ viewConfig: {
+ plugins: {
+ ddGroup: 'GridExample',
+ ptype: 'gridviewdragdrop',
+ enableDrop: false
+ }
+ },
store : gridStore,
- columns : cols,
- enableDragDrop : true,
+ columns : columns,
+ enableDragDrop : true,
stripeRows : true,
- autoExpandColumn : 'name',
width : 325,
- region : 'west',
+ margins : '0 2 0 0',
+ region : 'west',
title : 'Data Grid',
- selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
+ selModel : Ext.create('Ext.selection.RowModel', {singleSelect : true})
});
+ // Declare the text fields. This could have been done inline, is easier to read
+ // for folks learning :)
+ var textField1 = Ext.create('Ext.form.field.Text', {
+ fieldLabel : 'Record Name',
+ name : 'name'
+ });
+ var textField2 = Ext.create('Ext.form.field.Text', {
+ fieldLabel : 'Column 1',
+ name : 'column1'
+ });
- // Declare the text fields. This could have been done inline, is easier to read
- // for folks learning :)
- var textField1 = new Ext.form.TextField({
- fieldLabel : 'Record Name',
- name : 'name'
- });
-
-
- var textField2 = new Ext.form.TextField({
- fieldLabel : 'Column 1',
- name : 'column1'
- });
-
-
- var textField3 = new Ext.form.TextField({
- fieldLabel : 'Column 2',
- name : 'column2'
- });
-
-
- // Setup the form panel
- var formPanel = new Ext.form.FormPanel({
- region : 'center',
- title : 'Generic Form Panel',
- bodyStyle : 'padding: 10px; background-color: #DFE8F6',
- labelWidth : 100,
- width : 325,
- items : [
- textField1,
- textField2,
- textField3
- ]
- });
-
-
-
- //Simple 'border layout' panel to house both grids
- var displayPanel = new Ext.Panel({
- width : 650,
- height : 300,
- layout : 'border',
- renderTo : 'panel',
- items : [
- grid,
- formPanel
- ],
- bbar : [
- '->', // Fill
- {
- text : 'Reset Example',
- handler : function() {
- //refresh source grid
- gridStore.loadData(myData);
- formPanel.getForm().reset();
- }
- }
- ]
- });
-
-
- // used to add records to the destination stores
- var blankRecord = Ext.data.Record.create(fields);
-
- /****
- * Setup Drop Targets
- ***/
-
- // This will make sure we only drop to the view container
- var formPanelDropTargetEl = formPanel.body.dom;
+ var textField3 = Ext.create('Ext.form.field.Text', {
+ fieldLabel : 'Column 2',
+ name : 'column2'
+ });
- var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
- ddGroup : 'gridDDGroup',
- notifyEnter : function(ddSource, e, data) {
+ // Setup the form panel
+ var formPanel = Ext.create('Ext.form.Panel', {
+ region : 'center',
+ title : 'Generic Form Panel',
+ bodyStyle : 'padding: 10px; background-color: #DFE8F6',
+ labelWidth : 100,
+ width : 325,
+ margins : '0 0 0 3',
+ items : [
+ textField1,
+ textField2,
+ textField3
+ ]
+ });
- //Add some flare to invite drop.
- formPanel.body.stopFx();
- formPanel.body.highlight();
- },
- notifyDrop : function(ddSource, e, data){
+ //Simple 'border layout' panel to house both grids
+ var displayPanel = Ext.create('Ext.Panel', {
+ width : 650,
+ height : 300,
+ layout : 'border',
+ renderTo : 'panel',
+ bodyPadding: '5',
+ items : [
+ grid,
+ formPanel
+ ],
+ bbar : [
+ '->', // Fill
+ {
+ text : 'Reset Example',
+ handler : function() {
+ //refresh source grid
+ gridStore.loadData(myData);
+ formPanel.getForm().reset();
+ }
+ }
+ ]
+ });
- // Reference the record (single selection) for readability
- var selectedRecord = ddSource.dragData.selections[0];
+ /****
+ * Setup Drop Targets
+ ***/
+ // This will make sure we only drop to the view container
+ var formPanelDropTargetEl = formPanel.body.dom;
- // Load the record into the form
- formPanel.getForm().loadRecord(selectedRecord);
+ var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', formPanelDropTargetEl, {
+ ddGroup: 'GridExample',
+ notifyEnter: function(ddSource, e, data) {
+ //Add some flare to invite drop.
+ formPanel.body.stopAnimation();
+ formPanel.body.highlight();
+ },
+ notifyDrop : function(ddSource, e, data){
- // Delete record from the grid. not really required.
- ddSource.grid.store.remove(selectedRecord);
+ // Reference the record (single selection) for readability
+ var selectedRecord = ddSource.dragData.records[0];
- return(true);
- }
- });
+ // Load the record into the form
+ formPanel.getForm().loadRecord(selectedRecord);
+ // Delete record from the source store. not really required.
+ ddSource.view.store.remove(selectedRecord);
-});
\ No newline at end of file
+ return true;
+ }
+ });
+});
git.ithinksw.org / extjs.git / blobdiff