Implement paging of search results. (56ab3269) · Commits · extjs / jsduck

template/app/controller/Search.js

+36 −3

Original line number	Diff line number	Diff line
		@@ -10,11 +10,31 @@ Ext.define('Docs.controller.Search', {

		stores: ['Search'],

		refs: [
		{
		ref: 'field',
		selector: '#search-field'
		}
		],

		// Currentl page in search results and nr of items on one page
		pageIndex: 0,
		pageSize: 10,

		init: function() {
		this.control({
		'#search-dropdown': {
		itemclick: function(dropdown, record) {
		this.loadRecord(record);
		},
		changePage: function(dropdown, delta) {
		// don't hide dropdown
		clearTimeout(this.hideTimeout);
		this.getField().focus();

		// increment page number and update search results display
		this.pageIndex += delta;
		this.search(this.getField().getValue());
		}
		},
		'#search-field': {
		@@ -56,6 +76,8 @@ Ext.define('Docs.controller.Search', {
		record && this.loadRecord(record);
		}
		else {
		// A new search - reset paging back to first page
		this.pageIndex = 0;
		// Wait a bit before actually performing the search.
		// When user is typing fast, the value of el.value
		// might not right away be the final value. For example
		@@ -81,7 +103,7 @@ Ext.define('Docs.controller.Search', {
		// badly when you make a long mouse press on
		// dropdown item.
		var dropdown = this.getDropdown();
		Ext.Function.defer(dropdown.hide, 500, dropdown);
		this.hideTimeout = Ext.Function.defer(dropdown.hide, 500, dropdown);
		}
		}
		});
		@@ -103,10 +125,21 @@ Ext.define('Docs.controller.Search', {

		search: function(term) {
		// perform search and load results to store
		var limit = 10;
		var results = this.filterMembers(term);

		// Don't allow paging before first or after the last page.
		if (this.pageIndex < 0) {
		this.pageIndex = 0;
		}
		else if (this.pageIndex > Math.floor(results.length / this.pageSize)) {
		this.pageIndex = Math.floor(results.length / this.pageSize);
		}
		var start = this.pageIndex * this.pageSize;
		var end = start + this.pageSize;

		this.getDropdown().setTotal(results.length);
		this.getDropdown().getStore().loadData(results.slice(0, limit));
		this.getDropdown().setStart(start);
		this.getDropdown().getStore().loadData(results.slice(start, end));
		// position dropdown below search box
		this.getDropdown().alignTo('search-field', 'bl', [-23, 2]);
		// hide dropdown when nothing found

template/app/view/search/Dropdown.js

+64 −2

Original line number	Diff line number	Diff line
		@@ -19,7 +19,20 @@ Ext.define('Docs.view.search.Dropdown', {
		itemSelector:'div.item',
		singleSelect: true,

		pageStart: 0,
		pageSize: 10,

		initComponent: function() {
		this.addEvents(
		/**
		* @event
		* Fired when previous or next page link clicked.
		* @param {Ext.view.View} this
		* @param {Number} delta Either +1 for next page or -1 for previous page
		*/
		"changePage"
		);

		this.tpl = new Ext.XTemplate(
		'<tpl for=".">',
		'<div class="item {type}">',
		@@ -27,11 +40,35 @@ Ext.define('Docs.view.search.Dropdown', {
		'<div class="class">{cls}</div>',
		'</div>',
		'</tpl>',
		'<div class="total">{[values.length]} of {[this.getTotal()]}</div>',
		'<div class="footer">',
		'<a href="#" class="prev"><</a>',
		'<span class="total">{[this.getStart()+1]}-{[this.getEnd()]} of {[this.getTotal()]}</span>',
		'<a href="#" class="next">></a>',
		'</div>',
		{
		getTotal: Ext.bind(this.getTotal, this)
		getTotal: Ext.bind(this.getTotal, this),
		getStart: Ext.bind(this.getStart, this),
		getEnd: Ext.bind(this.getEnd, this)
		}
		);

		// Listen for clicks on next and prev links
		this.on("afterrender", function() {
		this.el.addListener('click', function() {
		this.fireEvent("changePage", this, -1);
		}, this, {
		preventDefault: true,
		delegate: '.prev'
		});

		this.el.addListener('click', function() {
		this.fireEvent("changePage", this, +1);
		}, this, {
		preventDefault: true,
		delegate: '.next'
		});
		}, this);

		this.callParent(arguments);
		},

		@@ -49,5 +86,30 @@ Ext.define('Docs.view.search.Dropdown', {
		*/
		getTotal: function() {
		return this.total;
		},

		/**
		* Sets the index of first item in dropdown of total
		* @param {Number} start
		*/
		setStart: function(start) {
		this.pageStart = start;
		},

		/**
		* Returns the index of first item in dropdown of total
		* @return {Number}
		*/
		getStart: function(start) {
		return this.pageStart;
		},

		/**
		* Returns the index of last item in dropdown of total
		* @return {Number}
		*/
		getEnd: function(start) {
		var end = this.pageStart + this.pageSize;
		return end > this.total ? this.total : end;
		}
		});

template/resources/sass/viewport.scss

+5 −3

Original line number	Diff line number	Diff line
		@@ -167,7 +167,7 @@ a {
		left: 20px;
		z-index: 5;

		.item, .total {
		.item, .footer {
		display: block;
		cursor: pointer;
		overflow: hidden;
		@@ -198,10 +198,12 @@ a {
		background-color: #ffffaa; }
		.item.x-view-over {
		background-color: #ffffaa; }
		.total {
		.footer {
		cursor: auto;
		text-align: right;
		font-size: 0.85em; } }
		font-size: 0.85em;
		a {
		padding: 0 0.5em; } } }


		#center-container, #west-region-container {