/** * This class is used to display instances of a data item in an input area. For example, * email addresses. * * To represent {@link Ext.data.Store Stores} of {@link Ext.data.Model records} using Chips, * see the {@link Ext.dataview.ChipView} class. * * @since 6.7.0 */Ext.define('Ext.Chip', { extend: 'Ext.Component', xtype: 'chip', /** * @property {Boolean} isChip * `true` in this class to identify an object this type, or subclass thereof. * @readonly */ isChip: true, focusable: false, tabIndex: null, classCls: Ext.baseCSSPrefix + 'chip', hasIconCls: Ext.baseCSSPrefix + 'has-icon', closableCls: Ext.baseCSSPrefix + 'closable', element: { reference: 'element', children: [{ reference: 'bodyElement', cls: Ext.baseCSSPrefix + 'body-el', children: [{ reference: 'iconElement', cls: Ext.baseCSSPrefix + 'icon-el ' + Ext.baseCSSPrefix + 'font-icon' }, { reference: 'textElement', cls: Ext.baseCSSPrefix + 'text-el' }, { reference: 'closeElement', cls: Ext.baseCSSPrefix + 'close-el ' + Ext.baseCSSPrefix + 'font-icon', listeners: { click: 'onClick' } }] }] }, config: { /** * @cfg {String} icon * Url to the icon image to use if you want an icon to appear on ths chip. * See {@link Ext#resolveResource} for details on locating application resources. */ icon: false, /** * @cfg {String} iconCls * The CSS class to apply to the icon on this chip. */ iconCls: null, /** * @cfg {String} text * The text to display in the chip. Mutually exclusive with the * {@link #cfg!displayField} config. */ text: null, /** * @cfg {Boolean} [closable=false] * Configure as `true` to show a close icon in the chip. */ closable: null, /** * @cfg {Function/String} closeHandler * @param {Ext.Chip} closeHandler.chip This Chip. * @param {Ext.event.Event} closeHandler.e The triggering event. * The handler function to run when the close tool is tapped. */ closeHandler: null, /** * @cfg {Object} scope * The scope (`this` reference) in which the configured {@link #closeHandler} will * be executed, unless the scope is a ViewController method name. * @accessor */ scope: null }, defaultBindProperty: 'text', onClick: function(e) { var me = this, handler = me.getCloseHandler(); Ext.callback(handler, me.getScope(), [me, e], 0, me); }, applyIcon: function(icon) { return Ext.resolveResource(icon); }, updateClosable: function(closable) { this.el.toggleCls(this.closableCls, closable); }, updateIcon: function(icon) { var me = this, iconEl = me.iconElement, hasIconCls = me.hasIconCls; if (icon) { iconEl.setStyle('background-image', 'url(' + icon + ')'); me.addCls(hasIconCls); } else { iconEl.setStyle('background-image', ''); if (!me.getIconCls()) { me.removeCls(hasIconCls); } } }, updateIconCls: function(iconCls, oldIconCls) { this.iconElement.replaceCls(oldIconCls, iconCls); this.el.toggleCls(this.hasIconCls, !!iconCls); }, updateText: function(text) { this.textElement.setHtml(Ext.htmlEncode(text)); }});