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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/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> * An internally used DataView for {@link Ext.form.field.ComboBox ComboBox}.
  20  */
  21 Ext.define('Ext.view.BoundList', {
  22     extend: 'Ext.view.View',
  23     alias: 'widget.boundlist',
  24     alternateClassName: 'Ext.BoundList',
  25     requires: ['Ext.layout.component.BoundList', 'Ext.toolbar.Paging'],
  26
  27 <span id='Ext-view-BoundList-cfg-pageSize'>    /**
  28 </span>     * @cfg {Number} pageSize
  29      * If greater than `0`, a {@link Ext.toolbar.Paging} is displayed at the bottom of the list and store
  30      * queries will execute with page {@link Ext.data.Operation#start start} and
  31      * {@link Ext.data.Operation#limit limit} parameters. Defaults to `0`.
  32      */
  33     pageSize: 0,
  34
  35 <span id='Ext-view-BoundList-property-pagingToolbar'>    /**
  36 </span>     * @property {Ext.toolbar.Paging} pagingToolbar
  37      * A reference to the PagingToolbar instance in this view. Only populated if {@link #pageSize} is greater
  38      * than zero and the BoundList has been rendered.
  39      */
  40
  41     // private overrides
  42     autoScroll: true,
  43     baseCls: Ext.baseCSSPrefix + 'boundlist',
  44     itemCls: Ext.baseCSSPrefix + 'boundlist-item',
  45     listItemCls: '',
  46     shadow: false,
  47     trackOver: true,
  48     refreshed: 0,
  49
  50     ariaRole: 'listbox',
  51
  52     componentLayout: 'boundlist',
  53
  54     renderTpl: ['&lt;div id=&quot;{id}-listEl&quot; class=&quot;list-ct&quot;&gt;&lt;/div&gt;'],
  55
  56     initComponent: function() {
  57         var me = this,
  58             baseCls = me.baseCls,
  59             itemCls = me.itemCls;
  60
  61         me.selectedItemCls = baseCls + '-selected';
  62         me.overItemCls = baseCls + '-item-over';
  63         me.itemSelector = &quot;.&quot; + itemCls;
  64
  65         if (me.floating) {
  66             me.addCls(baseCls + '-floating');
  67         }
  68
  69         if (!me.tpl) {
  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         } else if (Ext.isString(me.tpl)) {
  78             me.tpl = Ext.create('Ext.XTemplate', me.tpl);
  79         }
  80
  81         if (me.pageSize) {
  82             me.pagingToolbar = me.createPagingToolbar();
  83         }
  84
  85         me.callParent();
  86
  87         me.addChildEls('listEl');
  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 </pre>
 153 </body>
 154 </html>