User authentication is temporarily unavailable. If this situation persists, please inform your Wiki Admin.

Extjs/Simple Invoices Challenge

Who: anyone

What: Extjs is a kick ass javascript framework and you should know what Simple Invoices is :)

Why:

  • The aim is to use extjs to cleanup the UI of Simple Invoices and also fix some things that should have been fixes ages ago (ie. a real grid for the manage pages)
  • UI needs to be simplified, currently the drop down menu system and the accordian menu on the home page are to complex
  • Css/js cross browser compatibility: css and js compatibility is a nightmare for me - using the standard extjs css/js this should be resolved for all browsers that extjs supports

When: now

Where: here

Scope

invoice generation etc.. will just stay is for now - main focus is on the UI

Discuss

Justin, above links goes to your localhost I guess.

- yep, i just assumed if you have Simple Invoices (SVN) setup on your PC you can access the above pages to see what im on about : Justin

–Sorry but i dont know from where to download SVN, please advice. Sawan

— Hey Sawan, refer simple_invoices_subversion_how-to

—- basically install the svn client onto your PC, then check out our code from google

—- let me know how you go : Justin

Layout

re complex.html/tabbed.html

  • my dream for this menu on the left with a tabbed center section
    • depending on the link it will either open in a new tab or in the main tab
      • ie - print preview of invoice will open to new tab - while new biller might just open in the current tab
  • my problem with this is that I don't know how to make it open a new tab or open a url in an existing tab - i'm not to good with javascript
  • Person looking at this: no one
Discuss
  • There's a good example for opening new tabs here: http://extjs.com/deploy/dev/examples/tabs/tabs-adv.html
  • I think I've got most of the technical aspects figured out. I've put a tutorial up here: http://extjs.com/learn/Tutorial:TabPanel_Basics.
    • awesome work Robin - can't wait to see your layout for Simple Invoices! : Justin * Robin has retired from looking at this if anyone else is interested go for it ===== Manage pages/Grids ===== refer: http://localhost/simpleinvoices/index.php?module=invoices&view=manage The extjs grid system has been incorporated into Simple Invoices manage invoices page. Once this is working 100% we'll redo the other manage pages do use extjs grid Currently the extjs grid for the manage invoice pages works by: * Manage invoices extjs grid file included in the Simple Invoices header (probably not the best location) * ./include/extjs2/grid/xml-grid.js * The js calls the php to get the required xml(see code below) for the grid and the targets the css id manageInvoicesGrid to print the grid on
      url: 'http://localhost/simpleinvoices-dev/trunk/index.php?module=invoices&view=xml',
      

      * the above url translates to ./modules/invoices/xml.php

        * this file includes all the smarts (including sorting and row limiting) do to a sql query and return a xml file ready for extjs use
      * template file
        * ./templates/default/invoices/manage.tpl
        * extjs print the grid in the <div id="manageInvoicesGrid"></div> section of the page
      * Hope all thsi makes sense :)

      ==== Paging ==== Done * Person looking at this: Justin == Discuss == Add any comments here ==== Sorting ==== Done * Person looking at this: Justin == Discuss == Add any comments here ==== Grouping ==== Done refer: http://extjs.com/deploy/dev/examples/grid/grouping.html * On the drop down of each column to have a group by this field option - refer above link * so that in any field (except actions) the user will be able to group the grid/manage page via any column * this will rock

  • Person looking at this: Justin
Discuss

Add any comments here

Filtering/Search

refer: http://ccinct.com/lab/filter-grid/ refer: http://extjs.com/forum/showthread.php?t=14503 refer: http://ido.nl.eu.org/pir/ and also search the extjs 2 forum for filtering

  • the goal is to have a simple search box on the top (or somewhere) of the grid so the user can easily search or filter the grid for whatever records they wish
  • Person looking at this: Justin
Discuss

Add any comments here

Grid formatting

refer: http://extjs.com/deploy/dev/examples/grid/paging.html

refer: http://extjs.com/deploy/dev/examples/grid/paging.js

  • In the current Simple Invoices manage pages we do simple php/html stuff to make the Actions menu work
  • This needs to be replicated in extjs grid
    • either via adding a formating thing into the xml generation ( refer: function sql2xm in ./includes/functions.php )
    • or via extjs formatting as seen in the paging example with the forum post titles etc.
  • The end goal is to ahve the same kind of Actions menu/table cell thats in the current manage pages in the new extjs grids
  • Person looking at this: Justin
  • Status : pretty much done
Discuss

Add any comments here

Dialog boxes

refer: http://extjs.com/deploy/dev/examples/message-box/msg-box.html

In Simple Invoices we currently use AFS javascript based popup/lightbox boxes to display help information etc.. This will need to be changed to extjs bases message boxes of some kind

  • Person looking at this:
Discuss

Add any comments here

Form layout

refer: http://extjs.com/deploy/ext/examples/form/dynamic.html

refer: http://extjs.com/deploy/dev/examples/form/dynamic.html

refer: http://extjs.com/deploy/dev/examples/form/xml-form.html

  • Goal : to use either extjs to create the forms - ie add biller or just use the extjs css to style the existing forms
  • Person looking at this:
Discuss

Add any comments here

Combo boxes

refer: http://extjs.com/deploy/dev/examples/form/combos.html

Goal: Replace the existing drop down menus with the extjs combo boxes

  • in as many pages as possible and specifically the new invoice pages
  • Person looking at this:
Discuss

Add any comments here

Reference

refer the extjs examples for feed reader, task manager and the extjs 2 documentation pages - this is what i want Simple Invoices to look like

 
 | wiki/extjs_ui_work.txt · Last modified: 2016/10/11 06:15 (external edit)