add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / form / FormGrid.js

/**\r
 * This Form demonstrates the fact that by virtue of inheriting from the Ext.Container\r
 * class, an Ext.form.Panel can contain any Ext.Component. This includes all the\r
 * subclasses of Ext.Panel, including the GridPanel.\r
 *\r
 * The Grid demonstrates the use of creation of derived fields in a Record created using a\r
 * custom `convert` function, and the use of column renderers.\r
 *\r
 * The Form demonstrates the use of radio buttons grouped by name being set by the value\r
 * of the derived rating field.\r
 */\r
Ext.define('KitchenSink.view.form.FormGrid', {\r
    extend: 'Ext.form.Panel',\r
    xtype: 'form-grid',\r
    \r
    //<example>\r
    requires: [\r
        'Ext.grid.*',\r
        'Ext.form.*',\r
        'Ext.layout.container.Column',\r
        'KitchenSink.model.Company'\r
    ],\r
    \r
    exampleTitle: 'Dynamic Form interacting with an embedded Grid',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/Company.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            width: 750,\r
            gridWidth: 0.6,\r
            formWidth: 0.4,\r
            percentChangeColumnWidth: 75,\r
            lastUpdatedColumnWidth: 85,\r
            ratingColumnWidth: 30\r
        },\r
        neptune: {\r
            width: 880,\r
            gridWidth: 0.65,\r
            formWidth: 0.35,\r
            percentChangeColumnWidth: 100,\r
            lastUpdatedColumnWidth: 115,\r
            ratingColumnWidth: 60\r
        }\r
    },\r
    //</example>\r
    \r
    frame: true,\r
    title: 'Company data',\r
    bodyPadding: 5,\r
    layout: 'column',\r
    \r
    // In this example, configuration is applied at initComponent time\r
    // because it depends on profileInfo object that is generated for the\r
    // FormGrid instance.\r
    initComponent: function() {\r
        Ext.apply(this, {\r
            width: this.profileInfo.width,\r
            fieldDefaults: {\r
                labelAlign: 'left',\r
                labelWidth: 90,\r
                anchor: '100%',\r
                msgTarget: 'side'\r
            },\r
\r
            items: [{\r
                columnWidth: this.profileInfo.gridWidth,\r
                xtype: 'gridpanel',\r
                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
                }),\r
                height: 400,\r
                columns: [{\r
                    text: 'Company',\r
                    flex: 1,\r
                    sortable: true,\r
                    dataIndex: 'name'\r
                }, {\r
                    text: 'Price',\r
                    width: 75,\r
                    sortable: true,\r
                    dataIndex: 'price'\r
                }, {\r
                    text: 'Change',\r
                    width: 80,\r
                    sortable: true,\r
                    renderer: this.changeRenderer,\r
                    dataIndex: 'change'\r
                }, {\r
                    text: '% Change',\r
                    width: this.profileInfo.percentChangeColumnWidth,\r
                    sortable: true,\r
                    renderer: this.pctChangeRenderer,\r
                    dataIndex: 'pctChange'\r
                }, {\r
                    text: 'Last Updated',\r
                    width: this.profileInfo.lastUpdatedColumnWidth,\r
                    sortable: true,\r
                    formatter: 'date("m/d/Y")',\r
                    dataIndex: 'lastChange'\r
                }, {\r
                    text: 'Rating',\r
                    width: this.profileInfo.ratingColumnWidth,\r
                    sortable: true,\r
                    renderer: this.renderRating,\r
                    dataIndex: 'rating'\r
                }],\r
                listeners: {\r
                    scope: this,\r
                    selectionchange: this.onSelectionChange\r
                }\r
            }, {\r
                columnWidth: this.profileInfo.formWidth,\r
                margin: '0 0 0 10',\r
                xtype: 'fieldset',\r
                title:'Company details',\r
                layout: 'anchor',\r
                defaultType: 'textfield',\r
                items: [{\r
                    fieldLabel: 'Name',\r
                    name: 'name'\r
                },{\r
                    fieldLabel: 'Price',\r
                    name: 'price'\r
                },{\r
                    fieldLabel: '% Change',\r
                    name: 'pctChange'\r
                },{\r
                    xtype: 'datefield',\r
                    fieldLabel: 'Last Updated',\r
                    name: 'lastChange'\r
                }, {\r
                    xtype: 'radiogroup',\r
                    fieldLabel: 'Rating',\r
                    columns: 3,\r
                    defaults: {\r
                        name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once\r
                    },\r
                    items: [{\r
                        inputValue: '0',\r
                        boxLabel: 'A'\r
                    }, {\r
                        inputValue: '1',\r
                        boxLabel: 'B'\r
                    }, {\r
                        inputValue: '2',\r
                        boxLabel: 'C'\r
                    }]\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
    renderRating: function(val){\r
        switch (val) {\r
            case 0:\r
                return 'A';\r
            case 1:\r
                return 'B';\r
            case 2:\r
                return 'C';\r
        }\r
    },\r
    \r
    onSelectionChange: function(model, records) {\r
        var rec = records[0];\r
        if (rec) {\r
            this.getForm().loadRecord(rec);\r
        }\r
    }\r
});\r