PDA

View Full Version : Drag and drop Grid to Panel........



TAG
4 Aug 2009, 11:42 PM
Hello,
I create a application with 2 panel. In left Panel I have a grid, and in right Panel I have a simple panel with represents my work area. I would execut the drag of one row of grid in panel(don't cancel row next drop), and when the object is in panel, i visualized a simple Alert with the id of object row.

the code is:
//record
var datiUMLnameClassDiagramElements2=[
['Actyvity Diagram','oggetti/imgUML/ClassDiagramElements/ActivityDiagram.JPG'],
['Association','oggetti/imgUML/ClassDiagramElements/association.JPG'],
['Class','oggetti/imgUML/ClassDiagramElements/Class.JPG'],
['Interface','oggetti/imgUML/ClassDiagramElements/Interface.JPG'],
['Object','oggetti/imgUML/ClassDiagramElements/Object.JPG'],
['table','oggetti/imgUML/ClassDiagramElements/table.JPG']
];
//store
var storeUMLnameClassDiagramElements2 = new Ext.data.ArrayStore({
fields: [
{name: 'symbolName'},
{name: 'symbol'}
]
});
storeUMLnameClassDiagramElements2.loadData(datiUMLnameClassDiagramElements2);
//left grid
var gridUMLnameClassDiagramElements2=new Ext.grid.GridPanel({
region: 'east',
store: storeUMLnameClassDiagramElements2,
iconCls: 'connettori',
id:'idClassDiagramElements',
border:true ,
columns: [
{id:'symbolName',header: "Nome Simboli", sortable: true, dataIndex: 'symbolName'},
{header: "Simbolo", sortable: true, dataIndex: 'symbol', renderer: function(v){
return '<img src="' + v + '" width="35"height="35"/>';
}
}
],
stripeRows: true,
autoExpandColumn: 'symbolName',
title:'UML - Class2',
ddGroup: 'mygroup',
enableDragDrop : true,
selModel : new Ext.grid.RowSelectionModel({singleSelect : true}),
loadMask: true,
trackMouseOver: true
});

//panel is
var AreaCentrale = new Ext.TabPanel({//definisco un pannello di tipo Tab
id: 'contenitoreMaster',
region:'center',
deferredRender:true,
enableTabScroll:true,
autoScroll:true,
activeTab:0,
split: true,
items:[{
title: 'titolo',
html: '<div id="idGenericTitoloGriglia" class="griglia"></div>',
iconCls: 'nuova',
closable:false,
autoScroll: true,
id: 'Genericidtitolo',
listeners: { }
}
]
})

I have done various tests for visualized "alert" when the rows drag on the panel, but I could not get anything.
I read the post:
1)http://extjs.com/forum/showthread.php?t=28689;
2)http://extjs.com/forum/showthread.php?t=41268.

But I do not know how to modify this code to trigger the event on the drop.:-/

please, could someone help me? For me it is very important.
thanks in advance

P.S.
The listeners of the panel is empty because the code was written incorrectly and did not work:(

jay@moduscreate.com
5 Aug 2009, 3:14 AM
http://extjs.com/learn/Ext_Forum_Help

TAG
5 Aug 2009, 5:58 AM
ok,ok sorry..............
rephrases my question in a more consistent ....

jay@moduscreate.com
5 Aug 2009, 6:03 AM
seriously?!?

Proper Posting

Here is what you SHOULD do

* If you are expecting someone to invest the time to help you, please invest some time in helping them to help you.
* Title your thread appropriately (use a descriptive title as mentioned above).
* State the intended final behavior and/or look of the application you are developing. It is much, much, much easier to give a qualified advice for a potential helper if he/she knows what are you trying to achieve.
* Post screenshots of the layout. A picture is worth 1000s of words.
* Post Code.
o Provide the part of code that you think is causing trouble
enclosed in
or tags.
Image:Code.jpg
o Do NOT post your entire application; it is too much to read and understand for a helper so he/she can easily ignore posts with lengthy code. Don't worry, if you post irrelevant portions of code the helper will ask what is needed.