1. #1
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35
    Vote Rating
    0
    gokujames is on a distinguished road

      0  

    Cool Creating the code run mimic

    Creating the code run mimic


    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 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
    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]

    and people can drag and drop controls from toolbox to the [code editor panel]Center region, also remember the controls can still be dragged[but the container is the Center region now].
    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.

    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

    HTML Code:
    <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?
    Last edited by gokujames; 2 Sep 2010 at 10:27 PM. Reason: added highlight
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,824
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35
    Vote Rating
    0
    gokujames is on a distinguished road

      0  

    Default


    Well i kinda, don't want to use professional grade product . But could you point me to some solutions with similar problems like mine
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35
    Vote Rating
    0
    gokujames is on a distinguished road

      0  

    Default


    You mean free , 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
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

Similar Threads

  1. Exactly the same code: one run the other dont why??
    By islem in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 3 Apr 2008, 8:23 AM
  2. Exactly the same code: one run the other dont why??
    By islem in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 2 Apr 2008, 6:38 AM
  3. Ext js can't run server code?Is it a bug??
    By HappyJava in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Nov 2007, 4:27 PM

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi