Commit 56ab3269 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Implement paging of search results.

Added small "<" and ">" buttons below the search results dropdown
that switch from one page to another.
parent c5c6927b
Loading
Loading
Loading
Loading
+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
+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">&lt;</a>',
                '<span class="total">{[this.getStart()+1]}-{[this.getEnd()]} of {[this.getTotal()]}</span>',
                '<a href="#" class="next">&gt;</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;
    }
});
+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 {