docs/source/BoundList2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-view.BoundList'>/**
   2 </span> * @class Ext.view.BoundList
   3  * @extends Ext.view.View
   4  * An internal used DataView for ComboBox, MultiSelect and ItemSelector.
   5  */
   6 Ext.define('Ext.view.BoundList', {
   7     extend: 'Ext.view.View',
   8     alias: 'widget.boundlist',
   9     alternateClassName: 'Ext.BoundList',
  10     requires: ['Ext.layout.component.BoundList', 'Ext.toolbar.Paging'],
  11
  12 <span id='Ext-view.BoundList-cfg-pageSize'>    /**
  13 </span>     * @cfg {Number} pageSize If greater than &lt;tt&gt;0&lt;/tt&gt;, a {@link Ext.toolbar.Paging} is displayed at the
  14      * bottom of the list and store queries will execute with page start and
  15      * {@link Ext.toolbar.Paging#pageSize limit} parameters.
  16      */
  17     pageSize: 0,
  18
  19 <span id='Ext-view.BoundList-property-pagingToolbar'>    /**
  20 </span>     * @property pagingToolbar
  21      * @type {Ext.toolbar.Paging}
  22      * A reference to the PagingToolbar instance in this view. Only populated if {@link #pageSize} is greater
  23      * than zero and the BoundList has been rendered.
  24      */
  25
  26     // private overrides
  27     autoScroll: true,
  28     baseCls: Ext.baseCSSPrefix + 'boundlist',
  29     listItemCls: '',
  30     shadow: false,
  31     trackOver: true,
  32     refreshed: 0,
  33
  34     ariaRole: 'listbox',
  35
  36     componentLayout: 'boundlist',
  37
  38     renderTpl: ['&lt;div class=&quot;list-ct&quot;&gt;&lt;/div&gt;'],
  39
  40     initComponent: function() {
  41         var me = this,
  42             baseCls = me.baseCls,
  43             itemCls = baseCls + '-item';
  44         me.itemCls = itemCls;
  45         me.selectedItemCls = baseCls + '-selected';
  46         me.overItemCls = baseCls + '-item-over';
  47         me.itemSelector = &quot;.&quot; + itemCls;
  48
  49         if (me.floating) {
  50             me.addCls(baseCls + '-floating');
  51         }
  52
  53         // should be setting aria-posinset based on entire set of data
  54         // not filtered set
  55         me.tpl = Ext.create('Ext.XTemplate',
  56             '&lt;ul&gt;&lt;tpl for=&quot;.&quot;&gt;',
  57                 '&lt;li role=&quot;option&quot; class=&quot;' + itemCls + '&quot;&gt;' + me.getInnerTpl(me.displayField) + '&lt;/li&gt;',
  58             '&lt;/tpl&gt;&lt;/ul&gt;'
  59         );
  60
  61         if (me.pageSize) {
  62             me.pagingToolbar = me.createPagingToolbar();
  63         }
  64
  65         me.callParent();
  66
  67         Ext.applyIf(me.renderSelectors, {
  68             listEl: '.list-ct'
  69         });
  70     },
  71
  72     createPagingToolbar: function() {
  73         return Ext.widget('pagingtoolbar', {
  74             pageSize: this.pageSize,
  75             store: this.store,
  76             border: false
  77         });
  78     },
  79
  80     onRender: function() {
  81         var me = this,
  82             toolbar = me.pagingToolbar;
  83         me.callParent(arguments);
  84         if (toolbar) {
  85             toolbar.render(me.el);
  86         }
  87     },
  88
  89     bindStore : function(store, initial) {
  90         var me = this,
  91             toolbar = me.pagingToolbar;
  92         me.callParent(arguments);
  93         if (toolbar) {
  94             toolbar.bindStore(store, initial);
  95         }
  96     },
  97
  98     getTargetEl: function() {
  99         return this.listEl || this.el;
 100     },
 101
 102     getInnerTpl: function(displayField) {
 103         return '{' + displayField + '}';
 104     },
 105
 106     refresh: function() {
 107         var me = this;
 108         me.callParent();
 109         if (me.isVisible()) {
 110             me.refreshed++;
 111             me.doComponentLayout();
 112             me.refreshed--;
 113         }
 114     },
 115
 116     initAria: function() {
 117         this.callParent();
 118
 119         var selModel = this.getSelectionModel(),
 120             mode     = selModel.getSelectionMode(),
 121             actionEl = this.getActionEl();
 122
 123         // TODO: subscribe to mode changes or allow the selModel to manipulate this attribute.
 124         if (mode !== 'SINGLE') {
 125             actionEl.dom.setAttribute('aria-multiselectable', true);
 126         }
 127     },
 128
 129     onDestroy: function() {
 130         Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
 131         this.callParent();
 132     }
 133 });
 134 </pre></pre></body></html>