1. #1
    Sencha User
    Join Date
    May 2013
    Vote Rating
    Ansichtssache is on a distinguished road


    Default Unanswered: Building a Circuit Modeling Tool

    Unanswered: Building a Circuit Modeling Tool

    I want to build a small circuit modeling tool, just like a little "Circuit Lab", with Ext JS.
    There will be different electric components which can be dragged and dropped on a drawing surface and can be connected with wires. These electric component have different connections points, where a wire can st I already tried the last days, but I got stuck at the connection points on the edge of the electric components, from which I can start drawing a wire.

    My approach was:
    The whole drawing area is a Ext.draw.Component, the electric components are draggable Sprites on this drawing surface.
    The problem with that approach is: The connection points are at different positions on every different electric component. When I change the position of a electric component via dragging and dropping, the connection points have to change their position on the surface, too, of course.
    So I tried to pack every electric component, together with its connection points - also Sprites - and their positions relative to the center of the component, into a CompositeSprite. But unfortunately, that didn't solve any problems.

    So... How would you start, if you wanted to build something like that?

    Maybe the whole drawing-area should be a normal Panel, and every electric component is a (draggable) Ext.draw.Component inside this Panel (not only a Sprite) ? Or any different approaches?

    I already tried a lot, but I couldn't get to any working conclusion.

    I'm very pleased about your thoughts about that topic!

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Boise, ID
    Vote Rating
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold



    It's been quite a while since I toyed with sprites on a draw component, but I think sprites on the surface directly is the way I'd go. You can use anything you find in this example in what you're building.

    Start by clicking on Load Dataset A

    That was a side project I was messing around with and ultimately was flawed in its layout since I moved sprites in concert by repositioning all of them at the same time instead of dragging the draw surface, so I'd never use this in production. But.... it does have connecting lines between sprites so maybe something in there comes in handy for you.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    heck out all of the 2013 SenchaCon presentations here:

Thread Participants: 1

Tags for this Thread