docs/source/BoundList2.html

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