add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / dd / FieldToGrid.js

/**\r
 * This example assumes prior knowledge of using a GridPanel.\r
 *\r
 * This illustrates how a DragZone can manage an arbitrary number of drag sources, and how\r
 * a DropZone can manage an arbitrary number of targets.\r
 *\r
 * Fields are editable. Drag the fields into the grid using the label as the handle.\r
 */\r
Ext.define('KitchenSink.view.dd.FieldToGrid', {\r
    extend: 'Ext.container.Container',\r
    \r
    requires: [\r
        'Ext.ux.dd.CellFieldDropZone',\r
        'Ext.ux.dd.PanelFieldDragZone',\r
        'Ext.grid.*',\r
        'Ext.form.*',\r
        'KitchenSink.model.Company',\r
        'Ext.layout.container.VBox'\r
    ],    \r
    xtype: 'dd-field-to-grid',\r
    \r
    //<example>\r
    exampleTitle: 'Using a GridPanel as a DropZone managing each grid cell as a target',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/Company.js'\r
    },{\r
        type: 'Data',\r
        path: 'classic/samples/data/DataSets.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            percentChangeColumnWidth: 75,\r
            lastUpdatedColumnWidth: 85\r
        },\r
        neptune: {\r
            percentChangeColumnWidth: 100,\r
            lastUpdatedColumnWidth: 115\r
        }\r
    },\r
    //</example>\r
    \r
    width: 700,\r
    height: 450,\r
    layout: {\r
        type: 'vbox',\r
        align: 'stretch'\r
    },\r
    \r
    initComponent: function(){\r
        var store = new Ext.data.Store({\r
            model: KitchenSink.model.Company,\r
            proxy: {\r
                type: 'memory',\r
                reader: {\r
                    type: 'array'\r
                }\r
            },\r
            data: KitchenSink.data.DataSets.company\r
        }), group = this.id + 'ddGroup';\r
        \r
        Ext.apply(this, {\r
            items: [{\r
                flex: 1,\r
                xtype: 'gridpanel',\r
                plugins: new Ext.ux.dd.CellFieldDropZone({\r
                    ddGroup: group,\r
                    onCellDrop: function(field){\r
                        var sorter = store.sorters.first();\r
                        if (sorter && sorter.property == field) {\r
                            store.sort();\r
                        }\r
                    }\r
                }),\r
                store: store,\r
                columns: [{\r
                    id:'company',\r
                    header: 'Company', \r
                    sortable: true, \r
                    dataIndex: 'name', \r
                    flex: 1\r
                }, {\r
                    header: 'Price', \r
                    width: 75, \r
                    sortable: true, \r
                    formatter: 'usMoney',\r
                    dataIndex: 'price'\r
                }, {\r
                    header: 'Change', \r
                    width: 80, \r
                    sortable: true, \r
                    renderer: this.changeRenderer, \r
                    dataIndex: 'change'\r
                }, {\r
                    header: '% Change', \r
                    width: this.profileInfo.percentChangeColumnWidth,\r
                    sortable: true, \r
                    renderer: this.pctChangeRenderer, \r
                    dataIndex: 'pctChange'\r
                }, {\r
                    header: 'Last Updated', \r
                    width: this.profileInfo.lastUpdatedColumnWidth,\r
                    sortable: true,\r
                    formatter: 'date("m/d/Y")',\r
                    dataIndex: 'lastChange'\r
                }],\r
                stripeRows: true,\r
                title: 'Company Grid'\r
            }, {\r
                frame: true,\r
                margin: '10 0 0 0',\r
                bodyPadding: 5,\r
                plugins: new Ext.ux.dd.PanelFieldDragZone({\r
                    ddGroup: group\r
                }),\r
                defaults: {\r
                    labelWidth: 150\r
                },\r
                items: [{\r
                    xtype: 'textfield',\r
                    fieldLabel: 'Drag this text',\r
                    value: 'test'\r
                },{\r
                    xtype: 'numberfield',\r
                    fieldLabel: 'Drag this number',\r
                    value: '1.2'\r
                },{\r
                    xtype: 'datefield',\r
                    fieldLabel: 'Drag this date',\r
                    value: new Date()\r
                }]\r
            }]\r
        });\r
        this.callParent();\r
    },\r
    \r
    changeRenderer: function(val) {\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '</span>';\r
        } else if(val < 0) {\r
            return '<span style="color:red;">' + val + '</span>';\r
        }\r
        return val;\r
    },\r
    \r
    pctChangeRenderer: function(val){\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '%</span>';\r
        } else if(val < 0) {\r
            return '<span style="color:red;">' + val + '%</span>';\r
        }\r
        return val;\r
    }\r
});\r