Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: problem with resizable Object in Panel

  1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default problem with resizable Object in Panel

    Hello,
    I create an application with 2 Panel, in the left Panel I insert a list of image Object, in the right Panel I have a work area. I create a code for D&D Object from the left Panel in the right Panel. When I Drag Odject in right Panel, I create new Object such as drag.
    The code is:
    Code:
    var AreaCentrale = new Ext.TabPanel({
          	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: {
    		render: function(){
    		var ddrowTarget = new Ext.dd.DropTarget(Ext.get('Genericidtitolo'), {
                         ddGroup: "mygroup",
                         notifyDrop : function(dd, e, data){
    		var selectedRecord = dd.dragData.selections[0];
    		var coords = e.getXY();					
    		var appoggio=AreaCentrale.getItem('Genericidtitolo');
    		var pathImg=selectedRecord.get('symbol');
    		var idOggetto=selectedRecord.get('id')+'_'+Math.round(Math.random()*1000);
    		appoggio.add({html:'<img id="'+idOggetto+'" src="'+pathImg+'" height="100" width="100">'});
    		appoggio.doLayout();
    						}
    					}
    					)
                        }
              		}
    		}
    		]
    	})
    this code function, creating a list of image in right Panel.
    Now I want to make the Object "resizable" and "draggable".

    I read the API documentation, for create an resizable Object the code is:
    Code:
    var resObject=new Ext.Resizable(idOggetto, {
    				wrap:true,
    			    pinned:false,
    				width: 50,
    				height: 50,
    				maxHeight: 8000,
    				maxWidth:8000,
    			    minWidth:10,
    			    minHeight: 10,
    			    handles: 'all',
    			    draggable:true,
    			    widthIncrement:5,
    			    heightIncrement: 5
    			});
    when I insert this second code in first code, I haven't a good result. The application don't work correctly.
    I certainly make mistakes in creating the code.
    The code merge is:
    Code:
    .....
    var ddrowTarget = new Ext.dd.DropTarget(Ext.get('Genericidtitolo'), {
            ddGroup: "mygroup",
            notifyDrop : function(dd, e, data){
    	   var selectedRecord = dd.dragData.selections[0];
    	var coords = e.getXY();		
    	var appoggio=AreaCentrale.getItem('Genericidtitolo');
    	var pathImg=selectedRecord.get('symbol');
    	var idOggetto=selectedRecord.get('id')+'_'+Math.round(Math.random()*1000);
    	appoggio.add({html:'<img id="'+idOggetto+'" src="'+pathImg+'" height="100" width="100">'});
    	new Ext.Resizable(idOggetto, {
    		wrap:true,
    	        pinned:false,
    		width: 50,
    		height: 50,
    		maxHeight: 8000,
    		maxWidth:8000,
    	        minWidth:10,
    	        minHeight: 10,
    		handles: 'all',
    		draggable:true,
    		widthIncrement:5,
    		heightIncrement: 5
    	});
    	appoggio.doLayout();
    .....
    Summing up what I want to create is a code that creates a run time of objects resizable and draggable by adding them to a left panel.
    Thanks in advance for anybody tell me where I commit mistakes.
    Sorry for my English.
    I would also like to load an img to show the application running but I can not upload the picture you could show me how to do?

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    If yuo are dragging "things" from one place to another, and there may then be multiple "things" on the "other" place, then you should use a DataView which renders data from Record objects according to a template.

    The notifyDrop method would just add a new Record to the DataView.

    A Resizable could then be created based upon the node associated with that new Records. A DataView allows you to find the HTML node associated with any Record in its Store.

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    I read the Example in Api Documentation for Ext.DataView. I modified my code inserting in the right panel the DataView and the event in its creation of resizable?

  4. #4
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    you can not do it with the panels?

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    What?

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    Sorry, (cursed my English). I insert Dataview in right Panel(as the example in the Api Documentation for the Ext.DataView), and in the event of Dataview I insert the generation of the resizable object. Correctly?

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Well show the code for that then because I see no Record being added to any DataView!

  8. #8
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    Sorry, I did not understand your last post

  9. #9
    Ext User
    Join Date
    Jul 2009
    Posts
    108

    Default

    I read the Api Documentation for the DataView. But I have to create objects within a panel are "drag and resizable" as application at: http://oryx-editor.org/backend/poem/repository.

    I do not think possible with DataView to create something similar.
    what is your opinion about it?

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    That's nice. Is that what you are working on?

    No, that's not a DataView. That's a highly customized subclass.

    Not just a cobbled up, confused throwing together of Panels in Panels.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •