/**
* @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();
}
});