X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/view/BoundList.js

diff --git a/src/view/BoundList.js b/src/view/BoundList.js
new file mode 100644
index 00000000..e1a72275
--- /dev/null
+++ b/src/view/BoundList.js
@@ -0,0 +1,133 @@
+/**
+ * @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'],
+
+    /**
+     * @cfg {Number} pageSize If greater than <tt>0</tt>, 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,
+
+    /**
+     * @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: ['<div class="list-ct"></div>'],
+
+    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 = "." + 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', 
+            '<ul><tpl for=".">',
+                '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
+            '</tpl></ul>'
+        );
+
+        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();
+    }
+});