PDA

View Full Version : Ext.ux.form.MultiSelectGrid



demon222
8 Jun 2010, 8:13 AM
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
8 Jun 2010, 8:23 AM
I'm going to do documentation...

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

demon222
15 Jun 2010, 1:32 AM
This plugin has been modified to support Ext.data.SimpleStore
Regards.

cq.yangyu@gmail.com
15 Jun 2010, 8:01 PM
thanks, let me try it first !

jozek456
23 Jun 2010, 2:04 AM
nice job mates! looks greate!

it's very usefull...

Paul999
30 Jun 2010, 4:31 AM
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
6 Aug 2010, 4:54 PM
This looks great. How do I preset the values?

Paul999
7 Aug 2010, 4:53 AM
.setValue('1,2,3,5');

Or, load on the form...


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


;)

moegal
7 Aug 2010, 5:22 AM
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
25 Aug 2010, 9:36 AM
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
27 Oct 2010, 11:46 AM
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;
},