ExtJS Diary editor control

An ExtJS grid/list control that allows the edit of a series of diary entries ## Deliverables **Overview** This control is being produced in support of a web-based application that is to create and edit diary entries, using Atom as the underlying data store. This project is to produce a technical demonstrator control - to investigate whether [ExtJS][1] is a suitable UI library for such a control.? The control does not need to worry about storing changes to the data, in memory manipulation is satisfactory. **Detail** An [ExtJS][1] 3.1 control is required to support the display/edit of time-stamped diary entries, one per row.? The user is able to add, edit and delete diary entries.? A diary entries is represented by 3 cells: a date-time stamp, a privacy indicator (true/false), and a block of formatted text that may include line breaks.? Double-clicking on a date-time stamp switches it into edit mode, with the user pressing return to accept, or escape to cancel an edit.? Double-clicking on a privacy indicator toggles its value.? Double-clicking on a text entry switches that cell to an edit-mode, containing a custom comment form that contains a text area that resizes to fit the space available, with Save/Cancel buttons beneath it.? More than one text entry may be in edit mode at once. Entries in the control are shown in reverse chronological order (newest item at the top). Vertical scrollbars will be present when necessary.? Each row will contain a hidden 'entryType' field.? For this trial, this field will always contain the value 'generalComment'. Whilst the date and privacy columns will be of fixed width, the entry column will resize to fill the available space, reflowing its text as appropriate - with rows growing/shrinking in height as necessary to show all text. The test harness places a button toolbar above the diary entry control.? The button toolbar includes buttons to add 100 entries (in read mode), to add an entry (in edit-mode), or to delete the currently selected entry. The datafile to be loaded at startup will be provided at project startup. The datafile will contain 10 diary entries stored in Atom format. A mockup of the interface is shown below: ![screen mockup][2] **Acceptance Testing** 1. Load the sample diary data-file, contents displayed in read-only form in diary control, with test-harness button(s) above. 2. Double-click on entry in data-file, that row switches to edit-mode. 3. Double-click on another entry in the data-file, that row also switches to edit-mode (so two rows are in edit mode) 4. Change one or more date and time values, check the rows are correctly re-ordered 5. Change one or more privacy values. 6. Make changes to one of the entries, press 'Save'.? Row switches to read-only-mode, displaying changed data 7. Make changes to the other entry, press 'Cancel'.? Row switches to read-only-mode, displaying original data 8. Select one row at random, delete it. 9. Click on 'add new entry'.? New row inserted at top in edit-mode, with correct time stamp.? Fill in some details, press 'Save'.? ? New row correctly displayed. 10. Click on 'add 100 new entries'.? 100 new rows inserted in read-only mode, with time-stamps at one minute intervals containing 5-50 words of lorem ipsum text (with paragraph after each 15 words). 11. Scroll up & down dataset, check satisfactory performance.? Randomly open 5 rows, make changes, press 'Save' or 'Cancel - check data changed as appropriate. **Future expansion** The design should (where necessary) respect the following future aspirations. 1. In the future the control will support a number of different custom comment forms - forms that contain one or more combo boxes in addition to the text area.? The toolbar will contain separate buttons for the generation of entries in each of the following entry types:? generalComment, fishCaught, fishLost.? Clicking on one of these buttons will add a new entry with the specified custom editor form.? Double-clicking on an existing entry will open the relevant entry form for that entryType. 2. In the future the privacy column will be switched from a toggle to a drop-down list containing one of the following values: private, friends. club, open. 3. In the future a combo box on the toolbar will be used to select which entries are to be displayed: private, friends, club, all. **Assumptions** [ExtJS][1] 3.1 is the only Javascript framework/library necessary for this control. The control will work under IE6+, FF3.6+ under Windows XP and Vista 1) Complete and fully-functional working program(s) in executable form as well as complete source code of all work done. 2) Deliverables must be in ready-to-run condition, as follows (depending on the nature of the deliverables): a) For web sites or other server-side deliverables intended to only ever exist in one place in the Buyer's environment--Deliverables must be installed by the Seller in ready-to-run condition in the Buyer's environment. b) For all others including desktop software or software the buyer intends to distribute: A software installation package that will install the software in ready-to-run condition on the platform(s) specified in this bid request. 3) All deliverables will be considered "work made for hire" under U.S. Copyright law. Buyer will receive exclusive and complete copyrights to all work purchased. (No GPL, GNU, 3rd party components, etc. unless all copyright ramifications are explained AND AGREED TO by the buyer on the site per the coder's Seller Legal Agreement). ## Platform Windows XP/Vista IE 6+, FF3.6+