Ext.define('Ext.ux.form.ItemSelector', {
extend: 'Ext.ux.form.MultiSelect',
alias: ['widget.itemselectorfield', 'widget.itemselector'],
alternateClassName: ['Ext.ux.ItemSelector'],
requires: [
'Ext.button.Button',
'Ext.ux.form.MultiSelect'
],
hideNavIcons:false,
buttons: ['top', 'up', 'add', 'remove', 'down', 'bottom'],
buttonsText: {
top: "Move to Top",
up: "Move Up",
add: "Add to Selected",
remove: "Remove from Selected",
down: "Move Down",
bottom: "Move to Bottom"
},
initComponent: function() {
var me = this;
me.ddGroup = me.id + '-dd';
me.callParent();
me.bindStore(me.store);
},
createList: function(title){
var me = this;
return Ext.create('Ext.ux.form.MultiSelect', {
submitValue: false,
flex: 1,
dragGroup: me.ddGroup,
dropGroup: me.ddGroup,
title: title,
store: {
model: me.store.model,
data: []
},
displayField: me.displayField,
disabled: me.disabled,
listeners: {
boundList: {
scope: me,
itemdblclick: me.onItemDblClick,
drop: me.syncValue
}
}
});
},
setupItems: function() {
var me = this;
me.fromField = me.createList(me.fromTitle);
me.toField = me.createList(me.toTitle);
return {
border: false,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
me.fromField,
{
xtype: 'container',
margins: '0 4',
width: 22,
layout: {
type: 'vbox',
pack: 'center'
},
items: me.createButtons()
},
me.toField
]
};
},
createButtons: function(){
var me = this,
buttons = [];
if (!me.hideNavIcons) {
Ext.Array.forEach(me.buttons, function(name) {
buttons.push({
xtype: 'button',
tooltip: me.buttonsText[name],
handler: me['on' + Ext.String.capitalize(name) + 'BtnClick'],
cls: Ext.baseCSSPrefix + 'form-itemselector-btn',
iconCls: Ext.baseCSSPrefix + 'form-itemselector-' + name,
navBtn: true,
scope: me,
margin: '4 0 0 0'
});
});
}
return buttons;
},
getSelections: function(list) {
var store = list.getStore();
return Ext.Array.sort(list.getSelectionModel().getSelection(), function(a, b) {
a = store.indexOf(a);
b = store.indexOf(b);
if (a < b) {
return -1;
} else if (a > b) {
return 1;
}
return 0;
});
},
onTopBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list);
store.suspendEvents();
store.remove(selected, true);
store.insert(0, selected);
store.resumeEvents();
list.refresh();
this.syncValue();
list.getSelectionModel().select(selected);
},
onBottomBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list);
store.suspendEvents();
store.remove(selected, true);
store.add(selected);
store.resumeEvents();
list.refresh();
this.syncValue();
list.getSelectionModel().select(selected);
},
onUpBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
rec,
i = 0,
len = selected.length,
index = 0;
store.suspendEvents();
for (; i < len; ++i, index++) {
rec = selected[i];
index = Math.max(index, store.indexOf(rec) - 1);
store.remove(rec, true);
store.insert(index, rec);
}
store.resumeEvents();
list.refresh();
this.syncValue();
list.getSelectionModel().select(selected);
},
onDownBtnClick : function() {
var list = this.toField.boundList,
store = list.getStore(),
selected = this.getSelections(list),
rec,
i = selected.length - 1,
index = store.getCount() - 1;
store.suspendEvents();
for (; i > -1; --i, index--) {
rec = selected[i];
index = Math.min(index, store.indexOf(rec) + 1);
store.remove(rec, true);
store.insert(index, rec);
}
store.resumeEvents();
list.refresh();
this.syncValue();
list.getSelectionModel().select(selected);
},
onAddBtnClick : function() {
var me = this,
selected = me.getSelections(me.fromField.boundList);
me.moveRec(true, selected);
me.toField.boundList.getSelectionModel().select(selected);
},
onRemoveBtnClick : function() {
var me = this,
selected = me.getSelections(me.toField.boundList);
me.moveRec(false, selected);
me.fromField.boundList.getSelectionModel().select(selected);
},
moveRec: function(add, recs) {
var me = this,
fromField = me.fromField,
toField = me.toField,
fromStore = add ? fromField.store : toField.store,
toStore = add ? toField.store : fromField.store;
fromStore.suspendEvents();
toStore.suspendEvents();
fromStore.remove(recs);
toStore.add(recs);
fromStore.resumeEvents();
toStore.resumeEvents();
fromField.boundList.refresh();
toField.boundList.refresh();
me.syncValue();
},
syncValue: function() {
var me = this;
me.mixins.field.setValue.call(me, me.setupValue(me.toField.store.getRange()));
},
onItemDblClick: function(view, rec) {
this.moveRec(view === this.fromField.boundList, rec);
},
setValue: function(value) {
var me = this,
fromField = me.fromField,
toField = me.toField,
fromStore = fromField.store,
toStore = toField.store,
selected;
if (!me.fromStorePopulated) {
me.fromField.store.on({
load: Ext.Function.bind(me.setValue, me, [value]),
single: true
});
return;
}
value = me.setupValue(value);
me.mixins.field.setValue.call(me, value);
selected = me.getRecordsForValue(value);
fromStore.suspendEvents();
toStore.suspendEvents();
fromStore.removeAll();
toStore.removeAll();
me.populateFromStore(me.store);
Ext.Array.forEach(selected, function(rec){
if (fromStore.indexOf(rec) > -1) {
fromStore.remove(rec);
}
toStore.add(rec);
});
fromStore.resumeEvents();
toStore.resumeEvents();
Ext.suspendLayouts();
fromField.boundList.refresh();
toField.boundList.refresh();
Ext.resumeLayouts(true);
},
onBindStore: function(store, initial) {
var me = this;
if (me.fromField) {
me.fromField.store.removeAll()
me.toField.store.removeAll();
if (store.getCount()) {
me.populateFromStore(store);
} else {
me.store.on('load', me.populateFromStore, me);
}
}
},
populateFromStore: function(store) {
var fromStore = this.fromField.store;
this.fromStorePopulated = true;
fromStore.add(store.getRange());
fromStore.fireEvent('load', fromStore);
},
onEnable: function(){
var me = this;
me.callParent();
me.fromField.enable();
me.toField.enable();
Ext.Array.forEach(me.query('[navBtn]'), function(btn){
btn.enable();
});
},
onDisable: function(){
var me = this;
me.callParent();
me.fromField.disable();
me.toField.disable();
Ext.Array.forEach(me.query('[navBtn]'), function(btn){
btn.disable();
});
},
onDestroy: function(){
this.bindStore(null);
this.callParent();
}
});