add extjs 6.0.1 sources

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

/**\r
 * Demonstrates the rating widget in a form and grid column.\r
 */\r
Ext.define('KitchenSink.view.form.RatingForm', {\r
    extend: 'Ext.panel.Panel',\r
    xtype: 'form-rating',\r
\r
    requires: [\r
        'Ext.ux.rating.Picker'\r
    ],\r
    //<example>\r
    exampleTitle: 'Rating Form',\r
    otherContent: [{\r
        type: 'Store',\r
        path: 'classic/samples/store/BigData.js'\r
    }, {\r
        type: 'Model',\r
        path: 'classic/samples/model/grid/Employee.js'\r
    }],\r
    //</example>\r
    \r
    title: 'Rating Form',\r
    viewModel: true,\r
\r
    bodyPadding: 10,\r
    width: 520,\r
    height: 500,\r
    minHeight: 400,\r
    resizable: true,\r
    frame: true,\r
    layout: {\r
        type: 'vbox',\r
        align: 'stretch'\r
    },\r
    defaultType: 'textfield',\r
\r
    items: [{\r
        xtype: 'grid',\r
        flex: 1,\r
        reference: 'employeeGrid',\r
        store: {\r
            type: 'big-data'\r
        },\r
        margin: '0 0 10 0',\r
        columns:[{\r
            xtype: 'rownumberer',\r
            width: 40,\r
            sortable: false\r
        }, {\r
            text: 'Id',\r
            sortable: true,\r
            dataIndex: 'employeeNo',\r
            groupable: false,\r
            width: 80\r
        }, {\r
            text: 'Name',\r
            sortable: true,\r
            dataIndex: 'name',\r
            groupable: false,\r
            flex: 1\r
        },{\r
            text: 'Rating',\r
            columns: [{\r
                xtype: 'widgetcolumn',\r
                text: 'Last Year',\r
                width: 100,\r
                dataIndex: 'ratingLastYear',\r
                widget: {\r
                    xtype: 'rating',\r
                    overStyle: 'color: orange;'\r
                }\r
            },{\r
                xtype: 'widgetcolumn',\r
                text: 'This Year',\r
                width: 100,\r
                dataIndex: 'ratingThisYear',\r
                widget: {\r
                    xtype: 'rating',\r
                    selectedStyle: 'color: rgb(96, 169, 23);',\r
                    overStyle: 'color: rgb(23, 23, 189);',\r
                    tooltip: [\r
                        '<div style="white-space: nowrap;"><b>',\r
                            'Current: {[this.rank[values.value]]}',\r
                        '</b>',\r
                        '<tpl if="trackOver && tracking !== value">',\r
                            '<br><span style="color:#aaa">(click to set to ',\r
                            '{[this.rank[values.tracking]]}',\r
                            ')</span>',\r
                        '</tpl></span>',\r
                        {\r
                            rank: {\r
                                1: 'Probation',\r
                                2: 'Needs Improvement',\r
                                3: 'Valued Contributor',\r
                                4: 'Excellent',\r
                                5: 'Rock Star'\r
                            }\r
                        }\r
                    ]\r
                }\r
            }]\r
        }]\r
    },{\r
        fieldLabel: 'First Name',\r
        emptyText: 'First Name',\r
        bind: {\r
            disabled: '{!employeeGrid.selection}',\r
            value: '{employeeGrid.selection.forename}'\r
        }\r
    }, {\r
        fieldLabel: 'Last Name',\r
        emptyText: 'Last Name',\r
        bind: {\r
            disabled: '{!employeeGrid.selection}',\r
            value: '{employeeGrid.selection.surname}'\r
        }\r
    }, {\r
        fieldLabel: 'Email',\r
        vtype: 'email',\r
        bind: {\r
            disabled: '{!employeeGrid.selection}',\r
            value: '{employeeGrid.selection.email}'\r
        }\r
    }, {\r
        xtype: 'datefield',\r
        fieldLabel: 'Date of Birth',\r
        allowBlank: false,\r
        maxValue: new Date(),\r
        bind: {\r
            disabled: '{!employeeGrid.selection}',\r
            value: '{employeeGrid.selection.dob}'\r
        }\r
    }, {\r
        xtype: 'fieldcontainer',\r
        fieldLabel: 'Current\u00a0Rating',\r
        bind: {\r
            disabled: '{!employeeGrid.selection}'\r
        },\r
        items: [{\r
            xtype: 'rating',\r
            scale: '150%',\r
            bind: '{employeeGrid.selection.ratingThisYear}'\r
        }]\r
    }]\r
});\r