PDA

View Full Version : Problem with itemselector



desaivenu
28 Dec 2009, 9:58 PM
Hi,
I am using the following itemselector. And when I try to access the fromStore, it is giving null.



/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

/*
* Note that this control will most likely remain as an example, and not as a core Ext form
* control. However, the API will be changing in a future release and so should not yet be
* treated as a final, stable API at this time.
*/

/**
* @class Ext.ux.ItemSelector
* @extends Ext.form.Field
* A control that allows selection of between two Ext.ux.MultiSelect controls.
*
* @history
* 2008-06-19 bpm Original code contributed by Toby Stuart
*
* @constructor
* Create a new ItemSelector
* @param {Object} config Configuration options
*/
Ext.ux.ItemSelector = Ext.extend(Ext.form.Field, {
msWidth:200,
msHeight:300,
hideNavIcons:false,
imagePath:"",
iconUp:"images/up2.gif",
iconDown:"images/down2.gif",
iconLeft:"images/left2.gif",
iconRight:"images/right2.gif",
iconTop:"images/top2.gif",
iconBottom:"images/bottom2.gif",
drawUpIcon:true,
drawDownIcon:true,
drawLeftIcon:true,
drawRightIcon:true,
drawTopIcon:true,
drawBotIcon:true,
fromStore:null,
toStore:null,
fromData:null,
toData:null,
displayField:0,
valueField:1,
switchToFrom:false,
allowDup:false,
focusClass:undefined,
delimiter:',',
readOnly:false,
toLegend:null,
fromLegend:null,
toSortField:null,
fromSortField:null,
toSortDir:'ASC',
fromSortDir:'ASC',
toTBar:null,
fromTBar:null,
bodyStyle:null,
border:false,
defaultAutoCreate:{tag: "div"},

initComponent: function(){
Ext.ux.ItemSelector.superclass.initComponent.call(this);
this.addEvents({
'rowdblclick' : true,
'change' : true
});
},

onRender: function(ct, position){
Ext.ux.ItemSelector.superclass.onRender.call(this, ct, position);

this.fromMultiselect = new Ext.ux.Multiselect({
legend: this.fromLegend,
delimiter: this.delimiter,
allowDup: this.allowDup,
copy: this.allowDup,
allowTrash: this.allowDup,
dragGroup: this.readOnly ? null : "drop2-"+this.el.dom.id,
dropGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,
width: this.msWidth,
height: this.msHeight,
dataFields: this.dataFields,
data: this.fromData,
displayField: this.displayField,
valueField: this.valueField,
store: this.fromStore,
isFormField: false,
tbar: this.fromTBar,
appendOnly: true,
sortField: this.fromSortField,
sortDir: this.fromSortDir
});
this.fromMultiselect.on('dblclick', this.onRowDblClick, this);

if (!this.toStore) {
this.toStore = new Ext.data.SimpleStore({
fields: this.dataFields,
data : this.toData
});
}
this.toStore.on('add', this.valueChanged, this);
this.toStore.on('remove', this.valueChanged, this);
this.toStore.on('load', this.valueChanged, this);

this.toMultiselect = new Ext.ux.Multiselect({
legend: this.toLegend,
delimiter: this.delimiter,
allowDup: this.allowDup,
dragGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,
//dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+(this.toSortField ? "" : ",drop1-"+this.el.dom.id),
dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+",drop1-"+this.el.dom.id,
width: this.msWidth,
height: this.msHeight,
displayField: this.displayField,
valueField: this.valueField,
store: this.toStore,
isFormField: false,
tbar: this.toTBar,
sortField: this.toSortField,
sortDir: this.toSortDir
});
this.toMultiselect.on('dblclick', this.onRowDblClick, this);

var p = new Ext.Panel({
bodyStyle:this.bodyStyle,
border:this.border,
layout:"table",
layoutConfig:{columns:3}
});
p.add(this.switchToFrom ? this.toMultiselect : this.fromMultiselect);
var icons = new Ext.Panel({header:false});
p.add(icons);
p.add(this.switchToFrom ? this.fromMultiselect : this.toMultiselect);
p.render(this.el);
icons.el.down('.'+icons.bwrapCls).remove();

if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
this.imagePath+="/";
this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
var el=icons.getEl();
if (!this.toSortField) {
this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
}
this.addIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconLeft:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.removeIcon = el.createChild({tag:'img', src:this.switchToFrom?this.iconRight:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
if (!this.toSortField) {
this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
}
if (!this.readOnly) {
if (!this.toSortField) {
this.toTopIcon.on('click', this.toTop, this);
this.upIcon.on('click', this.up, this);
this.downIcon.on('click', this.down, this);
this.toBottomIcon.on('click', this.toBottom, this);
}
this.addIcon.on('click', this.fromTo, this);
this.removeIcon.on('click', this.toFrom, this);
}
if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }

var tb = p.body.first();
this.el.setWidth(p.body.first().getWidth());
p.body.removeClass();

this.hiddenName = this.name;
var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name};
this.hiddenField = this.el.createChild(hiddenTag);
this.valueChanged(this.toStore);
},

initValue:Ext.emptyFn,

toTop : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=records.length-1; i>-1; i--) {
record = records[i];
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(0, record);
selectionsArray.push(((records.length - 1) - i));
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(selectionsArray);
},

toBottom : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(selectionsArray);
},

up : function() {
var record = null;
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
selectionsArray.sort();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] - 1) >= 0) {
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
newSelectionsArray.push(selectionsArray[i] - 1);
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(newSelectionsArray);
}
},

down : function() {
var record = null;
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
selectionsArray.sort();
selectionsArray.reverse();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
newSelectionsArray.push(selectionsArray[i] + 1);
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(newSelectionsArray);
}
},

fromTo : function() {
var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
if(!this.allowDup)selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
if(this.allowDup){
var x=new Ext.data.Record();
record.id=x.id;
delete x;
this.toMultiselect.view.store.add(record);
}else{
this.fromMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
}
}
}
this.toMultiselect.view.refresh();
this.fromMultiselect.view.refresh();
if(this.toSortField)this.toMultiselect.store.sort(this.toSortField, this.toSortDir);
if(this.allowDup)this.fromMultiselect.view.select(selectionsArray);
else this.toMultiselect.view.select(selectionsArray);
},

toFrom : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
this.toMultiselect.view.store.remove(record);
if(!this.allowDup){
this.fromMultiselect.view.store.add(record);
selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
}
}
}
this.fromMultiselect.view.refresh();
this.toMultiselect.view.refresh();
if(this.fromSortField)this.fromMultiselect.store.sort(this.fromSortField, this.fromSortDir);
this.fromMultiselect.view.select(selectionsArray);
},

valueChanged: function(store) {
var record = null;
var values = [];
for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
values.push(record.get(this.valueField));
}
this.hiddenField.dom.value = values.join(this.delimiter);
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
},

getValue : function() {
return this.hiddenField.dom.value;
},

onRowDblClick : function(vw, index, node, e) {
return this.fireEvent('rowdblclick', vw, index, node, e);
},

reset: function(){
range = this.toMultiselect.store.getRange();
this.toMultiselect.store.removeAll();
if (!this.allowDup) {
this.fromMultiselect.store.add(range);
this.fromMultiselect.store.sort(this.displayField,'ASC');
}
this.valueChanged(this.toMultiselect.store);
}
});

Ext.reg("itemselector", Ext.ux.ItemSelector);
And I am trying to use the component.



Ext.onReady(function(){
var view = new Ext.Viewport(
{
items:[
{
title:'This is a panel',
items:[
{xtype:'form',
title:'Item Selector form',
frame:true,
items:[
{xtype:'combo',
fieldLabel:'Name',
fields:['id','value'],
store:[['1','One'],['2','Two']],
valueField:'value',
displayField:'id',
listeners:{select:function(object,newValue,oldValue){
var selectedValue = newValue.get('value');

if(selectedValue == '2'){
var itemSelectorComp = Ext.getCmp('myItemSelector').fromStore;
alert(itemSelectorComp);


}
}}
},
{
xtype:"itemselector",
name:"itemselector",
fieldLabel:"ItemSelector",
dataFields:["code", "desc"],
toData:[["10", "Ten"]],
msWidth:250,
id:'myItemSelector',
msHeight:200,
valueField:"code",
displayField:"desc",
toLegend:"Selected",
fromLegend:"Available",
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toTBar:[{
text:"Clear",
handler:function(){
Ext.Msg.alert('Hi','Clear button clicked');
}
}]
}
]
}
]
}
]
}
);

});

when I try to access the fromStore, I am getting null as an alert.

Please help me.

Thans in advance,
Venu.