<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-view-BoundList'>/**
</span> * An internally used DataView for {@link Ext.form.field.ComboBox ComboBox}.
*/
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=0]
* If greater than `0`, a {@link Ext.toolbar.Paging} is displayed at the bottom of the list and store
* queries will execute with page {@link Ext.data.Operation#start start} and
* {@link Ext.data.Operation#limit limit} parameters.
*/
pageSize: 0,
<span id='Ext-view-BoundList-cfg-displayField'> /**
</span> * @cfg {String} [displayField=""]
* The field from the store to show in the view.
*/
<span id='Ext-view-BoundList-property-pagingToolbar'> /**
</span> * @property {Ext.toolbar.Paging} pagingToolbar
* 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
baseCls: Ext.baseCSSPrefix + 'boundlist',
itemCls: Ext.baseCSSPrefix + 'boundlist-item',
listItemCls: '',
shadow: false,
trackOver: true,
refreshed: 0,
// This Component is used as a popup, not part of a complex layout. Display data immediately.
deferInitialRefresh: false,
componentLayout: 'boundlist',
childEls: [
'listEl'
],
renderTpl: [
'<div id="{id}-listEl" class="{baseCls}-list-ct" style="overflow:auto"></div>',
'{%',
'var me=values.$comp, pagingToolbar=me.pagingToolbar;',
'if (pagingToolbar) {',
'pagingToolbar.ownerLayout = me.componentLayout;',
'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
'}',
'%}',
{
disableFormats: true
}
],
<span id='Ext-view-BoundList-cfg-tpl'> /**
</span> * @cfg {String/Ext.XTemplate} tpl
* A String or Ext.XTemplate instance to apply to inner template.
*
* {@link Ext.view.BoundList} is used for the dropdown list of {@link Ext.form.field.ComboBox}.
* To customize the template you can do this:
*
* Ext.create('Ext.form.field.ComboBox', {
* fieldLabel : 'State',
* queryMode : 'local',
* displayField : 'text',
* valueField : 'abbr',
* store : Ext.create('StateStore', {
* fields : ['abbr', 'text'],
* data : [
* {"abbr":"AL", "name":"Alabama"},
* {"abbr":"AK", "name":"Alaska"},
* {"abbr":"AZ", "name":"Arizona"}
* //...
* ]
* }),
* listConfig : {
* tpl : '<tpl for="."><div class="x-boundlist-item">{abbr}</div></tpl>'
* }
* });
*
* Defaults to:
*
* Ext.create('Ext.XTemplate',
* '<ul><tpl for=".">',
* '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
* '</tpl></ul>'
* );
*
*/
initComponent: function() {
var me = this,
baseCls = me.baseCls,
itemCls = me.itemCls;
me.selectedItemCls = baseCls + '-selected';
me.overItemCls = baseCls + '-item-over';
me.itemSelector = "." + itemCls;
if (me.floating) {
me.addCls(baseCls + '-floating');
}
if (!me.tpl) {
// should be setting aria-posinset based on entire set of data
// not filtered set
me.tpl = new Ext.XTemplate(
'<ul><tpl for=".">',
'<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
'</tpl></ul>'
);
} else if (Ext.isString(me.tpl)) {
me.tpl = new Ext.XTemplate(me.tpl);
}
if (me.pageSize) {
me.pagingToolbar = me.createPagingToolbar();
}
me.callParent();
},
beforeRender: function() {
var me = this;
me.callParent(arguments);
// If there's a Menu among our ancestors, then add the menu class.
// This is so that the MenuManager does not see a mousedown in this Component as a document mousedown, outside the Menu
if (me.up('menu')) {
me.addCls(Ext.baseCSSPrefix + 'menu');
}
},
<span id='Ext-view-BoundList-method-getBubbleTarget'> /**
</span> * @private
* Boundlist-specific implementation of the getBubbleTarget used by {@link Ext.AbstractComponent#up} method.
* This links to the owning input field so that the FocusManager, when receiving notification of a hide event,
* can find a focusable parent.
*/
getBubbleTarget: function() {
return this.pickerField;
},
getRefItems: function() {
return this.pagingToolbar ? [ this.pagingToolbar ] : [];
},
createPagingToolbar: function() {
return Ext.widget('pagingtoolbar', {
id: this.id + '-paging-toolbar',
pageSize: this.pageSize,
store: this.store,
border: false,
ownerCt: this,
ownerLayout: this.getComponentLayout()
});
},
// Do the job of a container layout at this point even though we are not a Container.
// TODO: Refactor as a Container.
finishRenderChildren: function () {
var toolbar = this.pagingToolbar;
this.callParent(arguments);
if (toolbar) {
toolbar.finishRender();
}
},
refresh: function(){
var me = this,
toolbar = me.pagingToolbar;
me.callParent();
// The view removes the targetEl from the DOM before updating the template
// Ensure the toolbar goes to the end
if (me.rendered && toolbar && toolbar.rendered && !me.preserveScrollOnRefresh) {
me.el.appendChild(toolbar.el);
}
},
bindStore : function(store, initial) {
var toolbar = this.pagingToolbar;
this.callParent(arguments);
if (toolbar) {
toolbar.bindStore(this.store, initial);
}
},
getTargetEl: function() {
return this.listEl || this.el;
},
<span id='Ext-view-BoundList-method-getInnerTpl'> /**
</span> * A method that returns the inner template for displaying items in the list.
* This method is useful to override when using a more complex display value, for example
* inserting an icon along with the text.
* @param {String} displayField The {@link #displayField} for the BoundList.
* @return {String} The inner template
*/
getInnerTpl: function(displayField) {
return '{' + displayField + '}';
},
onDestroy: function() {
Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
this.callParent();
}
});
</pre>
</body>
</html>