src/view/BoundList.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.view.BoundList
  17  * @extends Ext.view.View
  18  * An internal used DataView for ComboBox, MultiSelect and ItemSelector.
  19  */
  20 Ext.define('Ext.view.BoundList', {
  21     extend: 'Ext.view.View',
  22     alias: 'widget.boundlist',
  23     alternateClassName: 'Ext.BoundList',
  24     requires: ['Ext.layout.component.BoundList', 'Ext.toolbar.Paging'],
  25
  26     /**
  27      * @cfg {Number} pageSize If greater than <tt>0</tt>, a {@link Ext.toolbar.Paging} is displayed at the
  28      * bottom of the list and store queries will execute with page start and
  29      * {@link Ext.toolbar.Paging#pageSize limit} parameters.
  30      */
  31     pageSize: 0,
  32
  33     /**
  34      * @property pagingToolbar
  35      * @type {Ext.toolbar.Paging}
  36      * A reference to the PagingToolbar instance in this view. Only populated if {@link #pageSize} is greater
  37      * than zero and the BoundList has been rendered.
  38      */
  39
  40     // private overrides
  41     autoScroll: true,
  42     baseCls: Ext.baseCSSPrefix + 'boundlist',
  43     listItemCls: '',
  44     shadow: false,
  45     trackOver: true,
  46     refreshed: 0,
  47
  48     ariaRole: 'listbox',
  49
  50     componentLayout: 'boundlist',
  51
  52     renderTpl: ['<div class="list-ct"></div>'],
  53
  54     initComponent: function() {
  55         var me = this,
  56             baseCls = me.baseCls,
  57             itemCls = baseCls + '-item';
  58         me.itemCls = itemCls;
  59         me.selectedItemCls = baseCls + '-selected';
  60         me.overItemCls = baseCls + '-item-over';
  61         me.itemSelector = "." + itemCls;
  62
  63         if (me.floating) {
  64             me.addCls(baseCls + '-floating');
  65         }
  66
  67         if (!me.tpl) {
  68             // should be setting aria-posinset based on entire set of data
  69             // not filtered set
  70             me.tpl = Ext.create('Ext.XTemplate',
  71                 '<ul><tpl for=".">',
  72                     '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
  73                 '</tpl></ul>'
  74             );
  75         } else if (Ext.isString(me.tpl)) {
  76             me.tpl = Ext.create('Ext.XTemplate', me.tpl);
  77         }
  78
  79         if (me.pageSize) {
  80             me.pagingToolbar = me.createPagingToolbar();
  81         }
  82
  83         me.callParent();
  84
  85         Ext.applyIf(me.renderSelectors, {
  86             listEl: '.list-ct'
  87         });
  88     },
  89
  90     createPagingToolbar: function() {
  91         return Ext.widget('pagingtoolbar', {
  92             pageSize: this.pageSize,
  93             store: this.store,
  94             border: false
  95         });
  96     },
  97
  98     onRender: function() {
  99         var me = this,
 100             toolbar = me.pagingToolbar;
 101         me.callParent(arguments);
 102         if (toolbar) {
 103             toolbar.render(me.el);
 104         }
 105     },
 106
 107     bindStore : function(store, initial) {
 108         var me = this,
 109             toolbar = me.pagingToolbar;
 110         me.callParent(arguments);
 111         if (toolbar) {
 112             toolbar.bindStore(store, initial);
 113         }
 114     },
 115
 116     getTargetEl: function() {
 117         return this.listEl || this.el;
 118     },
 119
 120     getInnerTpl: function(displayField) {
 121         return '{' + displayField + '}';
 122     },
 123
 124     refresh: function() {
 125         var me = this;
 126         me.callParent();
 127         if (me.isVisible()) {
 128             me.refreshed++;
 129             me.doComponentLayout();
 130             me.refreshed--;
 131         }
 132     },
 133
 134     initAria: function() {
 135         this.callParent();
 136
 137         var selModel = this.getSelectionModel(),
 138             mode     = selModel.getSelectionMode(),
 139             actionEl = this.getActionEl();
 140
 141         // TODO: subscribe to mode changes or allow the selModel to manipulate this attribute.
 142         if (mode !== 'SINGLE') {
 143             actionEl.dom.setAttribute('aria-multiselectable', true);
 144         }
 145     },
 146
 147     onDestroy: function() {
 148         Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
 149         this.callParent();
 150     }
 151 });
 152