|
Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': '/Scripts/ext/ext-4.0.7-gpl/ux'
}
});
Ext.define('Ext.ux.PairSelector', {
extend: 'Ext.panel.Panel',
alias: 'widget.pairselector',
requires: ['Ext.ux.form.MultiSelect'],
width: 600,
height: 300,
border: false,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
itemId: 'first',
xtype: 'multiselect',
cls: 'multiselect-no-border',
minSelections: 1,
maxSelections: 1,
margin: 0,
flex: 1,
store: Ext.create('Ext.data.ArrayStore', { fields: ['text'] })
},
{
itemId: 'second',
xtype: 'multiselect',
cls: 'multiselect-no-border',
minSelections: 1,
maxSelections: 1,
margin: 0,
flex: 1,
store: Ext.create('Ext.data.ArrayStore', { fields: ['text'] })
},
{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
defaults: {
xtype: 'button',
width: 80,
disabled: true
},
items: [
{ action: 'add', text: 'Add >' },
{ action: 'remove', text: '< Remove', margin: '1 0 0 0' }
],
width: 100
},
{
itemId: 'third',
xtype: 'multiselect',
cls: 'multiselect-no-border',
minSelections: 1,
maxSelections: 1,
margin: 0,
flex: 1,
store: Ext.create('Ext.data.ArrayStore', { fields: ['text'] })
}],
initComponent: function () {
this.callParent(arguments);
var first = this.getComponent('first');
var second = this.getComponent('second');
var third = this.getComponent('third');
var add = this.down('button[action=add]');
var remove = this.down('button[action=remove]');
first.on('change', this.onInputSelectChange, this);
second.on('change', this.onInputSelectChange, this);
third.on('change', this.onOutputSelectChange, this);
add.on('click', this.onAddClick, this);
remove.on('click', this.onRemoveClick, this);
third.store.on('datachanged', this.onThirdStoreChanged, this);
},
onInputSelectChange: function () {
var first = this.getComponent('first');
var second = this.getComponent('second');
var third = this.getComponent('third');
var add = this.down('button[action=add]');
if (first.isValid() && second.isValid() && third.store.getCount() == 0) {
add.enable();
}
},
onOutputSelectChange: function () {
var third = this.getComponent('third');
var remove = this.down('button[action=remove]');
if (third.isValid()) {
remove.enable();
}
},
onAddClick: function (button) {
var first = this.getComponent('first');
var second = this.getComponent('second');
var third = this.getComponent('third');
var v1 = first.getValue();
var v2 = second.getValue();
var v = v1 + ',' + v2;
third.store.add({ text: v });
third.setValue(v);
},
onRemoveClick: function (button) {
var third = this.getComponent('third');
var v = third.getValue();
var r = third.store.findRecord('text', v);
third.store.remove(r);
button.disable();
},
onThirdStoreChanged: function (store) {
var add = this.down('button[action=add]');
add.setDisabled(store.getCount() > 0);
},
showError: function (msg) {
Ext.Msg.alert('Error', msg);
},
submit: function () {
var first = this.getComponent('first');
var second = this.getComponent('second');
var third = this.getComponent('third');
first.getEl().mask('loading...');
second.getEl().mask('loading...');
Ext.defer(function () {
first.store.loadData([
{ text: 'a' },
{ text: 'b' },
{ text: 'c' }
]);
first.getEl().unmask();
}, 1000);
Ext.defer(function () {
second.store.loadData([
{ text: '1' },
{ text: '2' },
{ text: '3' }
]);
second.getEl().unmask();
}, 2000);
},
setList3: function (values) {
if (typeof values == 'undefined' || !values) {
this.showError('input value');
return;
}
var a = values.split(',');
if (a.length != 2) {
this.showError('input valid value in format: V1,V2');
return;
}
var v1 = a[0];
var v2 = a[1];
var first = this.getComponent('first');
var second = this.getComponent('second');
var third = this.getComponent('third');
var r1 = first.store.findRecord('text', v1);
if (!r1) {
this.showError('value ' + v1 + ' is not found');
return;
}
var r2 = second.store.findRecord('text', v2);
if (!r2) {
this.showError('value ' + v2 + ' is not found');
return;
}
first.setValue(v1);
second.setValue(v2);
var v = v1 + ',' + v2;
if (third.store.getCount() == 1) third.store.removeAt(0);
third.store.add({ text: v });
third.setValue(v);
},
clear: function () {
var first = this.getComponent('first');
var second = this.getComponent('second');
var third = this.getComponent('third');
first.store.loadData([]);
second.store.loadData([]);
third.store.loadData([]);
var add = this.down('button[action=add]');
var remove = this.down('button[action=remove]');
add.disable();
remove.disable();
}
});
Ext.onReady(function () {
Ext.widget('button', {
text: 'Click Me',
renderTo: 'output',
handler: function () {
Ext.widget('window', {
title: 'Test Window',
width: 600,
height: 400,
autoShow: true,
layout: 'fit',
items: [
{
xtype: 'pairselector'
}
],
buttons: [
{
text: 'submit',
handler: function () {
var win = this.up('window');
var selector = win.down('pairselector');
selector.submit();
}
},
{
text: 'setList3',
handler: function () {
var win = this.up('window');
var selector = win.down('pairselector');
Ext.Msg.prompt('Input value', null, function (button, value) {
if (button == 'ok') selector.setList3(value);
}, this, false, 'b,2');
}
},
{
text: 'clear',
handler: function () {
var win = this.up('window');
var selector = win.down('pairselector');
selector.clear();
}
}
]
});
}
});
});
|
