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();
}
}
]
});
}
});
});
|