PDA

View Full Version : Ext.ux.ItemSelector is displaying fields in reverse direction!!



Vinni
9 Jul 2010, 1:29 AM
Hi guys,

I am facing problem in using the Ext.ux.ItemSelector.
when I add it in panel, fromStore and toStore fields are getting reversed..
toStore comes in LEFT while fromStore comes to RIGHT side. This is quite weird!

I have attached the screen. Could someone please direct me to the problem, what am doing wrong here?



var availableTrunkStore = new Ext.data.JsonStore({
id : 'tgTrunkStore',
fields: dataTypes.trunkRecordType
});

var records = dataTypes.trunkStore.getRange(0, (dataTypes.trunkStore.getCount() - 1));
availableTrunkStore.add(records);
availableTrunkStore.commitChanges();

var selectedTrunkStore = new Ext.data.JsonStore({
id : 'tgSelectedTrunkStore',
fields: dataTypes.trunkRecordType
});

var itemselectorTrunks = new Ext.ux.ItemSelector({
id: 'tgItemselAggr',
plugins:new jnpr.plugin.ItemSelector(),
drawUpIcon:true,
drawDownIcon:true,
drawLeftIcon:true,
drawRightIcon:true,
drawTopIcon:false,
drawBotIcon:false,
hideLabel : true,
region: 'center',
name:"itemselector",
dataFields:["name"],
fromStore: availableTrunkStore,
toStore: selectedTrunkStore,
msWidth:190,
msHeight:150,
valueField:"name",
displayField:"name",
imagePath:"/extjs/extensions/multiselect",
// switchToFrom:true,
fromLegend:"Available trunks",
toLegend:"Selected trunks"
});

// add listeners to the policy window add/remove trunk buttons
var panelTrunkgroup = new Ext.Panel({
id: 'tgPnlTrunkgroup',
border:false,
style:'margin-top:15px;margin-bottom:10px;',
items:[
itemselectorTrunks
]
});

21372

Thanks

Condor
10 Jul 2010, 12:05 AM
Why is this weird? Isn't that how it is supposed to work?

Vinni
10 Jul 2010, 12:22 AM
so you meant..
toStore should be on - LEFT
and fromStore should be on - RIGHT ??

I thought from --> to is the case and it should be viceversa?

Animal
10 Jul 2010, 12:33 AM
Vinni is right. That's weird. From should be on the left, To should be on the right.

But debug it! Look at the DOM and the CSS and see why it looks like that.

Vinni
14 Jul 2010, 10:09 PM
I got the problem.
I forgot to include the.css style sheet for ItemSelector.

Hence focus on item selection, background color and alignment was missing.

:)