Ext.ux.form.MultiSelectGrid

[demon222]

plugin:



Ext.ns('Ext.ux.form');
Ext.ux.form.MultiSelectGrid = Ext.extend(Ext.form.Field,{
delimiter: ',',
anchor: 0,
minMultiSelectGridections:0,
valueField:1,
unselectRowText: this.unselectRowText || 'Unselect All',
unselectRowTooltip: this.unselectTooltip || 'Unselect the all item',
unselectRowIconCls: this.unselectIconCls || 'unselectOption',

selectRowText: this.selectRowText || 'Select All',
selectRowTooltip: this.selectTooltip || 'Select the all item',
selectRowIconCls: this.selectIconCls || 'selectOption',

reloadText: this.reloadText || 'Reload',
reloadTooltip: this.reloadTooltip || 'Reload the all item',
reloadIconCls: this.reloadIconCls || 'reloadOption',

blankText:Ext.form.TextField.prototype.blankText,
maxMultiSelectGridections:Number.MAX_VALUE,
minMultiSelectGridectionsText: this.minMultiSelectGridectionsText || 'Minimum {0} item(s) required',
maxMultiSelectGridectionsText: this.maxMultiSelectGridectionsText || 'Maximum {0} item(s) allowed',
defaultAutoCreate: {
tag: "div"
},
autoScroll: false,
scroll: false,
initComponent: function(config){
var css = '.ux-scroll-xy {overflow-y: hidden; overflow-x: hidden;}';
Ext.util.CSS.createStyleSheet(css);
this.addClass('ux-scroll-xy');
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);


Ext.ux.form.MultiSelectGrid.superclass.initComponent.apply(this, arguments);
this.addEvents({
'dblclick' : true,
'click' : true,
'change' : true
});
},
onRender: function(ct, position){
Ext.ux.form.MultiSelectGrid.superclass.onRender.call(this, ct, position);
var fs = this.fs = new Ext.form.FieldSet({
title: this.legend,
renderTo: this.el,
width: this.width,
height: this.height,
style: "padding:0;",
tbar: this.tbar
});

this.csm = new Ext.grid.CheckboxSelectionModel();
this.gird = new Ext.grid.GridPanel({
border: false,
store: this.store,
stripeRows: true,
height: this.height,
layout: 'fit',
viewConfig: {
forceFit: true
},
hideHeaders: true,
loadMask: true,
autoExpandColumn: this.valueField,
cm: new Ext.grid.ColumnModel({
columns: [this.csm, {
header: this.valueField,
id: this.valueField,
dataIndex: this.valueField
}]
}),
sm: this.csm,
bbar: [{
text: this.selectRowText,
tooltip: this.selectRowTooltip,
iconCls: this.selectRowIconCls,
scope: this,
handler: this.selectGridRecords
},
'-', {
text: this.unselectRowText,
tooltip: this.unselectRowTooltip,
iconCls: this.unselectRowIconCls,
scope: this,
handler: this.unselectGridRecords
},
'-', {
text: this.reloadText,
tooltip: this.reloadTooltip,
iconCls: this.reloadIconCls,
scope: this,
handler: this.reload
}]
});
fs.add(this.gird);
this.hiddenName = this.name || Ext.id();
var hiddenTag = {
tag: "input",
type: "hidden",
value: "",
name: this.hiddenName
};
this.gird.on('click', this.onViewClick, this);
this.hiddenField = this.el.createChild(hiddenTag);
this.hiddenField.dom.disabled = this.hiddenName != this.name;
fs.doLayout();
if( this.store.proxy ) {

this.store.load();
this.store.on('load',function(){
if(this.value){
this.setValue(this.value);
}
}, this);
}
},
afterRender: function(){
Ext.ux.form.MultiSelectGrid.superclass.afterRender.call(this);
},
getValue: function(){
var ids = new Array();
if (typeof(this.gird) != 'undefined' && this.gird.getSelectionModel().getSelected()) {
Ext.each(this.gird.getSelectionModel().getSelections(), function(item, index){
ids[index] = item.data[this.valueId];
}, this);
return ids.join(',');
}
return ids;
},

setValue: function(value){
if(value != '' && value != null){
var set = value.toString().split(',');
this.v = set;
this.gird.getSelectionModel().getSelections();
Ext.each(this.gird.store.data.items, function(item, index){
Ext.each(set, function(item1, index1){
if (item.data[this.valueId] == item1) {
this.gird.getSelectionModel().selectRow(index, true);
}
}, this);
}, this);

}
else{
this.gird.getSelectionModel().clearSelections();
}
this.hiddenField.dom.value = this.getValue();
this.validate();
},
validateValue: function(value){
if (this.getValue() != '') {
value = this.getValue().toString().split(',');
}
else {
value.length = 0;
}

if (value.length < 1){
if (this.allowBlank) {
this.clearInvalid();
return true;
}
else {
this.markInvalid(this.blankText);
return false;
}
}
if (value.length < this.minMultiSelectGridections) {
this.markInvalid(String.format(this.minMultiSelectGridectionsText, this.minMultiSelectGridections));
return false;
}
if (value.length > this.maxMultiSelectGridections) {
this.markInvalid(String.format(this.maxMultiSelectGridectionsText, this.maxMultiSelectGridections));
return false;
}
return true;
},
onViewClick: function(vw, index, node, e) {
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
this.hiddenField.dom.value = this.getValue();
this.fireEvent('click', this, e);
this.validate();
},
disable: function(){
this.disabled = true;
this.hiddenField.dom.disabled = true;
this.fs.disable();
},
enable: function(){
this.disabled = false;
this.hiddenField.dom.disabled = false;
this.fs.enable();
},
reload: function(){
if( this.store.proxy ) {
this.store.on('load',function(){
if(this.v){
this.setValue(this.v);
}
}, this);
this.store.load();
}
},
unselectGridRecords: function () {
this.gird.getSelectionModel().clearSelections();
this.hiddenField.dom.value = this.getValue();
this.validate();
},
selectGridRecords: function () {
this.gird.getSelectionModel().selectAll();
this.hiddenField.dom.value = this.getValue();
this.validate();
}
});
Ext.reg('multiselectgrid', Ext.ux.form.MultiSelectGrid);


use:


....
var myfield = {
xtype: 'multiselectgrid',
fieldLabel: 'field Label',
unselectRowText: 'Unselect All',
unselectRowTooltip: 'Unselect the all item',
selectRowText: 'Select All',
selectRowTooltip: 'Select the all item',
reloadText: 'Reload',
reloadTooltip: 'Reload the all item',
minMultiSelectGridectionsText: 'Minimum {0} item(s) required',
maxMultiSelectGridectionsText: 'Maximum {0} item(s) allowed',
labelStyle: 'font-weight:bold',
name: 'list_ids',
width: 592,
height: 200,
bodyStyle: 'background-color:#ffffff;',
allowBlank: false,
enableJson: true,
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'list.php',
method: 'post'
}),
fields: [{
name: 'list_id'
}, {
name: 'list_name'
}],
root: 'rows'
}),
valueField: 'list_name',
valueId: 'list_id',
labelField: 'Label'
};

....


20864


20869

Plugin by paul999 & demon222 ;-)

[Paul999]

I'm going to do documentation...

If I'll be able, I'll write!

[demon222]

This plugin has been modified to support Ext.data.SimpleStore
Regards.

[cq.yangyu@gmail.com]

thanks, let me try it first !

[jozek456]

nice job mates! looks greate!

it's very usefull...

[Paul999]

I fixed a bug for IE.


Replace:

hideHeaders: true,
loadMask: true,
autoExpandColumn: this.valueField,
cm: new Ext.grid.ColumnModel({
columns: [this.csm, {
header: this.valueField,
id: this.valueField,
dataIndex: this.valueField,
width: '100%'
}]On:



hideHeaders: true,
loadMask: true,
autoExpandColumn: this.valueField,
cm: new Ext.grid.ColumnModel({
columns: [this.csm, {
header: this.valueField,
id: this.valueField,
dataIndex: this.valueField
}]

[moegal]

This looks great. How do I preset the values?

[Paul999]

.setValue('1,2,3,5');

Or, load on the form...


data: {"name": "1,2,3,4"}


;)

[moegal]

Thanks. Seems the values were not taking in IE8. I changed the code slightly and it seems to work. You may want to review the change to make sure I did not break something else.

I just added the value property to my config.

value: '1,3'

Fo the change, I moved the "if( this.store.proxy ) { " part after doLayout



onRender: function(ct, position){
Ext.ux.form.MultiSelectGrid.superclass.onRender.call(this, ct, position);
var fs = this.fs = new Ext.form.FieldSet({
title: this.legend,
renderTo: this.el,
width: this.width,
height: this.height,
style: "padding:0;",
tbar: this.tbar
});

this.csm = new Ext.grid.CheckboxSelectionModel();
this.gird = new Ext.grid.GridPanel({
border: false,
store: this.store,
stripeRows: true,
height: this.height,
layout: 'fit',
viewConfig: {
forceFit: true
},
hideHeaders: true,
loadMask: true,
autoExpandColumn: this.valueField,
cm: new Ext.grid.ColumnModel({
columns: [this.csm, {
header: this.valueField,
id: this.valueField,
dataIndex: this.valueField
}]
/*hideHeaders: true,
loadMask: true,
autoExpandColumn: this.valueField,
cm: new Ext.grid.ColumnModel({
columns: [this.csm, {
header: this.valueField,
id: this.valueField,
dataIndex: this.valueField,
width: '100%'
}] */
}),
sm: this.csm,
bbar: [{
text: this.selectRowText,
tooltip: this.selectRowTooltip,
iconCls: this.selectRowIconCls,
scope: this,
handler: this.selectGridRecords
},
'-', {
text: this.unselectRowText,
tooltip: this.unselectRowTooltip,
iconCls: this.unselectRowIconCls,
scope: this,
handler: this.unselectGridRecords
},
'-', {
text: this.reloadText,
tooltip: this.reloadTooltip,
iconCls: this.reloadIconCls,
scope: this,
handler: this.reload
}]
});
//moved this part to end or this method
/*if( this.store.proxy ) {

this.store.load();
this.store.on('load',function(){
if(this.value){
this.setValue(this.value);
console.log(this.value);
}

}, this);
}*/
fs.add(this.gird);
this.hiddenName = this.name || Ext.id();
var hiddenTag = {
tag: "input",
type: "hidden",
value: "",
name: this.hiddenName
};
this.gird.on('click', this.onViewClick, this);
this.hiddenField = this.el.createChild(hiddenTag);
this.hiddenField.dom.disabled = this.hiddenName != this.name;
fs.doLayout();
if( this.store.proxy ) {

this.store.load();
this.store.on('load',function(){
if(this.value){
this.setValue(this.value);
console.log(this.value);
}

}, this);
}
},

[demon222]

Thanks for testing this plugin, and the correctness of the action in IE8. The code has been modified to Your uwagi.Mam hope you are happy with this plugin. If you have any comments or suggestions, please write ...
greet
Radek

[demon222]

small modification

add typeof(this.gird) != 'undefined' && ...




getValue: function(){
var ids = new Array();
if (typeof(this.gird) != 'undefined' && this.gird.getSelectionModel().getSelected()) {
Ext.each(this.gird.getSelectionModel().getSelections(), function(item, index){
ids[index] = item.data[this.valueId];
}, this);
return ids.join(',');
}
return ids;
},