add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / calendar / src / form / field / CalendarCombo.js

/**\r
 * @class Ext.calendar.form.field.CalendarCombo\r
 * @extends Ext.form.ComboBox\r
 * <p>A custom combo used for choosing from the list of available calendars to assign an event to.</p>\r
 * <p>This is pretty much a standard combo that is simply pre-configured for the options needed by the\r
 * calendar components. The default configs are as follows:<pre><code>\r
    fieldLabel: 'Calendar',\r
    triggerAction: 'all',\r
    queryMode: 'local',\r
    forceSelection: true,\r
    selectOnFocus: true,\r
    width: 200\r
</code></pre>\r
 * @constructor\r
 * @param {Object} config The config object\r
 */\r
Ext.define('Ext.calendar.form.field.CalendarCombo', {\r
    extend: 'Ext.form.field.ComboBox',\r
    alias: 'widget.calendarpicker',\r
    requires: [\r
        'Ext.calendar.data.CalendarMappings'\r
    ],\r
\r
    fieldLabel: 'Calendar',\r
    triggerAction: 'all',\r
    queryMode: 'local',\r
    forceSelection: true,\r
    selectOnFocus: true,\r
    \r
    // private\r
    defaultCls: 'ext-color-default',\r
\r
    // private\r
    initComponent: function(){\r
        this.valueField = Ext.calendar.data.CalendarMappings.CalendarId.name;\r
        this.displayField = Ext.calendar.data.CalendarMappings.Title.name;\r
    \r
        this.listConfig = Ext.apply(this.listConfig || {}, {\r
            getInnerTpl: this.getListItemTpl\r
        });\r
        \r
        this.callParent(arguments);\r
    },\r
    \r
    // private\r
    getListItemTpl: function(displayField) {\r
        return '<div class="x-combo-list-item ext-color-{' + Ext.calendar.data.CalendarMappings.CalendarId.name +\r
                '}"><div class="ext-cal-picker-icon">&#160;</div>{' + displayField + '}</div>';\r
    },\r
    \r
    // private\r
    afterRender: function(){\r
        this.callParent(arguments);\r
        \r
        this.wrap = this.el.down('.x-form-text-wrap');\r
        this.wrap.addCls('ext-calendar-picker');\r
        \r
        this.icon = Ext.core.DomHelper.append(this.wrap, {\r
            tag: 'div', cls: 'ext-cal-picker-icon ext-cal-picker-mainicon'\r
        });\r
    },\r
    \r
    /* @private\r
     * Value can be a data value or record, or an array of values or records.\r
     */\r
    getStyleClass: function(value){\r
        var val = value;\r
        \r
        if (!Ext.isEmpty(val)) {\r
            if (Ext.isArray(val)) {\r
                val = val[0];\r
            }\r
            return 'ext-color-' + (val.data ? val.data[Ext.calendar.data.CalendarMappings.CalendarId.name] : val); \r
        }\r
        return '';\r
    },\r
    \r
    // inherited docs\r
    setValue: function(value) {\r
        if (!value && this.store.getCount() > 0) {\r
            // ensure that a valid value is always set if possible\r
            value = this.store.getAt(0).data[Ext.calendar.data.CalendarMappings.CalendarId.name];\r
        }\r
        \r
        if (this.wrap && value) {\r
            var currentClass = this.getStyleClass(this.getValue()),\r
                newClass = this.getStyleClass(value);\r
            \r
            this.wrap.replaceCls(currentClass, newClass);\r
        }\r
        \r
        this.callParent(arguments);\r
    }\r
});