Learning DHTMLX Suite UI电子书

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