Description
Pick a seller and their invoices are listed; pick an invoice and it opens beside the list with its line items underneath. Edit a quantity and the line's price, the invoice total and the amount still owed all move as you type — you type quantities and unit prices; every other figure of money is derived, and none of the derived ones is stored. Save, and the server recomputes the same numbers from the lines it was sent and answers with its own copy, which replaces the screen.
It is the ExtJS 8 (modern toolkit) rewrite of Saki's 2014 ExtJS 5 example, against a real PHP endpoint and a real database — the same endpoint the framework ports of this demo will use, each with its own copy of the data.
Try it
Pick Services, Inc. from the seller box to see a different set of invoices, then click a row in the Invoices list on the left. The invoice opens in the pane beside it — below it on a narrow screen — with its own fields at the top and a second grid, Line items, underneath them. That lower grid is where the money is made: double-click a Qty or Unit price cell there and type, and the line's price, the invoice total and the owed figure all follow immediately, with Save and Reset lighting up. Add line and Remove, in that grid's own header, change the same figures. Try to leave with the edit unsaved — click another invoice, change seller, or press New — and the same dialog asks first, every time.
Save, and watch the numbers change again if your arithmetic and the server's disagree: the answer that lands is the server's. Then Reset demo data puts all twelve invoices back.