Turn TagEditor into combo with some predefined tags. (2cc8d3e9) · Commits · extjs / jsduck

template/app/view/comments/TagEditor.js

+34 −13

Original line number	Diff line number	Diff line
		@@ -5,14 +5,31 @@ Ext.define("Docs.view.comments.TagEditor", {
		extend: "Ext.container.Container",
		floating: true,
		hidden: true,
		style: "padding-top: 10px;",
		componentCls: "comments-tageditor",

		initComponent: function() {
		var tagnames = Ext.create('Ext.data.Store', {
		fields: ['name'],
		data: [
		{name: "Fixed"},
		{name: "Bug"},
		{name: "Fixed in 4.1"}
		]
		});

		this.items = [
		{
		xtype: 'textfield',
		xtype: 'combobox',
		listConfig: {
		cls: "comments-tageditor-boundlist"
		},
		store: tagnames,
		queryMode: "local",
		displayField: "name",
		valueField: "name",
		enableKeyEvents: true,
		listeners: {
		select: this.handleSelect,
		blur: this.destroy,
		keyup: this.onKeyUp,
		scope: this
		@@ -26,12 +43,20 @@ Ext.define("Docs.view.comments.TagEditor", {
		popup: function(el) {
		this.show();
		this.alignTo(el, 'bl', [-12, -2]);
		this.down("textfield").focus(true, 100);
		this.down("combobox").focus(true, 100);
		},

		onKeyUp: function(field, ev) {
		if (ev.keyCode === Ext.EventObject.ENTER) {
		var value = Ext.String.trim(field.getValue());
		this.handleSelect();
		}
		else if (ev.keyCode === Ext.EventObject.ESC) {
		this.destroy();
		}
		},

		handleSelect: function() {
		var value = Ext.String.trim(this.down("combobox").getValue());
		if (value) {
		/**
		* @event select
		@@ -42,8 +67,4 @@ Ext.define("Docs.view.comments.TagEditor", {
		}
		this.destroy();
		}
		else if (ev.keyCode === Ext.EventObject.ESC) {
		this.destroy();
		}
		}
		});
		No newline at end of file

+7 −0

Original line number	Diff line number	Diff line
		@@ -292,6 +292,13 @@ form.commentForm {
		font-weight: bold; } }


		// Editor for adding new tags.
		.comments-tageditor {
		padding-top: 10px; }
		.comments-tageditor-boundlist .x-boundlist-item-over {
		background: $moderator-color-light; }


		// Comments index page
		#commentindex {
		padding: 5px;