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         if (!me.tpl) {
  71             // should be setting aria-posinset based on entire set of data
  72             // not filtered set
  73             me.tpl = Ext.create('Ext.XTemplate',
  74                 '&lt;ul&gt;&lt;tpl for=&quot;.&quot;&gt;',
  75                     '&lt;li role=&quot;option&quot; class=&quot;' + itemCls + '&quot;&gt;' + me.getInnerTpl(me.displayField) + '&lt;/li&gt;',
  76                 '&lt;/tpl&gt;&lt;/ul&gt;'
  77             );
  78         } else if (Ext.isString(me.tpl)) {
  79             me.tpl = Ext.create('Ext.XTemplate', me.tpl);
  80         }
  81
  82         if (me.pageSize) {
  83             me.pagingToolbar = me.createPagingToolbar();
  84         }
  85
  86         me.callParent();
  87
  88         Ext.applyIf(me.renderSelectors, {
  89             listEl: '.list-ct'
  90         });
  91     },
  92
  93     createPagingToolbar: function() {
  94         return Ext.widget('pagingtoolbar', {
  95             pageSize: this.pageSize,
  96             store: this.store,
  97             border: false
  98         });
  99     },
 100
 101     onRender: function() {
 102         var me = this,
 103             toolbar = me.pagingToolbar;
 104         me.callParent(arguments);
 105         if (toolbar) {
 106             toolbar.render(me.el);
 107         }
 108     },
 109
 110     bindStore : function(store, initial) {
 111         var me = this,
 112             toolbar = me.pagingToolbar;
 113         me.callParent(arguments);
 114         if (toolbar) {
 115             toolbar.bindStore(store, initial);
 116         }
 117     },
 118
 119     getTargetEl: function() {
 120         return this.listEl || this.el;
 121     },
 122
 123     getInnerTpl: function(displayField) {
 124         return '{' + displayField + '}';
 125     },
 126
 127     refresh: function() {
 128         var me = this;
 129         me.callParent();
 130         if (me.isVisible()) {
 131             me.refreshed++;
 132             me.doComponentLayout();
 133             me.refreshed--;
 134         }
 135     },
 136
 137     initAria: function() {
 138         this.callParent();
 139
 140         var selModel = this.getSelectionModel(),
 141             mode     = selModel.getSelectionMode(),
 142             actionEl = this.getActionEl();
 143
 144         // TODO: subscribe to mode changes or allow the selModel to manipulate this attribute.
 145         if (mode !== 'SINGLE') {
 146             actionEl.dom.setAttribute('aria-multiselectable', true);
 147         }
 148     },
 149
 150     onDestroy: function() {
 151         Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
 152         this.callParent();
 153     }
 154 });
 155 </pre>
 156 </body>
 157 </html>