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  * An internally used DataView for {@link Ext.form.field.ComboBox ComboBox}.
  17  */
  18 Ext.define('Ext.view.BoundList', {
  19     extend: 'Ext.view.View',
  20     alias: 'widget.boundlist',
  21     alternateClassName: 'Ext.BoundList',
  22     requires: ['Ext.layout.component.BoundList', 'Ext.toolbar.Paging'],
  23
  24     /**
  25      * @cfg {Number} pageSize
  26      * If greater than `0`, a {@link Ext.toolbar.Paging} is displayed at the bottom of the list and store
  27      * queries will execute with page {@link Ext.data.Operation#start start} and
  28      * {@link Ext.data.Operation#limit limit} parameters. Defaults to `0`.
  29      */
  30     pageSize: 0,
  31
  32     /**
  33      * @property {Ext.toolbar.Paging} pagingToolbar
  34      * A reference to the PagingToolbar instance in this view. Only populated if {@link #pageSize} is greater
  35      * than zero and the BoundList has been rendered.
  36      */
  37
  38     // private overrides
  39     autoScroll: true,
  40     baseCls: Ext.baseCSSPrefix + 'boundlist',
  41     itemCls: Ext.baseCSSPrefix + 'boundlist-item',
  42     listItemCls: '',
  43     shadow: false,
  44     trackOver: true,
  45     refreshed: 0,
  46
  47     ariaRole: 'listbox',
  48
  49     componentLayout: 'boundlist',
  50
  51     renderTpl: ['<div id="{id}-listEl" class="list-ct"></div>'],
  52
  53     initComponent: function() {
  54         var me = this,
  55             baseCls = me.baseCls,
  56             itemCls = me.itemCls;
  57
  58         me.selectedItemCls = baseCls + '-selected';
  59         me.overItemCls = baseCls + '-item-over';
  60         me.itemSelector = "." + itemCls;
  61
  62         if (me.floating) {
  63             me.addCls(baseCls + '-floating');
  64         }
  65
  66         if (!me.tpl) {
  67             // should be setting aria-posinset based on entire set of data
  68             // not filtered set
  69             me.tpl = Ext.create('Ext.XTemplate',
  70                 '<ul><tpl for=".">',
  71                     '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
  72                 '</tpl></ul>'
  73             );
  74         } else if (Ext.isString(me.tpl)) {
  75             me.tpl = Ext.create('Ext.XTemplate', me.tpl);
  76         }
  77
  78         if (me.pageSize) {
  79             me.pagingToolbar = me.createPagingToolbar();
  80         }
  81
  82         me.callParent();
  83
  84         me.addChildEls('listEl');
  85     },
  86
  87     createPagingToolbar: function() {
  88         return Ext.widget('pagingtoolbar', {
  89             pageSize: this.pageSize,
  90             store: this.store,
  91             border: false
  92         });
  93     },
  94
  95     onRender: function() {
  96         var me = this,
  97             toolbar = me.pagingToolbar;
  98         me.callParent(arguments);
  99         if (toolbar) {
 100             toolbar.render(me.el);
 101         }
 102     },
 103
 104     bindStore : function(store, initial) {
 105         var me = this,
 106             toolbar = me.pagingToolbar;
 107         me.callParent(arguments);
 108         if (toolbar) {
 109             toolbar.bindStore(store, initial);
 110         }
 111     },
 112
 113     getTargetEl: function() {
 114         return this.listEl || this.el;
 115     },
 116
 117     getInnerTpl: function(displayField) {
 118         return '{' + displayField + '}';
 119     },
 120
 121     refresh: function() {
 122         var me = this;
 123         me.callParent();
 124         if (me.isVisible()) {
 125             me.refreshed++;
 126             me.doComponentLayout();
 127             me.refreshed--;
 128         }
 129     },
 130
 131     initAria: function() {
 132         this.callParent();
 133
 134         var selModel = this.getSelectionModel(),
 135             mode     = selModel.getSelectionMode(),
 136             actionEl = this.getActionEl();
 137
 138         // TODO: subscribe to mode changes or allow the selModel to manipulate this attribute.
 139         if (mode !== 'SINGLE') {
 140             actionEl.dom.setAttribute('aria-multiselectable', true);
 141         }
 142     },
 143
 144     onDestroy: function() {
 145         Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
 146         this.callParent();
 147     }
 148 });
 149