此扩展基于官方selectfield控件修改而来，变动并不大，使用方法类似。
代码如下：
Ext.define('ux.SelectBtn', {
extend: 'Ext.Button',
xtype: 'selectBtn',
alternateClassName: 'selectBtn',
requires: [
'Ext.Panel',
'Ext.picker.Picker',
'Ext.data.Store',
'Ext.data.StoreManager',
'Ext.dataview.List'
],
config: {
/**
* @cfg
* @inheritdoc
*/
ui: 'select',
/**
* @cfg {String/Number} valueField The underlying {@link Ext.data.Field#name data value name} (or numeric Array index) to bind to this
* Select control.
* @accessor
*/
valueField: 'value',
/**
* @cfg {String/Number} displayField The underlying {@link Ext.data.Field#name data value name} (or numeric Array index) to bind to this
* Select control. This resolved value is the visibly rendered value of the available selection options.
* @accessor
*/
displayField: 'text',
/**
* @cfg {Ext.data.Store/Object/String} store The store to provide selection options data.
* Either a Store instance, configuration object or store ID.
* @accessor
*/
store: null,
/**
* @cfg {Array} options An array of select options.
*
* [
* {text: 'First Option', value: 'first'},
* {text: 'Second Option', value: 'second'},
* {text: 'Third Option', value: 'third'}
* ]
*
* __Note:__ Option object member names should correspond with defined {@link #valueField valueField} and {@link #displayField displayField} values.
* This config will be ignored if a {@link #store store} instance is provided.
* @accessor
*/
options: null,
/**
* @cfg {String} hiddenName Specify a `hiddenName` if you're using the {@link Ext.form.Panel#standardSubmit standardSubmit} option.
* This name will be used to post the underlying value of the select to the server.
* @accessor
*/
hiddenName: null,
/**
* @cfg {Object} component
* @accessor
* @hide
*/
component: {
useMask: true
},
/**
* @cfg {String/Boolean} usePicker
* `true` if you want this component to always use a {@link Ext.picker.Picker}.
* `false` if you want it to use a popup overlay {@link Ext.List}.
* `auto` if you want to show a {@link Ext.picker.Picker} only on phones.
*/
usePicker: 'auto',
/**
* @cfg {Boolean} autoSelect
* `true` to auto select the first value in the {@link #store} or {@link #options} when they are changed. Only happens when
* the {@link #value} is set to `null`.
*/
autoSelect: true,
/**
* @cfg {Object} defaultPhonePickerConfig
* The default configuration for the picker component when you are on a phone.
*/
defaultPhonePickerConfig: null,
/**
* @cfg {Object} defaultTabletPickerConfig
* The default configuration for the picker component when you are on a tablet.
*/
defaultTabletPickerConfig: null,
/**
* @cfg
* @inheritdoc
*/
name: 'picker',
/**
* @cfg {String} pickerSlotAlign
* The alignment of text in the picker created by this Select
* @private
*/
pickerSlotAlign: 'center',
value:null
},
platformConfig: [
{
theme: ['Windows'],
pickerSlotAlign: 'left'
},
{
theme: ['Tizen'],
usePicker: false
}
],
// @private
initialize: function () {
var me = this;
me.callParent();
//监听按钮点击事件
this.on({
scope: me,
tap: "showPicker"
});
},
/**
* @private
*/
updateDefaultPhonePickerConfig: function (newConfig) {
var picker = this.picker;
if (picker) {
picker.setConfig(newConfig);
}
},
/**
* @private
*/
updateDefaultTabletPickerConfig: function (newConfig) {
var listPanel = this.listPanel;
if (listPanel) {
listPanel.setConfig(newConfig);
}
},
/**
* @private
* Checks if the value is `auto`. If it is, it only uses the picker if the current device type
* is a phone.
*/
applyUsePicker: function (usePicker) {
if (usePicker == "auto") {
usePicker = (Ext.os.deviceType == 'Phone');
}
return Boolean(usePicker);
},
/**
* @private
*/
applyValue: function (value) {
var record = value,
index, store;
//we call this so that the options configruation gets intiailized, so that a store exists, and we can
//find the correct value
this.getOptions();
store = this.getStore();
if ((value != undefined && !value.isModel) && store) {
index = store.find(this.getValueField(), value, null, null, null, true);
if (index == -1) {
index = store.find(this.getDisplayField(), value, null, null, null, true);
}
record = store.getAt(index);
}
return record;
},
updateValue: function (newValue, oldValue) {
this.record = newValue;
},
getValue: function () {
var record = this.record;
return (record && record.isModel) ? record.get(this.getValueField()) : null;
},
/**
* Returns the current selected {@link Ext.data.Model record} instance selected in this field.
* @return {Ext.data.Model} the record.
*/
getRecord: function () {
return this.record;
},
// @private
getPhonePicker: function () {
var config = this.getDefaultPhonePickerConfig();
if (!this.picker) {
this.picker = Ext.create('Ext.picker.Picker', Ext.apply({
slots: [
{
align: this.getPickerSlotAlign(),
name: this.getName(),
valueField: this.getValueField(),
displayField: this.getDisplayField(),
value: this.getValue(),
store: this.getStore()
}
],
listeners: {
change: this.onPickerChange,
scope: this
}
}, config));
}
return this.picker;
},
// @private
getTabletPicker: function () {
var config = this.getDefaultTabletPickerConfig();
if (!this.listPanel) {
this.listPanel = Ext.create('Ext.Panel', Ext.apply({
left: 0,
top: 0,
modal: true,
cls: Ext.baseCSSPrefix + 'select-overlay',
layout: 'fit',
hideOnMaskTap: true,
width: Ext.os.is.Phone ? '14em' : '18em',
height: (Ext.os.is.BlackBerry && Ext.os.version.getMajor() === 10) ? '12em' : (Ext.os.is.Phone ? '12.5em' : '22em'),
items: {
xtype: 'list',
store: this.getStore(),
itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
listeners: {
select: this.onListSelect,
itemtap: this.onListTap,
scope: this
}
}
}, config));
}
return this.listPanel;
},
/**
* 显示选择器, whether that is a {@link Ext.picker.Picker} or a simple
* {@link Ext.List list}.
*/
showPicker: function () {
var me = this,
store = me.getStore(),
value = me.getValue();
//check if the store is empty, if it is, return
if (!store || store.getCount() === 0) {
return;
}
if (me.getUsePicker()) {
var picker = me.getPhonePicker(),
name = me.getName(),
pickerValue = {};
pickerValue[name] = value;
picker.setValue(pickerValue);
if (!picker.getParent()) {
Ext.Viewport.add(picker);
}
picker.show();
} else {
var listPanel = me.getTabletPicker(),
list = listPanel.down('list'),
index, record;
if (!listPanel.getParent()) {
Ext.Viewport.add(listPanel);
}
//基于按钮显示
listPanel.showBy(me);
if (value || me.getAutoSelect()) {
store = list.getStore();
index = store.find(me.getValueField(), value, null, null, null, true);
record = store.getAt(index);
if (record) {
list.select(record, null, true);
}
}
}
},
// @private
onListSelect: function (item, record) {
var me = this;
if (record) {
me.setValue(record);
//选择成功触发事件
this.fireEvent('selecSuccess', this, this.getValue(), record);
}
},
onListTap: function () {
this.listPanel.hide({
type: 'fade',
out: true,
scope: this
});
},
// @private
onPickerChange: function (picker, value) {
var me = this,
newValue = value[me.getName()],
store = me.getStore(),
index = store.find(me.getValueField(), newValue, null, null, null, true),
record = store.getAt(index);
me.setValue(record);
//选择成功触发事件
this.fireEvent('selecSuccess', this, this.getValue(), record);
},
onChange: function (component, newValue, oldValue) {
var me = this,
store = me.getStore(),
index = (store) ? store.find(me.getDisplayField(), oldValue, null, null, null, true) : -1,
valueField = me.getValueField(),
record = (store) ? store.getAt(index) : null;
oldValue = (record) ? record.get(valueField) : null;
me.fireEvent('change', me, me.getValue(), oldValue);
},
/**
* Updates the underlying `<options>` list with new values.
*
* @param {Array} newOptions An array of options configurations to insert or append.
*
* selectBox.setOptions([
* {text: 'First Option', value: 'first'},
* {text: 'Second Option', value: 'second'},
* {text: 'Third Option', value: 'third'}
* ]).setValue('third');
*
* __Note:__ option object member names should correspond with defined {@link #valueField valueField} and
* {@link #displayField displayField} values.
*
* @return {Ext.field.Select} this
*/
updateOptions: function (newOptions) {
var store = this.getStore();
if (!store) {
this.setStore(true);
store = this._store;
}
if (!newOptions) {
store.clearData();
}
else {
store.setData(newOptions);
this.onStoreDataChanged(store);
}
return this;
},
applyStore: function (store) {
if (store === true) {
store = Ext.create('Ext.data.Store', {
fields: [this.getValueField(), this.getDisplayField()],
autoDestroy: true
});
}
if (store) {
store = Ext.data.StoreManager.lookup(store);
store.on({
scope: this,
addrecords: 'onStoreDataChanged',
removerecords: 'onStoreDataChanged',
updaterecord: 'onStoreDataChanged',
refresh: 'onStoreDataChanged'
});
}
return store;
},
updateStore: function (newStore) {
if (newStore) {
this.onStoreDataChanged(newStore);
}
if (this.getUsePicker() && this.picker) {
this.picker.down('pickerslot').setStore(newStore);
} else if (this.listPanel) {
this.listPanel.down('dataview').setStore(newStore);
}
},
/**
* Called when the internal {@link #store}'s data has changed.
*/
onStoreDataChanged: function (store) {
var initialConfig = this.getInitialConfig(),
value = this.getValue();
if (value || value == 0) {
this.updateValue(this.applyValue(value));
}
if (this.getValue() === null) {
if (initialConfig.hasOwnProperty('value')) {
this.setValue(initialConfig.value);
}
if (this.getValue() === null && this.getAutoSelect()) {
if (store.getCount() > 0) {
this.setRecord(store.getAt(0));
}
}
}
},
/**
* Resets the Select field to the value of the first record in the store.
* @return {Ext.field.Select} this
* @chainable
*/
reset: function () {
var store = this.getStore(),
record = (this.originalValue) ? this.originalValue : store.getAt(0);
if (store && record) {
this.setValue(record);
}
return this;
},
destroy: function () {
this.callParent(arguments);
var store = this.getStore();
if (store && store.getAutoDestroy()) {
Ext.destroy(store);
}
Ext.destroy(this.listPanel, this.picker);
}
});
使用示例
引用：
requires: ['ux.SelectBtn'],
使用（可以参考官方selectfield控件用法）：
{
xtype: 'selectBtn',
text: '分享',
align: 'right',
ui: 'decline',
valueField: 'name',
displayField: 'name',
action:'share',
store: 'shareList'
}
控制层监听
引用：
refs: {
shareBtn: 'button[action=share]'
}
监听(选择成功)：
control: {
shareBtn: {
selecSuccess: function (t, value, record) {
console.log(value,record);
}
}
}
效果图(点击按钮后):