X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/view/BoundList.js?ds=sidebyside 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 0, 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: ['
'], + + 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', + '' + ); + + 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(); + } +});