<!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'],
|
|
mixins: {
|
queryable: 'Ext.Queryable'
|
},
|
|
<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.
|
*/
|
|
<span id='Ext-view-BoundList-cfg-baseCls'> // private overrides
|
</span> baseCls: Ext.baseCSSPrefix + 'boundlist',
|
<span id='Ext-view-BoundList-cfg-itemCls'> itemCls: Ext.baseCSSPrefix + 'boundlist-item',
|
</span><span id='Ext-view-BoundList-property-listItemCls'> listItemCls: '',
|
</span><span id='Ext-view-BoundList-cfg-shadow'> shadow: false,
|
</span><span id='Ext-view-BoundList-cfg-trackOver'> trackOver: true,
|
</span><span id='Ext-view-BoundList-property-refreshed'> refreshed: 0,
|
</span>
|
<span id='Ext-view-BoundList-cfg-deferInitialRefresh'> // This Component is used as a popup, not part of a complex layout. Display data immediately.
|
</span> deferInitialRefresh: false,
|
|
<span id='Ext-view-BoundList-cfg-componentLayout'> componentLayout: 'boundlist',
|
</span>
|
<span id='Ext-view-BoundList-property-childEls'> childEls: [
|
</span> 'listEl'
|
],
|
|
<span id='Ext-view-BoundList-cfg-renderTpl'> renderTpl: [
|
</span> '<div id="{id}-listEl" class="{baseCls}-list-ct ', Ext.dom.Element.unselectableCls, '" 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';
|
if (me.trackOver) {
|
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 class="' + Ext.plainListCls + '"><tpl for=".">',
|
'<li role="option" unselectable="on" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
|
'</tpl></ul>'
|
);
|
} else if (!me.tpl.isTemplate) {
|
me.tpl = new Ext.XTemplate(me.tpl);
|
}
|
|
if (me.pageSize) {
|
me.pagingToolbar = me.createPagingToolbar();
|
}
|
|
me.callParent();
|
},
|
|
<span id='Ext-view-BoundList-method-beforeRender'> beforeRender: function() {
|
</span> 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-getRefOwner'> getRefOwner: function() {
|
</span> return this.pickerField || this.callParent();
|
},
|
|
<span id='Ext-view-BoundList-method-getRefItems'> getRefItems: function() {
|
</span> return this.pagingToolbar ? [ this.pagingToolbar ] : [];
|
},
|
|
<span id='Ext-view-BoundList-method-createPagingToolbar'> createPagingToolbar: function() {
|
</span> return Ext.widget('pagingtoolbar', {
|
id: this.id + '-paging-toolbar',
|
pageSize: this.pageSize,
|
store: this.dataSource,
|
border: false,
|
ownerCt: this,
|
ownerLayout: this.getComponentLayout()
|
});
|
},
|
|
<span id='Ext-view-BoundList-method-finishRenderChildren'> // Do the job of a container layout at this point even though we are not a Container.
|
</span> // TODO: Refactor as a Container.
|
finishRenderChildren: function () {
|
var toolbar = this.pagingToolbar;
|
|
this.callParent(arguments);
|
|
if (toolbar) {
|
toolbar.finishRender();
|
}
|
},
|
|
<span id='Ext-view-BoundList-method-refresh'> refresh: function(){
|
</span> var me = this,
|
tpl = me.tpl,
|
toolbar = me.pagingToolbar,
|
rendered = me.rendered;
|
|
// Allow access to the context for XTemplate scriptlets
|
tpl.field = me.pickerField;
|
tpl.store = me.store;
|
me.callParent();
|
tpl.field = tpl.store = null;
|
|
// The view removes the targetEl from the DOM before updating the template
|
// Ensure the toolbar goes to the end
|
if (rendered && toolbar && toolbar.rendered && !me.preserveScrollOnRefresh) {
|
me.el.appendChild(toolbar.el);
|
}
|
|
// IE6 strict can sometimes have repaint issues when showing
|
// the list from a remote data source
|
if (rendered && Ext.isIE6 && Ext.isStrict) {
|
me.listEl.repaint();
|
}
|
},
|
|
<span id='Ext-view-BoundList-method-bindStore'> bindStore : function(store, initial) {
|
</span> var toolbar = this.pagingToolbar;
|
|
this.callParent(arguments);
|
if (toolbar) {
|
toolbar.bindStore(store, initial);
|
}
|
},
|
|
<span id='Ext-view-BoundList-method-getTargetEl'> getTargetEl: function() {
|
</span> 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.
|
*
|
* The XTemplate is created with a reference to the owning form field in the `field` property to provide access
|
* to context. For example to highlight the currently typed value, the getInnerTpl may be configured into a
|
* ComboBox as part of the {@link Ext.form.field.ComboBox#listConfig listConfig}:
|
*
|
* listConfig: {
|
* getInnerTpl: function() {
|
* return '{[values.name.replace(this.field.getRawValue(), "<b>" + this.field.getRawValue() + "</b>")]}';
|
* }
|
* }
|
* @param {String} displayField The {@link #displayField} for the BoundList.
|
* @return {String} The inner template
|
*/
|
getInnerTpl: function(displayField) {
|
return '{' + displayField + '}';
|
},
|
|
<span id='Ext-view-BoundList-method-onDestroy'> onDestroy: function() {
|
</span> Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
|
this.callParent();
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
