Add pager to the bottom of comments FullList view. (433e51b2) · Commits · extjs / jsduck

template/app/view/comments/FullList.js

+14 −4

Original line number	Diff line number	Diff line
		@@ -8,7 +8,8 @@ Ext.define('Docs.view.comments.FullList', {
		requires: [
		'Docs.Settings',
		'Docs.Auth',
		'Docs.view.comments.List'
		'Docs.view.comments.List',
		'Docs.view.comments.Pager'
		],
		componentCls: 'comment-index-container',

		@@ -45,10 +46,18 @@ Ext.define('Docs.view.comments.FullList', {
		},
		{
		region: "center",
		xtype: 'commentsList',
		id: 'recentcomments',
		xtype: "container",
		autoScroll: true,
		cls: "iScroll",
		autoScroll: true
		items: [
		{
		xtype: 'commentsList',
		id: 'recentcomments'
		},
		{
		xtype: 'commentsPager'
		}
		]
		}
		],

		@@ -74,6 +83,7 @@ Ext.define('Docs.view.comments.FullList', {

		load: function(comments) {
		this.down("commentsList").load(comments);
		this.down("commentsPager").configure(comments[comments.length-1]);
		},

		/**

+1 −0

Original line number	Diff line number	Diff line
		@@ -63,6 +63,7 @@ Ext.define('Docs.view.comments.List', {
		'</tpl>',
		'<div class="new-comment-wrap"></div>',
		'</div>',
		'{[this.recentCommentsPager(values)]}',
		// to use all methods of this class inside the template
		this
		];

0 → 100644

+51 −0

Original line number	Diff line number	Diff line
		/**
		* Renders the pager for FullList view of comments.
		*/
		Ext.define('Docs.view.comments.Pager', {
		extend: 'Ext.Component',
		alias: "widget.commentsPager",
		componentCls: "recent-comments-pager",

		afterRender: function() {
		this.callParent(arguments);
		this.getEl().on("click", function() {
		/**
		* @event click
		* Fired when the link clicked to load more comments.
		*/
		this.fireEvent("click");
		}, this, {preventDefault: true, delegate: "a.fetchMoreComments"});
		},

		/**
		* Updates the display of pager with the data from previous load.
		*
		* @param {Object} cfg
		* @param {Object} cfg.offset
		* @param {Object} cfg.limit
		* @param {Object} cfg.total_rows
		*/
		configure: function(cfg) {
		this.update(this.getPagerHtml(cfg));
		},

		getPagerHtml: function(cfg) {
		var total = cfg.total_rows \|\| 0;
		var loaded = cfg.offset + cfg.limit;
		var next_load = Math.min(cfg.limit, total - loaded);

		if (total > loaded) {
		return [
		'<span></span>',
		'<a href="#" class="fetchMoreComments" rel="' + loaded + '">',
		'Showing comments 1-' + loaded + ' of ' + total + '. ',
		'Click to load ' + next_load + ' more...',
		'</a>'
		].join('');
		}
		else {
		return '<span></span>That\'s all. Total '+total+' comments.';
		}
		}

		});