The application code

We covered a lot of what DHTMLX has to offer in its toolbar component. This will get us going for the application code.

Open the app.js file and get ready to start writing code.

Creating the toolbar

Now we will create the toolbar for the application. We will use a JavaScript object literal to create the toolbar.

Enter the following code directly below where the layout is created in the app.js file:

// Toolbar
var appToolbar;
dhtmlxEvent(window, "load", function(){
   // create toolbar
   appToolbar = appLayout.cells("a").attachToolbar({
      items: [
         { type: "button", id: 1, text: "add" },
         { type: "separator", id: 2 },
         { type: "button", id: 3, text: "remove" },
         { type: "separator", id: 4 },
      ]
   });
   // attach toolbar events
   appToolbar.attachEvent("onClick", function(id){
      switch(id){
         case "1": callbacks.addClick(); break;
         case "3": callbacks.removeClick(); break;
         default: break;
      }
   }...