add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / grid / CellEditing.js

/**\r
 * This example shows how to enable users to edit the contents of a grid. Note that cell\r
 * editing is not recommeded on keyboardless touch devices.\r
 */\r
Ext.define('KitchenSink.view.grid.CellEditing', {\r
    extend: 'Ext.grid.Panel',\r
\r
    requires: [\r
        'Ext.selection.CellModel',\r
        'Ext.grid.*',\r
        'Ext.data.*',\r
        'Ext.util.*',\r
        'Ext.form.*',\r
        'KitchenSink.model.grid.Plant'\r
    ],\r
    xtype: 'cell-editing',\r
\r
    //<example>\r
    exampleTitle: 'Cell Editing Grid Example',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/grid/Plant.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            width: 600,\r
            height: 300,\r
            indoorWidth: 55,\r
            priceWidth: 70,\r
            avaliableWidth: 95\r
        },\r
        neptune: {\r
            width: 680,\r
            height: 350,\r
            indoorWidth: 90,\r
            priceWidth: 70,\r
            avaliableWidth: 95\r
        },\r
        'neptune-touch': {\r
            priceWidth: 115,\r
            availableWidth: 120\r
        }\r
    },\r
    //</example>\r
\r
    title: 'Edit Plants',\r
    frame: true,\r
\r
    initComponent: function() {\r
        this.cellEditing = new Ext.grid.plugin.CellEditing({\r
            clicksToEdit: 1\r
        });\r
\r
        Ext.apply(this, {\r
            width: this.profileInfo.width,\r
            height: this.profileInfo.height,\r
            plugins: [this.cellEditing],\r
            store: new Ext.data.Store({\r
                // destroy the store if the grid is destroyed\r
                autoDestroy: true,\r
                model: KitchenSink.model.grid.Plant,\r
                proxy: {\r
                    type: 'ajax',\r
                    // load remote data using HTTP\r
                    url: 'data/grid/plants.xml',\r
                    // specify a XmlReader (coincides with the XML format of the returned data)\r
                    reader: {\r
                        type: 'xml',\r
                        // records will have a 'plant' tag\r
                        record: 'plant'\r
                    }\r
                },\r
                sorters: [{\r
                    property: 'common',\r
                    direction:'ASC'\r
                }]\r
            }),\r
            columns: [{\r
                header: 'Common Name',\r
                dataIndex: 'common',\r
                flex: 1,\r
                editor: {\r
                    allowBlank: false\r
                }\r
            }, {\r
                header: 'Light',\r
                dataIndex: 'light',\r
                width: 130,\r
                editor: new Ext.form.field.ComboBox({\r
                    typeAhead: true,\r
                    triggerAction: 'all',\r
                    store: [\r
                        ['Shade','Shade'],\r
                        ['Mostly Shady','Mostly Shady'],\r
                        ['Sun or Shade','Sun or Shade'],\r
                        ['Mostly Sunny','Mostly Sunny'],\r
                        ['Sunny','Sunny']\r
                    ]\r
                })\r
            }, {\r
                header: 'Price',\r
                dataIndex: 'price',\r
                width: this.profileInfo.priceWidth,\r
                align: 'right',\r
                formatter: 'usMoney',\r
                editor: {\r
                    xtype: 'numberfield',\r
                    allowBlank: false,\r
                    minValue: 0,\r
                    maxValue: 100000\r
                }\r
            }, {\r
                header: 'Available',\r
                dataIndex: 'availDate',\r
                xtype: 'datecolumn',\r
                width: this.profileInfo.availableWidth,\r
                format: 'M d, Y',\r
                editor: {\r
                    xtype: 'datefield',\r
                    format: 'm/d/y',\r
                    minValue: '01/01/06',\r
                    disabledDays: [0, 6],\r
                    disabledDaysText: 'Plants are not available on the weekends'\r
                }\r
            }, {\r
                xtype: 'checkcolumn',\r
                header: 'Indoor?',\r
                dataIndex: 'indoor',\r
                width: this.profileInfo.indoorWidth,\r
                stopSelection: false\r
            }, {\r
                xtype: 'actioncolumn',\r
                width: 30,\r
                sortable: false,\r
                menuDisabled: true,\r
                items: [{\r
                    iconCls: 'cell-editing-delete-row',\r
                    tooltip: 'Delete Plant',\r
                    scope: this,\r
                    handler: this.onRemoveClick\r
                }]\r
            }],\r
            selModel: {\r
                type: 'cellmodel'\r
            },\r
            tbar: [{\r
                text: 'Add Plant',\r
                scope: this,\r
                handler: this.onAddClick\r
            }]\r
        });\r
\r
        this.callParent();\r
\r
        if (Ext.supports.Touch) {\r
            this.addDocked({\r
                xtype: 'header',\r
                title: '<b>Note that cell editing is not recommeded on keyboardless touch devices.</b>'\r
            });\r
        }\r
\r
        this.on('afterlayout', this.loadStore, this, {\r
            delay: 1,\r
            single: true\r
        });\r
    },\r
\r
    loadStore: function() {\r
        this.getStore().load();\r
    },\r
\r
    onAddClick: function(){\r
        // Create a model instance\r
        var rec = new KitchenSink.model.grid.Plant({\r
            common: '',\r
            light: 'Mostly Shady',\r
            price: 0,\r
            availDate: Ext.Date.clearTime(new Date()),\r
            indoor: false\r
        });\r
\r
        this.getStore().insert(0, rec);\r
        this.cellEditing.startEditByPosition({\r
            row: 0,\r
            column: 0\r
        });\r
    },\r
\r
    onRemoveClick: function(grid, rowIndex){\r
        this.getStore().removeAt(rowIndex);\r
    }\r
});\r