Learning DHTMLX Suite UI by Geske, Eli -- Read -- Imperial Library of Trantor

Index

Learning DHTMLX Suite UI

Table of Contents Learning DHTMLX Suite UI Credits About the Author About the Reviewers www.PacktPub.com

Support files, eBooks, discount offers, and more

Why Subscribe? Free Access for Packt account holders

Preface

What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the example code Errata Piracy Questions

1. User Management Web App

About DHTMLX

DHTMLX and other component libraries The components

What will we be building? Summary

2. Download, Setup, and Test

Installing a web server Creating the application directory structure Downloading the DHTMLX library Creating the application file app.js The data storage file Creating the index.html file Testing the DHTMLX installation Summary

3. Data Structures, Storage, and Callbacks

localStorage Creating the storage object

The storage methods and properties

lastStoredId setDateFormat

The user methods

The user model createUser

The user parameter

getUser updateUser removeUser

The grid methods

The grid JSON data structure gridRow getUserGrid

The chart methods

barChartItem createUserBarChart

The storage object

The callbacks object Summary

4. The DHTMLX Layout

The DHTMLX layout The methods and events

Initialization Methods

Cell sizing setHeight setWidth fixSize Cell header

showHeader and hideHeader setText

progressOn and progressOff

Overview of methods

Layout events

attachEvent and detachEvent

dhtmlxEvent The application code

Create the layout

Summary

5. The DHTMLX Toolbar

The DHTMLX toolbar The methods and events

Initialization choices Initialization on a DOM element Initialization on a layout object Initialization on a cell object Toolbar items

addButton addButtonTwoState getItemState addSeparator addText addButtonSelect getListOptionSelected addSpacer removeSpacer addSlider addInput getValue hideItem and showItem removeItem

Toolbar events

onClick onValueChange onStateChange onEnter

The application code

Creating the toolbar

Summary

6. The DHTMLX Grid

The DHTMLX grid The grid methods and events

Initialization choices

Initialization on a DOM element Initialization on a cell object

Grid methods

attachGrid setImagePath setHeader setInitWidths setColAlign init addRow setColTypes getSelectedRowId clearSelection clearAll parse

Grid events

onRowDblClicked onRowSelect

The application code

Create the grid callbacks.setToolbarItemStates callbacks.removeClick callbacks.refreshGrid callbacks.dataChanged

Testing the grid

Creating a user Removing a user

Summary

7. The DHTMLX Window

The DHTMLX window The methods and events

Initialization

Creating the base object Create windows through methods

Methods

createWindow (base object method) setDimension denyResize centerOnScreen setModal hide show setText hideHeader showHeader

Events

onClose

The application code

Creating the pop-up window callbacks

showPopup hidePopup addClick

Test our popup Summary

8. The DHTMLX Form and Calendar

The DHTMLX form Initialization of the DHTMLX form

attachForm

Form items and attributes

settings input hidden checkbox calendar select button block newcolumn

Form methods

setItemFocus() validate() clear() enableLiveValidation() setFormData() getFormData()

The application code

app.js

callbacks showPopup() hidePopup() editClick() Edit the CSS form index.html

Test the application form Summary

9. The DHTMLX Chart

The methods and events

Initialization of the DHTMLX chart dhtmlXChart() addChart() Methods

refresh() add() define()

Define a series Define chart type

addSeries() idByIndex() get()

Events

onItemClick

The application code

Creating the chart callbacks.refreshChart() callbacks.dataChanged()

Test the application Summary

10. The Finish Line

Testing

Troubleshooting

More features

Server side Adding icons Event tweaks Chart ideas

Summary

Index

← Prev
Back
Next →

← Prev
Back
Next →