Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / BoundList2.html
diff --git a/docs/source/BoundList2.html b/docs/source/BoundList2.html
new file mode 100644 (file)
index 0000000..247b57d
--- /dev/null
@@ -0,0 +1,134 @@
+<!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'>/**
+</span> * @class Ext.view.BoundList
+ * @extends Ext.view.View
+ * An internal used DataView for ComboBox, MultiSelect and ItemSelector.
+ */
+Ext.define('Ext.view.BoundList', {
+    extend: 'Ext.view.View',
+    alias: 'widget.boundlist',
+    alternateClassName: 'Ext.BoundList',
+    requires: ['Ext.layout.component.BoundList', 'Ext.toolbar.Paging'],
+
+<span id='Ext-view.BoundList-cfg-pageSize'>    /**
+</span>     * @cfg {Number} pageSize If greater than &lt;tt&gt;0&lt;/tt&gt;, a {@link Ext.toolbar.Paging} is displayed at the
+     * bottom of the list and store queries will execute with page start and
+     * {@link Ext.toolbar.Paging#pageSize limit} parameters.
+     */
+    pageSize: 0,
+
+<span id='Ext-view.BoundList-property-pagingToolbar'>    /**
+</span>     * @property pagingToolbar
+     * @type {Ext.toolbar.Paging}
+     * A reference to the PagingToolbar instance in this view. Only populated if {@link #pageSize} is greater
+     * than zero and the BoundList has been rendered.
+     */
+
+    // private overrides
+    autoScroll: true,
+    baseCls: Ext.baseCSSPrefix + 'boundlist',
+    listItemCls: '',
+    shadow: false,
+    trackOver: true,
+    refreshed: 0,
+
+    ariaRole: 'listbox',
+
+    componentLayout: 'boundlist',
+
+    renderTpl: ['&lt;div class=&quot;list-ct&quot;&gt;&lt;/div&gt;'],
+
+    initComponent: function() {
+        var me = this,
+            baseCls = me.baseCls,
+            itemCls = baseCls + '-item';
+        me.itemCls = itemCls;
+        me.selectedItemCls = baseCls + '-selected';
+        me.overItemCls = baseCls + '-item-over';
+        me.itemSelector = &quot;.&quot; + itemCls;
+
+        if (me.floating) {
+            me.addCls(baseCls + '-floating');
+        }
+
+        // should be setting aria-posinset based on entire set of data
+        // not filtered set
+        me.tpl = Ext.create('Ext.XTemplate', 
+            '&lt;ul&gt;&lt;tpl for=&quot;.&quot;&gt;',
+                '&lt;li role=&quot;option&quot; class=&quot;' + itemCls + '&quot;&gt;' + me.getInnerTpl(me.displayField) + '&lt;/li&gt;',
+            '&lt;/tpl&gt;&lt;/ul&gt;'
+        );
+
+        if (me.pageSize) {
+            me.pagingToolbar = me.createPagingToolbar();
+        }
+
+        me.callParent();
+
+        Ext.applyIf(me.renderSelectors, {
+            listEl: '.list-ct'
+        });
+    },
+
+    createPagingToolbar: function() {
+        return Ext.widget('pagingtoolbar', {
+            pageSize: this.pageSize,
+            store: this.store,
+            border: false
+        });
+    },
+
+    onRender: function() {
+        var me = this,
+            toolbar = me.pagingToolbar;
+        me.callParent(arguments);
+        if (toolbar) {
+            toolbar.render(me.el);
+        }
+    },
+
+    bindStore : function(store, initial) {
+        var me = this,
+            toolbar = me.pagingToolbar;
+        me.callParent(arguments);
+        if (toolbar) {
+            toolbar.bindStore(store, initial);
+        }
+    },
+
+    getTargetEl: function() {
+        return this.listEl || this.el;
+    },
+
+    getInnerTpl: function(displayField) {
+        return '{' + displayField + '}';
+    },
+
+    refresh: function() {
+        var me = this;
+        me.callParent();
+        if (me.isVisible()) {
+            me.refreshed++;
+            me.doComponentLayout();
+            me.refreshed--;
+        }
+    },
+    
+    initAria: function() {
+        this.callParent();
+        
+        var selModel = this.getSelectionModel(),
+            mode     = selModel.getSelectionMode(),
+            actionEl = this.getActionEl();
+        
+        // TODO: subscribe to mode changes or allow the selModel to manipulate this attribute.
+        if (mode !== 'SINGLE') {
+            actionEl.dom.setAttribute('aria-multiselectable', true);
+        }
+    },
+
+    onDestroy: function() {
+        Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
+        this.callParent();
+    }
+});
+</pre></pre></body></html>
\ No newline at end of file