Page 1 of 5 123 ... LastLast
Results 1 to 10 of 47

Thread: Timelines - Grid undo/redo feature

  1. #1
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    0
      0  

    Default Timelines - Grid undo/redo feature

    I will edit this post to be the most up to date item. That way you don't have to go searching through the thread to find updates.


    Hey, I've been out of mix for a month or so. I decided to finally write my preliminary attempt at a good undo/redo design.

    A few definitions:
    action - a single action which can be monitored
    Transaction - a record which contains an id, an action, and a description (possibly for display purposes)
    Marker - A special Transaction, which doesn't have an action. Instead, it can be used to group Transactions into "macros".
    Timeline - A single listening object which contains the action/transaction definitions for an object
    GridTimeline - An extension of Timeline, with events and Transactions for the EditorGridPanel widget.
    TreeEditorTimeline - An extension of Timeline, with events and Transactions for the TreeEditor widget.
    TreeTimeline - An extension of Timeline, with events and Transactions for the TreePanel widget. (Makes TreeEditorTimeline obsolete)
    FormTimeline - An extension of Timeline, with events and Transactions for the FormPanel widget. (HtmlEditor doesn't work)
    TimelineGrid - A Photoshop-like history grid of the timeline. (new to 1.0)

    This model can be abstracted for any Widget.

    Main Demo (new 4/20/08)
    Let me know what you think.


    Here's the "release" of 1.0 of Timeline.
    Included are the following files:
    • index.html - example of 2 grids and a tree which are all tied together into one Timeline. Has a second grid on the 2nd tab which has a separate timeline. Also has 2 TimelineGrids.
    • Timeline.js - The base Timeline class.
    • GridTimeline.js - The Timeline specific to EditorGridPanel.
    • TreeTimeline.js - The Timeline specific to TreePanel.
    • TreeEditorTimeline.js - The Timeline specific to TreeEditor. (not needed)
    • FormTimeline.js - The Timeline specific to FormPanel. (actually BasicForm)
    • TimelineGrid.js - The Grid extension which acts as a visible history.


  2. #2
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    very neat

    i came up with a grid redo / undo feature for 1.x last year, but it was only limited to re-adding / removing rows, and it was ultimately abandoned. *sob*

    if abstracted well, this will be very useful + powerful indeed.

  3. #3
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
      0  

    Thumbs up

    This feature is really cool. Would it be possible to tie the undo and redo actions to the back and next button? A while ago I made an integration with the yui history control. A few users then took this and tied it to a grid's store but I think what they really wanted was this kind of feature attached to the back button.

    http://extjs.com/forum/showthread.ph...ht=yui+history

    Best regards,
    Jerry Brown

  4. #4
    Ext User denkoo's Avatar
    Join Date
    Jan 2008
    Location
    Paris
    Posts
    124
    Vote Rating
    0
      0  

    Thumbs up Great functionnality...

    I will follow your project...

    Nota: first, I try it with IE7 but don't work... only work on FF2
    and I waiting patiently that red coin will be delete after undo action :-)))

    One suggest : If undo data are empty, ico redo is hidden or disabled, only appear or enable when undo is up and redo etc...

    thanks for sharing... great job ))

  5. #5
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    87
      0  

    Default

    Off the hook para! Great job.

  6. #6
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    0
      0  

    Default

    Update:

    GridTimeline is nearing completion.

    Red flags are removed, but not in the best way possible. Here's the problem:
    I'm listening to the 'afteredit' event, which doesn't provide an indication on whether or not the edit is an 'original edit' (the first edit on a cell). I currently check whether the value in the cell is equal to the original value, which results in the red flag going away ANY time the original value is put into the box. Try changing 'Bergamot' to 'BergamotAAAA', then change it to 'Bergamot', then 'BergamotBBBBB'. Undo and redo a bit and you'll see what I'm talking about. Any ideas?


    I'll start working on TreeTimeline soon.
    Any other widgets need a Timeline? Let me know and I'll put them on the list.

  7. #7
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    You might be making changes at the moment, at the moment there is a terminal firebug error.

    Looks like you're using ext-all so info is limited:

    Code:
    C has no properties
    initComponent()ext-all.js (line 129)
    Component(Object typeAhead=true triggerAction=all transform=light)ext-all.js (line 58)
    apply()ext-base.js (line 9)
    apply()ext-base.js (line 9)
    apply()ext-base.js (line 9)
    apply()ext-base.js (line 9)
    apply()ext-base.js (line 9)
    createGrid(undefined)index.html (line 90)
    (no name)()index.html (line 37)
    Observable()ext-all.js (line 12)
    EventManager()ext-all.js (line 13)
    [Break on this error] Ext.form.ComboBox=Ext.extend(Ext.form.TriggerField,{defaultAutoCreate:{tag:"inpu...

  8. #8
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    0
      0  

    Default

    check it again... the demo is also my development area...
    I should move my development somewhere else, but I'm lazy.

  9. #9
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    Nah, I figured as much, I really hesitated to even mention it.

  10. #10
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    8
      0  

    Default

    I see what you mean about the flag........I think. But I don't know that it's necessarily bad. If it is different than the stored version then the flag shows.

    Something that might help for the observer is if you added some console.log(something) so we could see how you're building the timeline, etc. I haven't dug into your code as of yet to see how you're doing all of this yet.

    Goes without saying I definitely like it though.

    Some food for thought as you're developing this is that I could see someone saying, well how about if we want to click on a row and click on undo/redo and just modify changes for that record. I can't see it for a column so much. I don't intend to dictate the direction you're taking this, just playing devil's advocate planting some seeds just in case.

    Then of course, the finer points of "undo all", or set break point and undo to break point or other foolishness.

    Maybe instead of tracking dirty records you track changed records and use a different css style for this. Maybe that would remove some confusion?

    That or maybe think of excel or something where it has undo button and with the undo it has popup or snippet of message saying what that undo step will undo or redo, basically track a message or something that can be fed back to the user so they know what each press of the undo/redo button will change (this might also help with the red flag issue?).

    It looks like you're working with just one store correct? It's cool that the undo works across multiple instances of a grid. Will that work if the grid's are backed by different stores? Or will you need an undo button tied to each store? So can the undo/redo buttons handle more than one store or just one store (rhetorical question somewhat). Seems like you could track changes per set of buttons and log the store for that change and the change to that store.

Page 1 of 5 123 ... 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
  •