Refactor select/deselect behaviour to separate class. (95cf9b3e) · Commits · extjs / jsduck

template/app/view/SimpleSelectBehavior.js

0 → 100644

+61 −0

Original line number	Diff line number	Diff line
		/**
		* Helper to achieve the select/deselect behaviour that's more useful
		* for our purposes when dealing with simple selection model.
		*
		* In Ext.selection.Model when one item is already selected and you
		* select some other item, two events fire in row:
		*
		* - "deselect" of the previously selected item.
		* - "select" of the newly selected item.
		*
		* This wrapper class forwards those "select" and "deselect" events,
		* but the "deselect" is only forwarded in case all items become
		* deselected, not when the one just select another item.
		*/
		Ext.define('Docs.view.SimpleSelectBehavior', {
		mixins: {
		observable: "Ext.util.Observable"
		},

		/**
		* @event select
		* Fired when item gets selected.
		* @param {Object} item Selected item.
		*/
		/**
		* @event deselect
		* Fired when item gets deselected (and no other item gets selected).
		* @param {Object} item Deselected item.
		*/

		/**
		* Creates a wrapper around selection model.
		* @param {Ext.Component} selModel A component firering "select"
		* and "deselect" events.
		* @param {Object} listeners The listeners config for Observable.
		*/
		constructor: function(cmp, listeners) {
		this.mixins.observable.constructor.call(this, {listeners: listeners});

		cmp.on({
		select: this.onSelect,
		deselect: this.onDeselect,
		scope: this
		});
		},

		onSelect: function(cmp, item) {
		this.selectedItem = item;
		this.fireEvent("select", item);
		},

		onDeselect: function(cmp, item) {
		this.selectedItem = undefined;
		Ext.Function.defer(function() {
		if (!this.selectedItem) {
		this.fireEvent("deselect", item);
		}
		}, 10, this);
		}

		});

template/app/view/comments/Targets.js

+13 −19

Original line number	Diff line number	Diff line
		@@ -5,7 +5,10 @@ Ext.define('Docs.view.comments.Targets', {
		alias: "widget.commentsTargets",
		extend: 'Ext.panel.Panel',
		componentCls: "comments-targets",
		requires: ["Docs.Comments"],
		requires: [
		"Docs.Comments",
		"Docs.view.SimpleSelectBehavior"
		],

		layout: "border",

		@@ -56,14 +59,15 @@ Ext.define('Docs.view.comments.Targets', {
		}
		}
		],
		itemSelector: "li",
		listeners: {
		itemSelector: "li"
		})
		];

		new Docs.view.SimpleSelectBehavior(this.list, {
		select: this.onSelect,
		deselect: this.onDeselect,
		scope: this
		}
		})
		];
		});

		this.callParent(arguments);
		},
		@@ -80,22 +84,12 @@ Ext.define('Docs.view.comments.Targets', {
		this.list.getSelectionModel().deselectAll();
		},

		onSelect: function(view, target) {
		this.selectedTarget = target;
		onSelect: function(target) {
		this.fireEvent("select", target);
		},

		onDeselect: function() {
		// Don't fire empty "select" event when the deselect occured
		// only because another target was selected (and so the previous
		// was unselected). Wait a tiny delay and when no target
		// becomes selected, onle then fire the empty select event.
		this.selectedTarget = undefined;
		Ext.Function.defer(function() {
		if (!this.selectedTarget) {
		this.fireEvent("select", undefined);
		}
		}, 10, this);
		},

		fetchTargets: function(sortBy) {

template/app/view/comments/Users.js

+14 −17

Original line number	Diff line number	Diff line
		@@ -6,7 +6,10 @@ Ext.define('Docs.view.comments.Users', {
		alias: "widget.commentsUsers",
		extend: 'Ext.panel.Panel',
		componentCls: "comments-users",
		requires: ["Docs.Comments"],
		requires: [
		"Docs.Comments",
		"Docs.view.SimpleSelectBehavior"
		],

		layout: "border",

		@@ -56,14 +59,15 @@ Ext.define('Docs.view.comments.Users', {
		'</tpl>',
		'</ul>'
		],
		itemSelector: "li",
		listeners: {
		itemSelector: "li"
		})
		];

		new Docs.view.SimpleSelectBehavior(this.list, {
		select: this.onSelect,
		deselect: this.onDeselect,
		scope: this
		}
		})
		];
		});

		this.callParent(arguments);
		},
		@@ -89,22 +93,15 @@ Ext.define('Docs.view.comments.Users', {
		this.list.getSelectionModel().deselectAll();
		},

		onSelect: function(view, user) {
		onSelect: function(user) {
		console.log("xselect");
		this.selectedUser = user;
		this.fireEvent("select", user.get("username"));
		},

		onDeselect: function() {
		// Don't fire empty "select" event when the deselect occured
		// only because another user was selected (and so the previous
		// was unselected). Wait a tiny delay and when no user
		// becomes selected, onle then fire the empty select event.
		this.selectedUser = undefined;
		Ext.Function.defer(function() {
		if (!this.selectedUser) {
		this.fireEvent("select", undefined);
		}
		}, 10, this);
		},

		fetchUsers: function(sortBy) {