hi all,
i am using version7.
i want 5-6 images in one layout/canvas(but i can't use TileGrid as my images are not symmetric and the size of all the images is different,like i want 3 images above and 2 big images below).
so i created 3-4 images as members of a Layout.
i have one listGrid from which i want to drag few rows and drop in any particular image.
now i want to access the column value(like "partName" here) in the respective image(where i want to drag that row).
can u please tell me the function that i can use here, to access any particular column value??
Code:
var exampleData = [
{partName:"Blue", partSrc:"cube_blue.png", partNum:1},
{partName:"Yellow", partSrc:"cube_yellow.png", partNum:2},
{partName:"Green", partSrc:"cube_green.png", partNum:3},
{partName:"Blue", partSrc:"cube_blue.png", partNum:4},
{partName:"Yellow", partSrc:"cube_yellow.png", partNum:5},
{partName:"Green", partSrc:"cube_green.png", partNum:6},
{partName:"Blue", partSrc:"cube_blue.png", partNum:7},
{partName:"Yellow", partSrc:"cube_yellow.png", partNum:8},
{partName:"Green", partSrc:"cube_green.png", partNum:9}
]
isc.Img.create({
ID:"bluePiece",
showEdges:true, border:"0px", bodyStyleName:"normal",
left:50, top:50, width:148, height:148, src:"pieces/48/pawn_blue.png",
canDrag: true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canAcceptDrop:true,
canDrop: true,
dragAppearance: "tracker",
setDragTracker: "isc.Event.setDragTracker('Blue Piece')",
drop: "isc.say('You dropped the '+isc.Event.getDragTarget().getID())"
// HERE I WANT TO ACCESS THE COLUMN VALUE
})
isc.Img.create({
ID:"greenPiece1",
showEdges:true, border:"0px", bodyStyleName:"normal",
left:150, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
canDrag: true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canAcceptDrop:true,
canDrop: true,
dragAppearance: "tracker",
fields:[
{name:"partName"},
{name:"partNum", width:20}
]
//drop: "isc.say('You dropped the '+partName)"
// HERE I WANT TO ACCESS THE COLUMN VALUE
})
isc.Img.create({
ID:"greenPiece2",
left:250, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
showEdges:true, border:"0px", bodyStyleName:"normal",
canAcceptDrop:true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canDrag: true,
canDrop: true,
dragAppearance: "tracker",
drop: "isc.say('Hi Green Piece 2')"
// HERE I WANT TO ACCESS THE COLUMN VALUE
})
isc.Img.create({
ID:"greenPiece3",
left:350, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
showEdges:true, border:"0px", bodyStyleName:"normal",
canAcceptDrop:true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canDrag: true,
canDrop: true,
dragAppearance: "tracker",
drop: "isc.say('HIIIII')"
})
isc.Layout.create({
ID:"ImgLayout",
membersMargin: 10,showEdges:true, border:"0px", bodyStyleName:"normal",
dropLineThickness:0,
members: [
greenPiece2,greenPiece1,bluePiece
]
});
isc.defineClass("PartsListGrid","ListGrid").addProperties({
width:150, cellHeight:24, imageSize:16,
showEdges:true, border:"0px", bodyStyleName:"normal",
alternateRecordStyles:true, showHeader:false, leaveScrollbarGap:false,
emptyMessage:"<br><br>Drag & drop parts here",
fields:[
{name:"partSrc", type:"image", width:24, imgDir:"pieces/16/"},
{name:"partName"},
{name:"partNum", width:20}
],
trackerImage:{src:"pieces/24/cubes_all.png", width:24, height:24}
})
isc.HStack.create({membersMargin:10, height:160, members:[
ImgLayout,
isc.PartsListGrid.create({
ID:"myList1",
data:exampleData,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
canReorderRecords: true,
dragDataAction: "move"
})
]})
i am using version7.
i want 5-6 images in one layout/canvas(but i can't use TileGrid as my images are not symmetric and the size of all the images is different,like i want 3 images above and 2 big images below).
so i created 3-4 images as members of a Layout.
i have one listGrid from which i want to drag few rows and drop in any particular image.
now i want to access the column value(like "partName" here) in the respective image(where i want to drag that row).
can u please tell me the function that i can use here, to access any particular column value??
Code:
var exampleData = [
{partName:"Blue", partSrc:"cube_blue.png", partNum:1},
{partName:"Yellow", partSrc:"cube_yellow.png", partNum:2},
{partName:"Green", partSrc:"cube_green.png", partNum:3},
{partName:"Blue", partSrc:"cube_blue.png", partNum:4},
{partName:"Yellow", partSrc:"cube_yellow.png", partNum:5},
{partName:"Green", partSrc:"cube_green.png", partNum:6},
{partName:"Blue", partSrc:"cube_blue.png", partNum:7},
{partName:"Yellow", partSrc:"cube_yellow.png", partNum:8},
{partName:"Green", partSrc:"cube_green.png", partNum:9}
]
isc.Img.create({
ID:"bluePiece",
showEdges:true, border:"0px", bodyStyleName:"normal",
left:50, top:50, width:148, height:148, src:"pieces/48/pawn_blue.png",
canDrag: true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canAcceptDrop:true,
canDrop: true,
dragAppearance: "tracker",
setDragTracker: "isc.Event.setDragTracker('Blue Piece')",
drop: "isc.say('You dropped the '+isc.Event.getDragTarget().getID())"
// HERE I WANT TO ACCESS THE COLUMN VALUE
})
isc.Img.create({
ID:"greenPiece1",
showEdges:true, border:"0px", bodyStyleName:"normal",
left:150, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
canDrag: true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canAcceptDrop:true,
canDrop: true,
dragAppearance: "tracker",
fields:[
{name:"partName"},
{name:"partNum", width:20}
]
//drop: "isc.say('You dropped the '+partName)"
// HERE I WANT TO ACCESS THE COLUMN VALUE
})
isc.Img.create({
ID:"greenPiece2",
left:250, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
showEdges:true, border:"0px", bodyStyleName:"normal",
canAcceptDrop:true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canDrag: true,
canDrop: true,
dragAppearance: "tracker",
drop: "isc.say('Hi Green Piece 2')"
// HERE I WANT TO ACCESS THE COLUMN VALUE
})
isc.Img.create({
ID:"greenPiece3",
left:350, top:50, width:48, height:48, src:"pieces/48/pawn_green.png",
showEdges:true, border:"0px", bodyStyleName:"normal",
canAcceptDrop:true,
dropOver: "this.setBackgroundColor('#ffff80')",
dropOut: "this.setBackgroundColor('#ffffff')",
canDrag: true,
canDrop: true,
dragAppearance: "tracker",
drop: "isc.say('HIIIII')"
})
isc.Layout.create({
ID:"ImgLayout",
membersMargin: 10,showEdges:true, border:"0px", bodyStyleName:"normal",
dropLineThickness:0,
members: [
greenPiece2,greenPiece1,bluePiece
]
});
isc.defineClass("PartsListGrid","ListGrid").addProperties({
width:150, cellHeight:24, imageSize:16,
showEdges:true, border:"0px", bodyStyleName:"normal",
alternateRecordStyles:true, showHeader:false, leaveScrollbarGap:false,
emptyMessage:"<br><br>Drag & drop parts here",
fields:[
{name:"partSrc", type:"image", width:24, imgDir:"pieces/16/"},
{name:"partName"},
{name:"partNum", width:20}
],
trackerImage:{src:"pieces/24/cubes_all.png", width:24, height:24}
})
isc.HStack.create({membersMargin:10, height:160, members:[
ImgLayout,
isc.PartsListGrid.create({
ID:"myList1",
data:exampleData,
canDragRecordsOut: true,
canAcceptDroppedRecords: true,
canReorderRecords: true,
dragDataAction: "move"
})
]})
Comment