PDA

View Full Version : Creating the code run mimic



gokujames
2 Sep 2010, 10:25 PM
Hi there, day 2 i am dipping my hands into Extjs. I am sure that you all are well aware about the online IDe called CodeRun (http://coderun.com/ide/) seems like i could mimic it's functionality easily using Extjs Viewport and some dragging and drop.
Did i say drag/drop !! (:| i almost got a head burst when (i still haven't found a solution) i coudn't get to insert a dragged element into another panel :D
well let me get to the code right away.,
I am going to provide some controls to the left[west] region like below image[ not exactly those controls]
http://www.techotopia.com/images/1/10/Visual_studio_toolbox.jpg
and people can drag and drop controls from toolbox to the
Center region, also remember the controls can still be dragged.
When clicked an element in [code editor panel]center region i should be able to change some properties on the East Region[right side] with properties grid.

[B]Is this really possible ?

Is so, please help me achieve the same. Here is my code,

Script code, Note the highlighted parts

[CODE] //Valid path to blank image on server to create inline css image sprites
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

//Initialize the Extjs library
Ext.onReady(function(){

var myBorderPanel = new Ext.Viewport({
renderTo: document.body,
title: 'Code Studio',
layout: 'border',
items: [{
title: 'Output',
region: 'south', // position for region
height: 100,
collapsible: true, // make collapsible
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 0 0 0'
},{
// xtype: 'panel' implied by default
title: 'ToolBox',
id: 'west-region-container',
region:"west",
contentEl:'form1',
margins: '5 5 0 0',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
layout: 'fit'
},{
title: 'Code Designer',
id:'designer',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
collapsible:true,
contenEl:'food',
layout: 'fit',
margins: '5 0 0 0'
},{
title: 'Properties',
region: 'east',
width:200,
split:true,
collapsible:true,
layout: 'fit',
margins: '5 5 0 0'
}]
});
//make the button draggable
new Ext.dd.DragSource('foo');

//drop onto the Canvas
new Ext.dd.DropTarget('designer',{notifyDrop:function(ds,ev,data){//What goes here)}});
});Now please try to answer these questions:
1. What is the code that goes in notify drop
2.Will the element added to drop zone again be draggable? If not what is code to drag it within center container?

my Html mark up


<body>
<form id="form1" runat="server">
<div id="food">
<asp:Button id="foo" runat="server" text="clickMe" onclick="foo_Click"></asp:Button>
</div>
</form>
</body>
Question:
1.Instead of making just 1 element draggable,droppable How do i ? make all the elements of the "ToolBox" draggable
2.I donno how to add a property grid to the East region, can someone help me? Also does it by default pick properties of elements selected?

evant
2 Sep 2010, 10:28 PM
http://www.sencha.com/products/designer/

gokujames
2 Sep 2010, 10:33 PM
Well i kinda, don't want to use professional grade product :D. But could you point me to some solutions with similar problems like mine

Condor
3 Sep 2010, 12:56 AM
There is a designer for Ext 2 that is free (see the 2.x user extensions forum). You could have a look at that code.

gokujames
3 Sep 2010, 12:58 AM
You mean free :D, let me go have a look at it.Condor can i have links to some documentation on how to persist positions of draggables or Dynamically added controls etc