Learning Ext JS

Build dynamic, desktop-style user interfaces for your data-driven web applications

Shea Frederick

324 Pages

38134 Reads



PDF Format

5.21 MB

Java Script

Download PDF format

  • Shea Frederick   
  • 324 Pages   
  • 26 Feb 2015
  • Page - 1

    read more..

  • Page - 2

    Learning Ext JS Build dynamic, desktop-style user interfaces for your data-driven web applications Shea Frederick Colin Ramsay Steve 'Cutter' Blades BIRMINGHAM - MUMBAI This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 3

    Learning Ext JS Copyright © 2008 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book read more..

  • Page - 4

    Credits Authors Shea Frederick Colin Ramsay Steve 'Cutter' Blades Reviewer James Kennard Senior Acquisition Editor David Barnes Development Editor Swapna V. Verlekar Technical Editor Gagandeep Singh Copy Editor Sumathi Sridhar Editorial Team Leader Akshara Aware Project Manager Abhijeet Deobhakta Project Coordinator Neelkanth Mehta Indexer Monica Ajmera Proofreader Dirk Manuel Production Coordinator Rajni R. Thorat read more..

  • Page - 5

    About the Authors Shea Frederick began his career in web development before the term 'Web Application' became commonplace. By the late 1990s, he was developing web applications for Tower Records that combined a call center interface with inventory and fulfillment. Since then, Shea has worked as a developer for several companies, building and implementing various commerce solutions, read more..

  • Page - 6

    Steve Blades (who goes by the name of 'Cutter'), a Virginia native, raised in a Virginia native, raised in Georgia, began his computing career when he started learning BASIC at age 12, hammering out small programs on a Timex Sinclair 1000. As a linguist and Intelligence Analyst for the US Army, Cutter began learning HTML while stationed at the National Security Agency. On read more..

  • Page - 7

    About the Reviewer James Kennard is an all-round computer specialist with a particular interest in web-based technologies. He authored the Joomla! CMS book Mastering Joomla! 1.5 Extension and Framework Development. He holds a B.Sc. in Computer Science and has worked for organisations such as LogicaCMG. James has recently taken an interest in user interfaces and overall UX—it read more..

  • Page - 8

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 9

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 10

    Dedicated to our family, friends, and the Ext JS team. This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 11

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 12

    Table of Content Preface 1 Chapter 1: Getting Started 9 About Ext 9 Ext: Not just another JavaScript library 11 Cross-browser DOM (Document Object Model) 12 Event-driven interfaces 12 Ext and AJAX 12 Getting Ext 13 Where to put Ext 13 Including Ext in your pages 14 What do those files do? 15 Using the Ext library 15 Time for action 16 The example 17 read more..

  • Page - 13

    Table of Contents [ ii ] Chapter 2: The Staples of Ext 23 Ready, set, go! 23 Spacer image 24 Widget 24 Time for action 24 What just happened? 25 Using onReady 25 More widget wonders 26 Meet JSON and the config object 28 The old way 28 The new way—config objects 28 What is a config object? 29 How does JSON work? 30 Time for action 30 Lighting read more..

  • Page - 14

    Table of Contents [ iii ] Loading a form with data 56 Static data load 56 Object reference or component config 58 Instantiated 58 Component config 58 Summary 59 Chapter 4: Buttons, Menus, and Toolbars 61 A toolbar for every occasion 61 Toolbars 61 The button 63 Menu 63 Split button 64 Toolbar item alignment, dividers, and spacers 65 Shortcuts 66 Icon buttons read more..

  • Page - 15

    Table of Contents [ iv ] Displaying server-side data in the grid 88 Loading the movie database from an XML file 88 Loading the movie database from a JSON file 90 Loading data from a database using PHP 91 Programming the grid 92 Working with cell and row selections 92 Listening to our selection model for selections 93 Manipulating the grid (and its data) with read more..

  • Page - 16

    Table of Contents [ v ] Widgets everywhere 126 Adding a grid into the tabpanel 126 Accordions 128 Nesting an accordion layout in a tab 128 Placing a toolbar in your layout 129 A form to add new movies 131 Tricks and advanced layouts 132 Nested layouts 132 Icons in tabs 134 Programmatically manipulating a layout 135 Now you see me, now you don't 135 Give read more..

  • Page - 17

    Table of Contents [ vi ] Remembering state 156 StateManager 156 Caveats 157 Summary 157 Chapter 9: Windows and Dialogs 159 Opening a dialog 159 Dialogs 160 Off the shelf 160 Confirmation 162 It's all progressing nicely 163 Roll your own 164 Behavior 165 Windows 166 Starting examples 166 Paneling potential 167 Layout 168 Configuration 169 When I'm cleaning read more..

  • Page - 18

    Table of Contents [ vii ] Sliding into action 189 Switching from seen to unseen 190 Shifting 190 And now, the interesting stuff 191 The Fx is in 191 Anchoring yourself with Ext 192 Options 192 Easy does it 194 Multiple effects 195 Chaining 195 Queuing 196 Concurrency 196 Blocking and Ext.Fx utility methods 196 Elemental 197 Making a move 197 Using Ext read more..

  • Page - 19

    Table of Contents [ viii ] Configuration 217 It's all under control 217 Managing our movement 218 Global properties 218 Scroll management 219 Dragging within components 220 TreePanel 220 GridPanel 221 Using it in the real world 221 Summary 222 Chapter 12: It's All about the Data 223 Understanding data formats 223 Basic remote panel data 223 Gotchas with HTML data read more..

  • Page - 20

    Table of Contents [ ix ] Understanding packages, classes, and namespaces 254 Packages 254 Classes 254 Namespaces 254 What's next? 254 Ok, what do we extend? 255 Creating a custom namespace 255 Our first custom class 256 Overriding methods 259 Understanding the order of events 260 When can we do what? 261 What is an event-driven application? 261 Creating our own read more..

  • Page - 21

    Table of Contents [ x ] Ext JS community extensions 286 DatePickerPlus 286 PowerWizard 287 TinyMCE 287 SwfUploadPanel 288 ColorPicker 288 Additional resources 289 Samples and demos 289 Ext JS API 289 Ext JS forums 289 Step-by-step tutorials 290 Community manual 290 Spket IDE 290 Aptana Studio 290 Google 290 Summary 291 Where do we go from here? 291 Index read more..

  • Page - 22

    Preface Ext JS was developed by a unified team of programmers working toward a single goal—to provide a consistent core user interface and interaction library. Because of this, the code used for different functionalities and widgets is more coherent than in some other JavaScript libraries. Ext JS really shines in making web applications easy- to-use and intuitive. If you are read more..

  • Page - 23

    Preface [ 2 ] Chapter 3 launches us into using the first major widget—forms. We start by creating a simple form with three fields, explore the different form field types, and then add some simple validation to our form. From there we move on to creating custom validation and database-driven combo-box'es and handling form submissions. Chapter 4 provides an overview of read more..

  • Page - 24

    Preface.. [ 3 ] Chapter 11 shows how you can harness Ext.dd —the rich drag-and-drop functionality provided by Ext JS. A variety of different demonstrations allow you to understand the concepts behind Ext.dd , and how you can harness its potential within your own applications. Chapter 12 gets straight to the heart of every application—the data. Ext JS provides several read more..

  • Page - 25

    Preface [ 4 ] A good editor and debugger are extremely useful, particularly if they are specific to JavaScript, as Aptana is. The makers of Aptana have created a very powerful tool for developing web applications in JavaScript. Their editor can debug JavaScript, CSS, PHP, and many other languages as you type, and the best part is that you can link the editor up with read more..

  • Page - 26

    Preface.. [ 5 ] A block of code is set as follows: Ext.onReady(function(){ Ext.Msg.show({ title: 'Milton', msg: 'Have you seen my stapler?', buttons: { yes: true, no: true, cancel: true } }); read more..

  • Page - 27

    Preface [ 6 ] If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email suggest@ packtpub.com . If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors . Customer read more..

  • Page - 28

    Preface.. [ 7 ] Piracy Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide the location address or website name immediately so we can pursue a remedy. read more..

  • Page - 29

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 30

    Getting Started In this chapter, we will cover the basics of Ext and what it can do for us. If you're accustom to the standard web development, then you'll be excited when you learn about the elegance in the architecture of Ext, just as I was. Unlike other JavaScript libraries, Ext handles the foundation for you, so with only a few lines of code, you can have a read more..

  • Page - 31

    Getting Started [ 10 ] The Ext library started out as an extension to the moderately popular, yet very powerful Yahoo User Interface library, providing what the YUI library lacked: an easy to use API (Application Programming Interface), and real world widgets. Even though the Yahoo User Interface tried to focus on the 'User Interface', it didn't contain much that was read more..

  • Page - 32

    Chapter 1 [ 11 ] Another excellent example is the Simple Tasks task-tracking program, which utilizes a Google Gears database. Over the course of this book, you will learn how to build web interfaces as impressive as these. Ext: Not just another JavaScript library Ext is not just another JavaScript library—in fact, Ext can work alongside other JavaScript libraries by using read more..

  • Page - 33

    Getting Started [ 12 ] Communicating with the server in the background without the need to refresh the page. This allows you to request or post data to or from your web server using AJAX and process the feedback in real time. Cross-browser DOM (Document Object Model) I am sure I don't need to explain the pitfalls of browser compatibility. From the first time you read more..

  • Page - 34

    Chapter 1 [ 13 ] Getting Ext Everything we will need can be downloaded from the Ext website, at http://www.extjs.com/download . Grab the Ext SDK (Software Development Kit), which contains a ton of useful examples and the API reference. Most importantly, it contains the resources that Ext needs to run properly. Where to put Ext Once you get the SDK file, uncompress it read more..

  • Page - 35

    Getting Started [ 14 ] Included in the SDK file are a specification of dependencies, documentation, example code, and more. The adapter and resources folders shown in bold are required for Ext to work properly; everything else is just for development purposes. adapter : Files that allow you to use other libraries along side Ext build : Files that can be used to read more..

  • Page - 36

    Chapter 1 [ 15 ] ext-base.js : The Ext 'adapter'—we will learn more about this file later in this chapter ext-all.js or ext-all-debug.js : The primary Ext library file A theme file could also be included here, or at any point after the main Ext CSS file What do those files do? We have included the following three files that Ext requires to run in our page: read more..

  • Page - 37

    Getting Started [ 16 ] Time for action We can run some Ext code by adding a script section in the head of our document, right after where the Ext library has been included. Our example will bring up an Ext style alert dialog: <html> <head> <title>Getting Started Example</title> <link rel="stylesheet" type="text/css" read more..

  • Page - 38

    Chapter 1 [ 17 ] You may have noticed that we are working with an empty document that has no elements in the body. Ext does not require any pre-existing markup for it to function properly; it generates everything it needs on its own. The example Let's take a look at that example code we just ran. Every Ext component we use will start with "Ext" and read more..

  • Page - 39

    Getting Started [ 18 ] Another common problem is that the CSS file is either missing or is not referenced correctly, which will result in a page that looks awkward, as shown in the example below:. If this happens, check to make sure that you have extracted the resources folder from the SDK file, and that your paths are correct. The resources folder should read more..

  • Page - 40

    Chapter 1 [ 19 ] Default Ext adapter: <script src="lib/extjs/adapter/ext/ext-base.js"></script> For jQuery, include these files in the head of your document: <script src="lib/jquery.js"></script> <script src="lib/jquery-plugins.js"></script> <script src="lib/extjs/adapter/jquery/ext-jquery-adapter.js"> read more..

  • Page - 41

    Getting Started [ 20 ] This introduces some things we're not use to having to cope with, such as the roof being complete before the walls are done. No longer are we forced to take a line-by-line approach to web development. Ext helps us out by giving us events and handlers to which we can attach our functionality. We can set up an event that waits around, read more..

  • Page - 42

    Chapter 1 [ 21 ] A language other than English The second option requires that we include one of the language files from the build/locale folder. This option works by overwriting the English text strings, so it should be included after all of the other library files, as shown below: <link rel="stylesheet" type="text/css" read more..

  • Page - 43

    Getting Started [ 22 ] Ext JS online community The online community for Ext is full of quite a few very knowledgeable people, and often, the Ext core developers are answering questions on the forum. http://www.extjs.com/forum/ If you run into problems, or run up against a wall, a search of the forum is likely to yield what you are looking for. I would suggest getting read more..

  • Page - 44

    The Staples of Ext In this chapter, we will start to use and interact with Ext widgets for the first time, by creating a series of dialogs that interact with each other, the user, and the web page. We will be using the onReady , MessageBox , and get functions to learn how to create different types of dialogs and modify HTML and styles on our page. Furthermore, read more..

  • Page - 45

    The Staples of Ext [ 24 ] Spacer image Before we proceed any further, we should provide Ext with something it needs—a spacer image. Ext needs a 1 pixel by 1 pixel, transparent, GIF image to stretch in different ways, giving a fixed width to its widgets. We need to set the location of this spacer image using the following line: Ext.onReady(function(){ read more..

  • Page - 46

    Chapter 2 [ 25 ] As we did in the previous chapter, we have placed our code inside an onReady function. We can then start to code our dialog and configure it using a config object. The config object used for this dialog has three elements, the last of which is a nested object for the three buttons. Here is how our code now looks in a browser: This read more..

  • Page - 47

    The Staples of Ext [ 26 ] no: true, cancel: true } }); }); The onReady function is what we use to make our code wait until the document is ready. The argument passed to The argument passed to onReady is a function, which can be passed in as a function name, or created read more..

  • Page - 48

    Chapter 2 [ 27 ] First, let's discuss the CSS we need. Add the following code into the head of the document, within a style tag: .milton-icon { background: url(milton-head-icon.png) no-repeat; } Also, we will make some changes to our widgets configuration. The icon record just needs our style name as the value, milton-icon . We have also read more..

  • Page - 49

    The Staples of Ext [ 28 ] Meet JSON and the config object In our example, we are utilizing what's called a config object, which is the primary way to get Ext to do what you want. This is what provides the configuration of the different options that are available for the function that is being used. The old way We used to call functions with a pre-determined read more..

  • Page - 50

    Chapter 2 [ 29 ] var test = new TestFunction({ secondWord: 'three', fourthWord: 'wow' }); What is a config object? If you are familiar with CSS or JSON, you'll notice that a config object looks similar to these, mostly because they are all the same. Config objects are just ways of structuring data so that it can easily be read by programming read more..

  • Page - 51

    The Staples of Ext [ 30 ] Square brackets identify an array—{name: [ 'one' , 'two' , 'three' ] } . An array can also contain objects with records, values, or any number of other things. The best thing about using JSON to configure our widgets is that if we want more options, we just start typing them out. Presto! Unlike a typical function call, the order read more..

  • Page - 52

    Chapter 2 [ 31 ] Click OK and you get a prompt. A prompt is the common name for a small window that allows you to enter a single value, and is a standard element in almost every user interface. Click No and you get an alert. I'm sure you are familiar with the standard alert dialog in JavaScript. I remember the first time I used an alert dialog in read more..

  • Page - 53

    The Staples of Ext [ 32 ] Lighting the fire Now, we can start causing some reactions in our page, based on the users' responses to the dialogs. We are going to add to our switch statement, which takes care of a Yes button click. The prompt function can handle a third argument, which is the function to be executed after the Yes button has been clicked. We read more..

  • Page - 54

    Chapter 2 [ 33 ] Ext.DomHelper.applyStyles(Ext.getBody(),{ 'background-color': '#FF0000' }); Ext.getBody().highlight('FFCC00',{ endColor:'FF0000', duration: 6 }); }); break; The workhorse—Ext.get Ext is able to work so well, because it has a foundation that provides access read more..

  • Page - 55

    The Staples of Ext [ 34 ] This gives us access to an element in the document with the ID, my_id . If we take a look at the first example, it is using getBody , which retrieves the body element and applies our effect to that. Let's switch that around to use my_id instead. But first, we will need to create a my_id element in our document: <div read more..

  • Page - 56

    Chapter 2 [ 35 ] Here is an example of using a flyweight incorrectly: var my_id = Ext.fly('my_id'); Ext.fly('another_id'); my_id.highlight('FF0000',{ endColor:'0000FF', duration: 3 }); Because the flyweight re-uses the same memory each time it is called, by the time we run the highlight function on our my_id reference, the memory has changed read more..

  • Page - 57

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 58

    Forms In this chapter, we will learn how to create Ext forms, which are similar to the HTML forms that we use, without the usability restrictions and boring user interface. We use some different form field types to create a form that validates and submits asynchronously. Then we will create a database-driven, drop-down menu (ComboBox), and add some more complex field read more..

  • Page - 59

    Forms [ 38 ] Our first form To start with, let's create a form with multiple field types, a date picker, validation, error messages, and AJAX submission—just a simple one for our first try. For this example, our fields will be created using a config object instead of an instantiated Ext.form.Field component. This method will work just fine, will take less time to read more..

  • Page - 60

    Chapter 3 [ 39 ] Nice form—how does it work? The FormPanel is very similar to an HTML form. It acts as the container for our form fields. Our form has a url config so the form knows where to send the data when it is submitted. It also has a renderTo config, which defines where the form is displayed on the page. The items config element is the read more..

  • Page - 61

    Forms [ 40 ] The names of most of the config options for Ext components match their counterparts in HTML. This is because Ext was created by web developers, for web developers. Making our date field isn't much different from making the text field. Change the xtype to a datefield , and we're done. { xtype: 'datefield', fieldLabel: 'Released', name: read more..

  • Page - 62

    Chapter 3 [ 41 ] In this example, everyday except Saturday and Sunday is disabled. Keep in mind that the week starts on 0 for Sunday, and ends on 6 for Saturday. When we use other types of fields, we have different validations, like number fields that can restrict the size of a number or how many decimal places the number can have. The standard validation options read more..

  • Page - 63

    Forms [ 42 ] These built-in vtypes are intended to be simplistic, and mostly used as a starting point for creating your own vtypes . Here is an alpha vtype being used with a QuickTips balloon error message: Ext.onReady(function(){ var movie_form = new Ext.FormPanel({ url: 'movie-form-submit.php', renderTo: read more..

  • Page - 64

    Chapter 3 [ 43 ] Now we're starting to see that the built-in vtypes are very basic. The built-in alpha vtype restricts our fields to alphabet characters only. In our case, we want the user to enter a director's name, which would usually contain only alphabet characters, with just one space or a hyphen. Capitalizing the first characters in the names could possibly read more..

  • Page - 65

    Forms [ 44 ] Custom validation—create your own vtype If you're like me, regular expressions can leave you in a stupefied gaze at your monitor, so I always try to find something that is close to what I need and then modify it, rather than start from scratch. To create our own vtype , we need to add it to the vtype definitions. Each definition has a value, read more..

  • Page - 66

    Chapter 3 [ 45 ] And finally, the part that pulls it all together—the actual function used to test our field value: Ext.form.VTypes['name'] = function(v){ return Ext.form.VTypes['nameVal'].test(v); } Put all this together and we have our own custom vtype without much effort, and that can be used over and over again. Masking—don't press that key! Masking is used when read more..

  • Page - 67

    Forms [ 46 ] Radio buttons and check boxes Radio buttons and check boxes are a necessary evil. They are clumsy, and hard to work with. I try to use them only as a last resort, when nothing else will do the job. But let's add them to our form just so we can say that we did. It's not a button, it's a radio button Lets first add a set of radio buttons to read more..

  • Page - 68

    Chapter 3 [ 47 ] The ComboBox The ComboBox , or SELECT as its known in HTML, also called a drop-down menu, is a highly-useful form element. It reduces the users' need to touch the keys on their keyboards. The Ext ComboBox has a ton of practical uses, and just as many configuration options to keep track of. First, let's make a combo using local data. To do read more..

  • Page - 69

    Forms [ 48 ] To check our version of PHP, we can either execute a command in a terminal window or run a single line of PHP code. If we have access to this command line we can run php –v to check our version, otherwise, running a script that just has the single line <?php phpinfo(); ?> will do the job. This is what we would use to generate read more..

  • Page - 70

    Chapter 3 [ 49 ] "id":"2", "genre_name":"Drama", "sort_order":"1" },{ // snip...// }] } We have also set up the proxy—typically this will be an HTTP Proxy that retrieves data from the same domain as the web page. This is the most common method, but there is also read more..

  • Page - 71

    Forms [ 50 ] TextArea and HTMLEditor We are going to add a text field to our movie information form, and Ext has a couple of options for this. We can either use the standard textarea that we were familiar with from using HTML, or we can use the HTMLEditor field, which provides rich text editing: textarea : Similar to a typical HTML textarea field htmleditor : read more..

  • Page - 72

    Chapter 3 [ 51 ] Listening for form field events Ext makes it extremely simple to listen for particular user actions, such as clicking on an element or pressing a particular key. A common task would be listening for the Enter key to be pressed, and then submitting the form. So let's see how this is accomplished: { xtype: 'textfield', fieldLabel: 'Title', read more..

  • Page - 73

    Forms [ 52 ] Then, we add the listener to our combo: { xtype: 'combo', name: 'genre', fieldLabel: 'Genre', mode: 'local', store: genres, displayField:'genre', width: 130, listeners: { select: function(f,r,i){ if (i == 0){ Ext.Msg.prompt('New Genre','Name',Ext.emptyFn); read more..

  • Page - 74

    Chapter 3 [ 53 ] Just about every component in Ext has a listener. A list of valid events for these listeners can be found at the bottom of the API documentation page for each component. Buttons and form action Now, we have quite a mess of a form with only one problem – it doesn't send data to the server, which was the actual point behind creating our form read more..

  • Page - 75

    Forms [ 54 ] Inside our Save button, we have an anonymous function that runs the following code. This will run the actual submission function for our form, which sends the data to the server using AJAX. No page refresh is needed to submit the form. It all happens in the background, while the page you are looking at remains the same: movie_form.getForm().submit({ read more..

  • Page - 76

    Chapter 3 [ 55 ] Server-side validation of our form submission gives us a way to look up information on the server side, and return errors based on this. Let's say we have a database of bad movie names, and we don't want users to submit them to our database. We can submit the form to our script, which checks the database and returns a response based on the read more..

  • Page - 77

    Forms [ 56 ] Option Description failureType String Reports both client-side and server-side errors response Object Contains raw information about the server's response, including useful header information result Object Parsed JSON object based on the response from the server type String The type of action that was performed–either submit or load Now that we know what is available to the read more..

  • Page - 78

    Chapter 3 [ 57 ] Once we start working with more complex forms, this method becomes a hassle. That's why we also have the ability to load our data via an AJAX request. The server side would work much as it did when we loaded the combo box: <?php // connection to database goes here $result = mysql_query('SELECT * FROM movies WHERE id = '.$_ REQUEST['id']); If read more..

  • Page - 79

    Forms [ 58 ] Providing it with a url and params config will do the trick. The params config represents what is sent to the server side script as post/get parameters. By default, these are sent as post parameters. Object reference or component config Throughout these first few chapters, we have started to use more and more configuration objects to set up our Ext read more..

  • Page - 80

    Chapter 3 [ 59 ] With the component config, we have a 'description' of what has to happen when it is time to use the field. No memory is used right away. It's only when the user needs it that the memory is used. At that point, the field is rendered after the user has clicked on or interacted with something else, which can slow the initial display slightly. read more..

  • Page - 81

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 82

    Buttons, Menus, and Toolbars The unsung heroes of every application are the simple things like buttons, menus, and toolbars. In this chapter, we will cover how to add these items to our applications. Our example will contain a few different types of buttons, both with and without menus. A button can simply be an icon, or text, or both. Toolbars also have some read more..

  • Page - 83

    Buttons, Menus, and Toolbars [ 62 ] Menu—tbbutton+menu: A menu is just a button with the menu config filled in with options. Ext.onReady(function(){ new Ext.Toolbar({ renderTo: document.body, items: [{ xtype: 'tbbutton', text: 'Button' },{ read more..

  • Page - 84

    Chapter 4 [ 63 ] The button Creating a button is fairly straightforward; the main config option is the text that is displayed on the button. We can also add an icon to be used alongside the text if we want to. Here is a stripped-down button: { xtype: 'tbbutton', text: 'Button' } Menu A menu is just a button with the menu config populated—it's that read more..

  • Page - 85

    Buttons, Menus, and Toolbars [ 64 ] As we can see, once the menu array config is populated, the menu comes to life. To group these menu items together, we would need to set the group config and the boolean checked value for each item: menu: [{ text: 'Better', checked: true, group: 'quality' }, { text: 'Good', checked: read more..

  • Page - 86

    Chapter 4 [ 65 ] Toolbar item alignment, dividers, and spacers By default, every toolbar aligns elements to the leftmost side. There is no alignment config for a toolbar, so if we want to align all of the toolbar buttons to the rightmost side, we need to add a fill as the first item in the toolbar. If we want to have items split up between both the left and read more..

  • Page - 87

    Buttons, Menus, and Toolbars [ 66 ] Shortcuts Ext has many shortcuts that can be used to make coding faster. Shortcuts are a character or two that can be used in place of a configuration object. For example, consider the standard toolbar filler configuration: { xtype: 'tbfill' } The shortcut for a toolbar filler is a hyphen and a greater than symbol: '->' Not read more..

  • Page - 88

    Chapter 4 [ 67 ] This could just as easily be an icon beside text by changing the style class and adding the text config. { xtype: 'tbbutton', cls: 'x-btn-text-icon', icon: 'images/bomb.png', text: 'Tha Bomb' } Button handlers—click me! A button needs to do more than just look pretty—it needs to react to the user. This is where handlers come read more..

  • Page - 89

    Buttons, Menus, and Toolbars [ 68 ] Load content on menu item click Lets take our button click and do something more useful with it. For this example, we are going to add a config option to each menu item that will be used to determine what content file to load in the body of our page: { xtype: 'tbsplit', text: 'Help', menu: [{ read more..

  • Page - 90

    Chapter 4 [ 69 ] doLoad : function(file){ Ext.get('helpbody').load({ url: 'html/' + file + '.txt' }); } }; }(); I don't want to get bogged down with too much detail about this Movies class just yet, but essentially all it does is handle our menu item clicks. This class read more..

  • Page - 91

    Buttons, Menus, and Toolbars [ 70 ] This listener is added directly to the form field's config. For this, we are using a 's config. For this, we are using a s config. For this, we are using a specialkey listener, which we used in the previous chapter. This is the listener that is used to capture edit keystrokes, such as Enter and Delete among others. The read more..

  • Page - 92

    Chapter 4 [ 71 ] If we wanted to place a toolbar at the top of a window, filling the tbar config with an array of toolbar items would give us what we wanted: new Ext.Window({ title: 'Help', id: 'helpwin', width: 300, height: 300, tbar: [{ text: 'Close', handler: function(){ read more..

  • Page - 93

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 94

    Displaying Data with Grids The grid is, without doubt, one of the most widely-used components of Ext. We all have data, and this needs to be presented to the end user in an easy-to-understand manner. The spreadsheet (a.k.a.: grid) is the perfect way to do this—the concept has been around for quite a while because it works. Ext takes that concept and makes it flexible read more..

  • Page - 95

    Displaying Data With Grids [ 74 ] What is a grid anyway? Ext grids are similar to a spreadsheet; there are two main parts to each spreadsheet: Columns Rows Here our columns are Title, Released, Genre, and Price. Each of the rows contains movies such as The Big Lebowski, Super Troopers, and so on. The rows are really our data; each row in the grid represents a record read more..

  • Page - 96

    Chapter 5 [ 75 ] Before we start to create each of these, let's look at some of the terminology that will be used, because this can be confusing at first: Columns: This refers to a whole column of data, and would contain information only relevant to the display of data down through the entire column, including the heading. In Ext JS, this information is part of read more..

  • Page - 97

    Displaying Data With Grids [ 76 ] The following code should be placed inside the Ext OnReady function: var store = new Ext.data.Store({ data: [ [ 1, "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1 read more..

  • Page - 98

    Chapter 5 [ 77 ] Fields are defined using an array of objects—or if the data is to be read verbatim, just a string specifying the field name. All except one of our fields in this example can be defined with a simple name. For example, the title field could be defined using an object like this: {name: 'title'} However, in our case, because we are just read more..

  • Page - 99

    Displaying Data With Grids [ 78 ] Field Type Description Usage int Numeric data Treats the value as an integer—this is useful when you plan on making comparisons of your data to perform other actions, such as adding two columns together boolean or bool True /False data Takes care of reading the different ideas of what boolean values are, such as converting a string to an read more..

  • Page - 100

    Chapter 5 [ 79 ] The movie data isn't much good to anybody just sitting in the computer's memory. Let's display it in a grid: 1. Add your data store to the following GridPanel code: Ext.onReady(function(){ // add your data store here var grid = new Ext.grid.GridPanel({ renderTo: document.body, frame:true, title: 'Movie read more..

  • Page - 101

    Displaying Data With Grids [ 80 ] How did that work? Our data store is passed into the grid along with a column model that determines how the columns and column headers are to be displayed. This is different from the field data used in the reader, which was defined so that the reader knew how to read data. Configuring the GridPanel The GridPanel is the widget read more..

  • Page - 102

    Chapter 5 [ 81 ] We can almost read through the configuration like a sentence: Render our grid into the body of the document, frame it, and give it a title of 'Movie Database'. The height will be 200 and the width 500; it will use our 'store' data store and have the columns specified. The one reason why I love object-based configuration so much is that it is read more..

  • Page - 103

    Displaying Data With Grids [ 82 ] Option Description Usage width Specifies the column width in pixels The width of the column. Default is 100 pixels; overflowing content is hidden. sortable Specifies whether the column is sortable Boolean value specifying whether or not the column can be sorted. Using cell renderers We can do some pretty neat things with cell rendering. There are read more..

  • Page - 104

    Chapter 5 [ 83 ] Creating lookup data stores—custom cell rendering We're going to start by taking the 'genre' column, which has a numeric value, and looking up that value in the data store we created in the Forms chapter to find the textual representation of our genre number. First, we add a config option to the column model that tells it which function to use read more..

  • Page - 105

    Displaying Data With Grids [ 84 ] Combining two columns The lookup data store is a very useful renderer. However, it's more common for developers to combine two columns to form a single cell, for example, to perform a calculation on a pair of columns to figure out a total, percentage, remainder, and so on or to concatenate two or more text fields. Let's just take read more..

  • Page - 106

    Chapter 5 [ 85 ] With this fairly straightforward function, and setting a column renderer, we have an image in our grid: {header: 'Cover', dataIndex: 'coverthumb', renderer: cover_image} If you make all these renderer additions, the grid should now look like this: Built-in features Ext read more..

  • Page - 107

    Displaying Data With Grids [ 86 ] Client-side sorting Unless specified as a server-side (remotely) sorted grid, an Ext grid is able to sort columns on the client side. Server-side sorting should be used if the data is paged, or if the data is in such a format that client-side sorting is not possible. Client-side sorting is quick, easy, and built-in: {header: 'Tagline', read more..

  • Page - 108

    Chapter 5 [ 87 ] Any column can be dragged to a different order in the grid . This screenshot shows the Price column being moved to between the Title and Director columns. We can disable this functionality entirely by setting a config option in the GridPanel: enableColumnMove: false This move event—and many other events in the grid—can be monitored and responded to. read more..

  • Page - 109

    Displaying Data With Grids [ 88 ] Displaying server-side data in the grid With Ext we can pull data into our web page in many ways. We started by pulling in local array data for use in the grid. Now we are going to pull the data in from an external file and a web server. Loading the movie database from an XML file We have this great movie database now, read more..

  • Page - 110

    Chapter 5 [ 89 ] The other change we would need to make is to alter the data reader, and set the location of our XML file so that the data store knows where to fetch the data from. There are four basic changes that need to happen when moving from local to remote data: The url config option, specifying the location of our data, needs to be added—this read more..

  • Page - 111

    Displaying Data With Grids [ 90 ] Loading the movie database from a JSON file We're in the same boat as XML with this data format. Just changing the reader and setting up some config options will take care of everything. The JSON rows of data are expected to be in the form of an array of objects— our movies.json file will therefore contain data like this: { read more..

  • Page - 112

    Chapter 5 [ 91 ] id:'id' }, [ 'id', 'coverthumb', 'title', 'director', {name: 'released', type: 'date', dateFormat: 'Y-m-d'}, 'genre', 'tagline', {name: 'price', type: 'float'}, {name: 'available', type: 'bool'} ]) }); store.load(); This grid will have an identical look and the same functionality read more..

  • Page - 113

    Displaying Data With Grids [ 92 ] The PHP code used in these examples is meant to be the bare minimum needed to get the job done. In a production environment you would want to account for security against SQL injection attacks, other error checking, and probably user authentication—which the example code does not account for. Programming the grid Most of the code we read more..

  • Page - 114

    Chapter 5 [ 93 ] We will also pass the selection model a config that specifies single row selections only. This stops the user from selecting multiple rows at the same time. Listening to our selection model for selections Listeners for a grid can be included in many different places depending on the desired interaction. Earlier, we applied a listener to our column model read more..

  • Page - 115

    Displaying Data With Grids [ 94 ] Selecting a row now brings up an alert dialog. Let's take a look at what is happening here: A listener is set for the rowselect event. This waits for a row to be selected, and then executes our function when this happens. Our function is passed a selection model, the numeric index of the row selected (starting with zero for read more..

  • Page - 116

    Chapter 5 [ 95 ] All we are really doing here is changing the data store. The data in our database in our database on the web server has stayed the same, and the web server has no idea whether anything has changed. It's up to us to communicate this change to the server via an AJAX request or via some other method you may prefer to use. Let's take a quick read more..

  • Page - 117

    Displaying Data With Grids [ 96 ] Here is a button we can add to the top toolbar to allow us to hide or show a column. We will also change the text of the button based on the visibility of the column: { text: 'Hide Price', handler: function(btn){ var cm = grid.getColumnModel(); var pi = cm.getIndexById('price'); if (cm.isHidden(pi)){ read more..

  • Page - 118

    Chapter 5 [ 97 ] $arr = array(); If (!$rs = mysql_query($sql)) { Echo '{success:false}'; }else{ $rs_count = mysql_query($count_sql); $results = mysql_num_rows($rs_count); while($obj = mysql_fetch_object($rs)){ $arr[] = $obj; } Echo '{success:true,results:'.$results.', rows:'.json_encode($arr).'}'; } ?> This PHP script will take care of the server-side read more..

  • Page - 119

    Displaying Data With Grids [ 98 ] The following code will add a paging toolbar: bbar: new Ext.PagingToolbar({ pageSize: 3, store: store }) And of course we need to change the of course we need to change the we need to change the url of our data store to the url of the PHP server-side paging code. A totalProperty is also required when paging data. This is read more..

  • Page - 120

    Chapter 5 [ 99 ] root:'rows', id:'id' }, // reader column model here //) }); We also need to add a view configuration to the grid panel. This view helps the grid to visually account for grouped data. var grid = new Ext.grid.GridPanel({ renderTo: document.body, read more..

  • Page - 121

    Displaying Data With Grids [ 100 ] If you now expand the context menu for the column headings, you will see a new item in the menu for Group By This Field that will allow the user to change the grouping column on the fly. Summary We have learned a lot in this chapter about presenting data in a grid. With this new-found knowledge we will be able to read more..

  • Page - 122

    Editor Grids In the previous chapter we learned how to display data in a structured grid that users could manipulate. But one major limitation was that there was no way for the users to edit the data in the grid in-line. Fortunately, Ext provides an EditorGridPanel , which allows the use of form field type editing in-line—and we will learn about it in this chapter. read more..

  • Page - 123

    Editor Grids [ 102 ] All of the fields in this table can be edited in-line using form fields such as the text field, date picker, and combo box. Working with editable grids The change from a non-editable grid to an editable grid is quite a simple process to start with. The complexity comes into the picture when we start to create a process to handle edits and read more..

  • Page - 124

    Chapter 6 [ 103 ] editor: title_edit}, {header: "Director", dataIndex: 'director', editor: director_edit}, {header: "Released", dataIndex: 'released', renderer: Ext.util.Format.dateRenderer('m/d/Y')}, {header: "Genre", dataIndex: 'genre', renderer: genre_name}, read more..

  • Page - 125

    Editor Grids [ 104 ] Making these changes has turned our static grid into an editable grid. We can click on any of the fields that we set up editors for, and edit their values. Here we see some changes have been made to the titles of a few of the movies, turning them into musicals. The editor gets activated with a single click on the cell of data; pressing read more..

  • Page - 126

    Chapter 6 [ 105 ] Any form field type can be used as an editor. These are some of the standard types: TextField NumberField ComboBox DateField TimeField CheckBox These editors can be extended to achieve special types of editing if needed, but for now, lets start with editing the other fields we have in our grid—the release date and the genre. Editing a date value A read more..

  • Page - 127

    Editor Grids [ 106 ] This column also takes advantage of a renderer, which will co-exist with the editor. Once the editor field is activated with a single click, the renderer passes the rendering of the field to the editor and vice versa. So when we are done with editing the field, the renderer will take over formatting the field again. Edit with a ComboBox Let's read more..

  • Page - 128

    Chapter 6 [ 107 ] What's a dirty cell? A field that has been edited and has had its value changed is considered to be 'dirty' until the data store is told otherwise. This 'dirty' value has been saved to a temporary data store that contains a version of our data with all of the changes made. Our original data store stays unchanged. We can save the changes to read more..

  • Page - 129

    Editor Grids [ 108 ] Property Description grid The grid that the edit event happened in record The entire record that's being edited; other column values can be retrieved using this objects 'data' property field The name of the column that was edited value A string containing the new value of the cell originalValue A string containing the original value of the cell row The index read more..

  • Page - 130

    Chapter 6 [ 109 ] tbar: [{ text: 'Remove Movie' }] } Removing grid rows from the data store Let's add a remove button to the toolbar in our grid. When this button is clicked, it will prompt the user with a dialog that displays the movie title. If the Yes button is clicked, then we can remove the selected row from the data store, otherwise we read more..

  • Page - 131

    Editor Grids [ 110 ] Let's take a look at what is happening here. We have defined some variables that we will use to determine if there were selections made, and what the selections were: sm : The selection model is retrieved from our grid sel : We used the selection model to retrieve the row that has been selected grid.getStore().remove(sel) : Passing the data stores read more..

  • Page - 132

    Chapter 6 [ 111 ] }) ); grid.startEditing(0,0); } } The first argument to the insert function is the point at which to insert the record. I have chosen zero, so the record will be inserted at the very top. If we wanted to insert the row at the end we could simply retrieve the row count for our data store. read more..

  • Page - 133

    Editor Grids [ 112 ] After inserting the new row, we call a function that will activate a cells editor. This function just needs a row and column index number to activate the editor for that cell. grid.startEditing(0,0); This gives our user the ability to start typing the movie title directly after clicking the Add Movie button. Saving edited data to the server read more..

  • Page - 134

    Chapter 6 [ 113 ] To update the database with cell-by-cell changes, we need to know three things: field : What field has changed Value : What the new value of the field is record.id : Which row from the database the field belongs to This gives us enough information to be able to make a distinct update to a database. We communicate with the server (using AJAX) by read more..

  • Page - 135

    Editor Grids [ 114 ] This is what's available to us when using the afteredit event: Option Description grid Reference to the current grid record Object with data from the row being edited field Name of the field being edited value New value entered into the field originalValue Original value of the field row Index of the row being edited—this will help in finding it again read more..

  • Page - 136

    Chapter 6 [ 115 ] }, failure: function(resp,opt) { Ext.Msg.alert('Error', 'Unable to delete movie'); } }); } read more..

  • Page - 137

    Editor Grids [ 116 ] }) ); grid.startEditing(0,0); }, failure: function(resp,opt) { Ext.Msg.alert('Error','Unable to add movie'); } }); } } Much like editing and deleting, we are going to send a request to the server to have a new row inserted. This read more..

  • Page - 138

    Chapter 6 [ 117 ] Summary The Ext JS grid functionality is one of the most advanced portions of the framework. With the backing of the Ext.data package, the grid can pull information from a remote server in an integrated manner—this support is built into the grid class. Thanks to the array of configuration options available, we can present this data easily in a read more..

  • Page - 139

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 140

    Layouts A layout turns your forms, grids, and other widgets into a true web application. The most widely-used layout styles can be found in operating systems such as Microsoft's Windows, which uses border layouts, resizable regions, accordions, tabs, and just about everything else you can think of. To keep looks consistent between browsers, and to provide common user interface read more..

  • Page - 141

    Layouts [ 120 ] A viewport has regions that are laid out in the same way as a compass, with North, South, East and West regions—the Center region represents what's left over in the middle. These directions tell the panels where to align themselves within the viewport and, if you use them, where the resizable borders are to be placed: North West Center East South read more..

  • Page - 142

    Chapter 7 [ 121 ] This layout is what's called a 'border' layout, which means that each region is separated by a somewhat three dimensional border bar that can be dragged to resize the regions. This example contains four panel regions: North: The toolbar West: A form Center: Grid in a tab panel East: A plain panel containing text Note that there is no 'South' panel in read more..

  • Page - 143

    Layouts [ 122 ] Each region is defined as one of the four compass directions—East, West, North, and South. The remainder in the middle is called the center region, which will expand to fill all of the remaining space. Just to take up some blank space in each region and to give a visual indicator as to where the panels are, we defined an 'HTML' config that read more..

  • Page - 144

    Chapter 7 [ 123 ] I want options Typically, when a split is used, it's combined with a few other options that make the section more useful, such as width , minSize , and collapseMode . Here are some of the more commonly-used options: Option Value Description split true /false Boolean value that places a resizable bar between the sections collapsible true /false Boolean value read more..

  • Page - 145

    Layouts [ 124 ] Adding these config options to our west panel would give us the following look: Normal/Expanded Collapsed Expanding and collapsing a panel that does not have a width specified can produce rendering problems. Therefore, it's best to specify a width for panels—of course this is not needed for the center, as this panel automatically fills the read more..

  • Page - 146

    Chapter 7 [ 125 ] The items config is an array of objects that defines each of the tabs contained in this tabpanel . The title is the only option that's actually needed to give us a tab, and right now html is just being used as a placeholder, to give our empty tab some content. We will also need to add an activeTab config that is set to zero read more..

  • Page - 147

    Layouts [ 126 ] html: 'Center' },{ title: 'Movie Descriptions', html: 'Movie Info' }] } Both the Movie Grid and Movie Descriptions tabs are just plain panels right now. So let's add some more configuration options and widgets to them. Widgets everywhere Earlier, I mentioned that any type of panel widget could be added directly to a read more..

  • Page - 148

    Chapter 7 [ 127 ] xtypes offer a quick way to instantiate a new component with minimal typing. This is sometimes referred to as 'lazy rendering' because the components sit around waiting to be displayed before they actually execute any code. This method can help conserve memory in your web application. As we are adding this grid to a tab—which is essentially just a read more..

  • Page - 149

    Layouts [ 128 ] Accordions The accordion is a very useful layout that works somewhat like a tab panel, where we have multiple sections occupying the same space, with only one showing at a time. This type of layout is commonly used when we're lacking the horizontal space needed for a tab panel, but instead have more vertical space available. When one of the accordion read more..

  • Page - 150

    Chapter 7 [ 129 ] Now we should have a layout that looks like, this when we switch to the Movie Descriptions tab: Each panel now has a description of the movie, which was loaded from a text file on the web server. Let's take a closer look at that. autoLoad: 'html/1.txt' This loads the file from the URL specified into the body section of the panel. The file read more..

  • Page - 151

    Layouts [ 130 ] By changing the xtype to toolbar and copying the array of toolbar items over, we will end up with a snazzy menu bar at the top of the screen. { region: "north", xtype: 'toolbar', items: [{ xtype: 'tbspacer' },{ xtype: 'tbbutton', text: 'Button', handler: function(btn){ btn.disable(); read more..

  • Page - 152

    Chapter 7 [ 131 ] Even though this toolbar does not contain a blinking marquee with my name in it, it will be quite useful for our application. All of the navigation for your application can be placed in it, which might trigger new tabs to be added to the center region, or be used used to search for movie titles, or whatever else that is needed. A form to read more..

  • Page - 153

    Layouts [ 132 ] After adding the form items and buttons, our layout should look like this: Tricks and advanced layouts Some of the more complex web applications will need to do things that are not as simple as setting a few configuration values, for example nesting one layout within another layout, or adding icons to your tabs. But with Ext JS these kinds of things read more..

  • Page - 154

    Chapter 7 [ 133 ] For example, if we wanted the center region split into two horizontal regions, we could add a nested layout with center and North regions. This is typical of an application where you have a data panel (Center) to list email messages and a reader panel (South) to preview the entire read more..

  • Page - 155

    Layouts [ 134 ] This produces a layout that would look like this: Percentages are not allowed in border type layouts. There must always be a 'center' region that fills the remaining space not taken up by the other regions', which are all defined in pixel sizes. Icons in tabs Don't you just love it when you can have a visual indicator to show which tab does what? read more..

  • Page - 156

    Chapter 7 [ 135 ] Don't click on that tab too quickly, it might go off! Programmatically manipulating a layout We have the ability to modify just about anything, after the layout has been rendered. For example, we can, like add new tabs, hide, and display panels and change the content of any of the panels. Let's experiment with a couple of different things we can read more..

  • Page - 157

    Layouts [ 136 ] This little bit of code will check to see if the panel is visible (expanded), and if its not will expand it. Give me another tab Adding a tab is as easy as creating a single tab. We first need to locate the tab panel within our layout. Luckily we just need to add an id config to our tab panel so that we can easily locate it. easily read more..

  • Page - 158

    Ext JS Does Grow on Trees Hierarchical data is something that most developers are intimately familiar with. The root-branch-leaf structure is the underlying feature for many user interfaces, from the file and folder representations in Windows Explorer to the classic family tree showing children, parents, and grandparents. The Ext.tree package enables developers to bring these data read more..

  • Page - 159

    Ext JS Does Grow On Trees [ 138 ] From tiny seeds... In this chapter, we'll see how you can build a tree from first principles with a minimal of code. We'll also discuss the unique data structure that is used to populate the tree, and the way in which clever use of that data can let you harness important configuration options. The Ext JS tree natively supports read more..

  • Page - 160

    Chapter 8 [ 139 ] In the examples that follow, we'll assume that you have a blank-slate HTML page ready and waiting, with all of the Ext JS dependencies included. Most of the code we will use builds on what came before, to make sure that we're only working with bite-sized pieces. Bear this in mind when you look at them in isolation. It is best practice to put read more..

  • Page - 161

    Ext JS Does Grow On Trees [ 140 ] Finally, we create the tree itself, using the Ext.tree.TreePanel class: var tree = new Ext.tree.TreePanel({ renderTo:'treecontainer', loader: treeLoader, root: rootNode }); This is just a matter of passing the root node and the TreeLoader in as configuration options, as well as using the read more..

  • Page - 162

    Chapter 8 [ 141 ] JSON The standard TreeLoader supports JSON in a specific format—an array of node definitions. Here's a cut-down example: [ { id: '1', text: 'No Children', leaf: true }, { id: '2', text: 'Has Children', children: [{ id: '3', text: 'Youngster', leaf: true }] } ] The read more..

  • Page - 163

    Ext JS Does Grow On Trees [ 142 ] Extra data Although the id , text , and leaf properties are the most commonly-used properties, the way in which they are populated by JSON isn't exclusive to them. In fact, any configuration property of a TreeNode can be initialised by JSON, which will prove to be a useful trick when we begin to explore the other features of read more..

  • Page - 164

    Chapter 8 [ 143 ] Tending your trees We're now going to discuss the main features that you can bolt on to your tree to make it a little bit more useful. Drag-and-drop, sorting, and node editing, are the kinds of things that lift the TreePanel from being a clever way of displaying data, to being a great way of manipulating it. Drag and drop Ext JS takes care of read more..

  • Page - 165

    Ext JS Does Grow On Trees [ 144 ] The TreePanel 's beforemovenode event fires at just the right time for us—after the mouse button is released to signify we want to do a drop, but before the TreePanel UI is updated to reflect that. We are most likely to add code such as the following to tell the server about node move events: tree.on('beforemovenode', read more..

  • Page - 166

    Chapter 8 [ 145 ] Sorting We can sort nodes in a TreePanel in a very flexible manner by using the TreeSorter . Again, building on our previous code, we can create a TreeSorter such as this: new Ext.tree.TreeSorter(tree, { folderSort: true, dir: “asc" }); Because TreeSorter assumes a couple of defaults—specifically, that your leaf nodes are marked with read more..

  • Page - 167

    Ext JS Does Grow On Trees [ 146 ] Editing There are many scenarios in which editing the value of your nodes could be useful. When viewing a hierarchy of categorized products, you may wish to rename either the categories or the products in-line, without navigating to another screen. We can enable this simple feature by using the Ext.tree.TreeEditor class: var editor = new read more..

  • Page - 168

    Chapter 8 [ 147 ] This has been a quick overview of how to create a very simple in-line editor. There are also means of using this class to create more complicated features. The TreeEditor constructor can take up to two optional parameters on top of the single mandatory parameter shown in the example above. These are a field configuration object and a read more..

  • Page - 169

    Ext JS Does Grow On Trees [ 148 ] What if we want to allow multiple nodes to be selected? How can we do that, and how can we handle the selectionchange event in that configuration? We can use Ext.tree.MultiSelectionModel when creating our TreePanel : var tree = new Ext.tree.TreePanel({ renderTo:'treeContainer', loader: treeLoader, root: read more..

  • Page - 170

    Chapter 8 [ 149 ] { text: 'Sort', handler: sortHandler } ] }); tree.on('contextmenu', treeContextHandler); The TreePanel provides a contextmenu event which fires when the user right-clicks on a node. Note that our listeners are not anonymous functions as they have been in the previous examples—instead they have been split off for easy reading. First, the read more..

  • Page - 171

    Ext JS Does Grow On Trees [ 150 ] The handler for our Sort menu entry is given here: function sortHandler() { tree.getSelectionModel().getSelectedNode().sort( function (leftNode, rightNode) { return (leftNode.text.toUpperCase() < rightNode.text. toUpperCase() ? 1 : -1); } ); } Again, we use the selection model to get the read more..

  • Page - 172

    Chapter 8 [ 151 ] As with our other handler functions, we start by getting the currently-selected node in the tree, and then call the filter function. This function takes three arguments: 1. The value to filter by 2. The attribute to filter on; this is optional and defaults to text 3. The starting node for the filter We pass the selected node as the starting read more..

  • Page - 173

    Ext JS Does Grow On Trees [ 152 ] Cosmetic In terms of purely cosmetic options, TreePanel provides the lines option, which, when set to false , will disable the guide-lines that show the hierarchy of the TreeNodes within the panel. This can be useful if you're creating a very simple tree for which lines would just clutter the interface. hlColor is applicable for read more..

  • Page - 174

    Chapter 8 [ 153 ] You'll get a node that starts off as disabled, but when enabled will act as a link to the Ext JS website. This feature is extremely useful for passing application-specific information to your TreeNodes . For example, your server logic may dictate that particular nodes cannot have children. Setting allowChildren:false means that the node can't be used as read more..

  • Page - 175

    Ext JS Does Grow On Trees [ 154 ] The expandPath method's first parameter is the "path" of a node. The path uniquely identifies the node within the hierarchy, and takes the form of a string which fully qualifies the location of a node in the tree. For example, a path could look like this: /n-15/n-56/n-101 Here, we have a representation of the location of the read more..

  • Page - 176

    Chapter 8 [ 155 ] In some cases you may need to mass-manipulate the attributes of your node hierarchy. You can do this by using the TreeNode.eachChild method: root.eachChild(function(currentNode) { currentNode.attributes.price += 30; }); Because the first parameter to eachChild is a function, we can perform any logic that is required of our application. Event capture We've read more..

  • Page - 177

    Ext JS Does Grow On Trees [ 156 ] This example demonstrates a pattern that you have seen throughout Ext JS—returning false from an event handler will cancel the action. In this case, if the price of the node being added is greater than the maximumPrice assigned to its parent, the function will return false , and the node will not be added. Remembering state In read more..

  • Page - 178

    Chapter 8 [ 157 ] If treestate has previously been recorded, we use that to expand the tree out to the previously been recorded, we use that to expand the tree out to the been recorded, we use that to expand the tree out to the last-expanded node. Caveats As mentioned, this is a naive implementation. It doesn't handle cases where the user expands and, then collapses read more..

  • Page - 179

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 180

    Windows and Dialogs In the olden days of the web, users of traditional backend systems would spend their time crunching data in list and form-based interfaces. Pick an item from a list of customer orders, then navigate to a detail form, rinse, and repeat. The trouble is that we're talking about thousands of entries in a list, and lots of detail in the forms. The read more..

  • Page - 181

    Windows and Dialogs [ 160 ] Ext.Window is another fully-blown Ext.Container , giving it a wealth of underlying settings which will be familiar from the other parts of the Ext JS framework. It also hints at the types of interfaces that we can build in a Window, given that we can set the internal layout of a Container to a range of different options. We're also read more..

  • Page - 182

    Chapter 9 [ 161 ] The first thing to notice is that Msg.alert takes two parameters, whereas the standard alert takes only one. The first allows you to specify a title for the alert dialog, and the second specifies the body text. The previous code results in a messagebox like this: As you can see, it performs very much the same function as a standard alert but read more..

  • Page - 183

    Windows and Dialogs [ 162 ] Again, Msg.prompt allows you to pass a title as the first argument, and the body text is the second. The third argument is a callback function that will be called when a button—either OK or Cancel—is clicked in the prompt. The callback has two arguments: the button that was clicked and the text that was provided by the user; you read more..

  • Page - 184

    Chapter 9 [ 163 ] It's all progressing nicely There's a fourth standard messagebox which is included with Ext JS one that isn't just a replacement for a basic JavaScript pop up. This is the progress dialog. Ext.Msg.progress isn't designed to be used independently like the other Ext messageboxes, and doesn't need user input. In fact, if you trigger it like this: read more..

  • Page - 185

    Windows and Dialogs [ 164 ] Roll your own The four methods for creating messageboxes that we've just covered are essentially shortcuts to a fifth method: Ext.Msg.show . This method takes a configuration object as its single argument, and the configuration options within this object allow the creation of a messagebox that supports all of the features available via our shortcut read more..

  • Page - 186

    Chapter 9 [ 165 ] Ext .Msg.OKCANCEL Ext .Msg.YESNO Ext .Msg.YESNOCANCEL This variety of ready-made options provides you with a fair bit of flexibility when it comes to the appearance of your messageboxes, but we can go further. As mentioned, the icon constants are simply strings representing CSS class names. For example, Ext.Msg.QUESTION provides the ext-mb-question string. This read more..

  • Page - 187

    Windows and Dialogs [ 166 ] By using this in tandem with other options such as title and msg , you can create a custom progress dialog. Similarly, the prompt and multiline options allow the creation of a custom input pop up: Ext.Msg.show({prompt:true, multiline:true}); Here, we create a pop up that accepts multiple lines of input. But by omitting the multiline value read more..

  • Page - 188

    Chapter 9 [ 167 ] Running this gives you an empty pop up window that in itself is…well, completely useless; but it does show off a few of the interesting default features of an Ext. Window . Straight out of the box, without any configuration, your window will be draggable, resizable, and will have a handy close icon in the upper right corner of the dialog box. read more..

  • Page - 189

    Windows and Dialogs [ 168 ] In the above example we have added two textfields , the first one using "lazy" xtype initialization, and the second one using standard object initialization. These two items will be added to the window's internal panel, but the manner in which they are displayed can be controlled based on the window's layout property. Layout Ext JS read more..

  • Page - 190

    Chapter 9 [ 169 ] Configuration In addition to the various ways of filling the window's content area, we also have a great deal of flexibility when it comes to the appearance and behavior of each pop up. There are many configuration options provided by the Ext.Window 's superclass hierarchy, which starts with Ext.Panel , while also having a wealth of options of its read more..

  • Page - 191

    Windows and Dialogs [ 170 ] We do have another option. The autoHeight and autoWidth config settings, which are both booleans, allow you to fill your window with components without having to to worry about ensuring that your height and width values are absolutely correct. This is a really useful tool during development, when it's unlikely that you know the exact read more..

  • Page - 192

    Chapter 9 [ 171 ] These features are disabled by default, but they are fully-featured and work in much the same way as their desktop equivalents. When set to true , new icons appear in the upper right of the window that are similar in appearance to the ones on the Windows operating system. Maximizable allows the window to be expanded to fill the whole of the read more..

  • Page - 193

    Windows and Dialogs [ 172 ] Depending on your requirements, you may choose to use one or more of these content areas to provide tools to allow your users to manipulate and consume the information within the window. A typical example would be to create a window with a form layout, which then includes the Save and Cancel buttons within the footer. This reflects the read more..

  • Page - 194

    Chapter 9 [ 173 ] The functionality delivered by the close and hide methods has already been demonstrated—it is provided by the window's close icon. There are a few more methods that allow programmatic control over items, that we've already covered, such as the minimize and maximize methods. This basic functionality is augmented by the restore method, which is used read more..

  • Page - 195

    Windows and Dialogs [ 174 ] In the above example, we're creating a new window, which we set as minimizable , and then add an event listener for the minimize event. We then show the window on the screen. Our doMin event handling function looks like this: function doMin() { w.collapse(false); w.alignTo(document.body, 'bl-bl'); } We simply tell our window to read more..

  • Page - 196

    Chapter 9 [ 175 ] Window management In a rich Internet application, it can be desirable to allow the user to have many windows open simultaneously, reviewing a variety of information without having to navigate to separate pages. Ext JS allows for this: you can create any number of non-modal windows and manipulate them as you see fit. However, we face a problem when read more..

  • Page - 197

    Windows and Dialogs [ 176 ] Here's a screenshot of the a simple application developed to support this: The lists have deliberately been left plain to avoid the need for extra JavaScript deliberately been left plain to avoid the need for extra JavaScript been left plain to avoid the need for extra JavaScript code—an application such as this could really benefit from grids read more..

  • Page - 198

    Chapter 9 [ 177 ] <h3>Bill</h3> <p>Started at 12:31pm</p> <div class="content"></div> </div> </div> <div id="agents"> <h2>Agents <button id="hideAgents">Hide All</button> <button id="tileAgents">Tile</button> </h2> <div read more..

  • Page - 199

    Windows and Dialogs [ 178 ] The next few lines make more sense given the HTML we discussed previously. We use our shortcut to Ext.select to add event listeners to all of the divs within #mySessions —handled by the showSession function—and within #agents —handled by showAgent . The third argument to the on function ensures that we maintain scope when the read more..

  • Page - 200

    Chapter 9 [ 179 ] We're now sure that the win variable holds a valid reference to a window, so we can go ahead and show the window. After we do so, we want to align it with the div that was clicked to show it, so the window's alignTo function is called. That's a whistle-stop tour of the showSession function. read more..

  • Page - 201

    Windows and Dialogs [ 180 ] if(previousWin) { if(win.getEl().getWidth() + previousWin.getEl().getRight() > Ext.getBody().getWidth()) { win.alignTo(document.body, 'tl-tl', [0, previousWin.getEl().getHeight()]); } else { read more..

  • Page - 202

    Chapter 9 [ 181 ] The great thing is that Window is flexible enough to slot straight into any application you may want to build with it. For ultimate power, simply fill it with custom HTML, or to create an integrated experience use Ext components. The fact is that the window subclasses panel provides you with the ability to construct complex pop ups by using the read more..

  • Page - 203

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 204

    Effects The easiest thing to do when writing a software application is to switch into programmer mode—to focus on the code, and not on the end user experience. The architecture of a system is extremely important, but if the user is not satisfied with their interactions with the system, then the project can only be seen as a failure. Ext JS contributes to solving this read more..

  • Page - 205

    Effects [ 184 ] Fancy features As well as the building blocks of animation, we're going to examine various pieces of eye candy that you can find dotted around the Ext framework. There are a number of classes that provide added functionality to give your users feedback or assistance when they're using your application, and many components support these features straight out read more..

  • Page - 206

    Chapter 10 [ 185 ] Fading The term "fading" is used in Ext.Fx to refer to a change in opacity—from 100% opaque to 0%(fade out) and vice versa(fade in). In other words, we're making something disappear and reappear—but as this is the Effects chapter, the transition is animated. The two methods that perform these transitions are Ext.Fx.fadeOut and Ext.Fx.fadeIn , read more..

  • Page - 207

    Effects [ 186 ] In addition to the configuration options such as endOpacity that are specific to individual effects methods, there are also a number of common options shared by all Ext.Fx methods. These allow you to tweak the behavior of your effects even further. We'll discuss these later in this chapter. Framing Framing is reminiscent of a video game radar read more..

  • Page - 208

    Chapter 10 [ 187 ] The default settings could be used to discard elements that are no longer needed—perhaps deletion events could be signified with a call to Ext.Fx.ghost . As mentioned previously, we can also cater for other situations by specifying different direction for the ghosting depending on the situation. The standard Ext.Fx anchor points, used in animation and read more..

  • Page - 209

    Effects [ 188 ] This is triggered by the following basic code: Ext.get('target').highlight(); Ext JS takes highlighting to the next level. While the standard usage affects the CSS background color of the target element, you can choose any CSS property, such as the color or border color. You can also specify the endColor of the highlight. In our second and more complex read more..

  • Page - 210

    Chapter 10 [ 189 ] Scaling the Ext JS heights Scaling is one of the few Ext JS effects that has a specific use, rather than simply being an overlay on top of another action. It changes the dimensions of an element using a smooth transition, which has numerous applications. We can expand text areas to give more space for user input; we can replicate maximize and read more..

  • Page - 211

    Effects [ 190 ] Here, we dictate that the target will slideOut to the top right. As with Ext.Fx.puff , you must be aware of the elements that surround the item you're sliding; text and other non-absolutely-positioned elements may be pushed around during the slide. Switching from seen to unseen The switchOff method is another means of removing an element from the screen. read more..

  • Page - 212

    Chapter 10 [ 191 ] By setting one of these values and passing it to shift , we can cause the target element to move to the x,y coordinates and resize to the width , height dimensions—in the smooth manner which we've come to expect of Ext.Fx . Here's an example: Ext.get('target').shift({ x: 5, y: 300, width: 300, height: 200 }); In this read more..

  • Page - 213

    Effects [ 192 ] Anchoring yourself with Ext Specifying directions, anchors, alignment, and more is all based around a scheme of anchor positions. These are used by Ext JS's animation system to determine the direction of movement, and they have a pretty simple naming convention: Anchor Position String Description tl Top left corner t Center of the top edge tr Top right corner l read more..

  • Page - 214

    Chapter 10 [ 193 ] In this example, we pass a standard object literal to the switchOff method, and the duration property is set to 10, indicating that the switchOff should take place over ten seconds. With the default behavior of some of the Ext.Fx methods, you end up with some sub-optimal transitions. For example, many of the effects that cause an element to read more..

  • Page - 215

    Effects [ 194 ] Easy does it Our next configuration option is easing . In animation terminology, easing refers to the means by which the transition eases from a stop to movement and back to a stop again. By default, Ext JS effects will abruptly start and stop, but by using the easing option, we can specify how it will accelerate and decelerate at the start and read more..

  • Page - 216

    Chapter 10 [ 195 ] That's a list of the options supported by Ext JS Base. Ones like bounceIn provide a bit of a spring to the effect, which is perhaps more useful in a gaming application than in data entry, but the beauty of having such a wide choice is that you are likely to find something that fits your requirements. The final few configuration options read more..

  • Page - 217

    Effects [ 196 ] As you can see from this example, we're calling slideIn followed by highlight , which indicates that highlight will be added to the effects queue to run after slideIn completes. Queuing Queuing is the default behavior for effects set up either by method chaining, or by multiple calls. The following code sample is functionally-identical to our previous read more..

  • Page - 218

    Chapter 10 [ 197 ] Such code is useful if we need to interrupt an animation to give control back to the user—an ability that can be crucial in giving the user the responsiveness they require. However, in other circumstances you may want to prevent the user from interfering with the current state of the read more..

  • Page - 219

    Effects [ 198 ] There's another piece of the animation puzzle that we're yet to touch upon: Ext.Element.animate . This is the generic means of applying animations to an element, and is a shortcut to the same underlying methods that are used by all of the Ext.Element methods that support animation. Advanced applications of this method involve using the Ext.lib.anim read more..

  • Page - 220

    Chapter 10 [ 199 ] Let's look at the first scenario-that is, using an Ext.LoadMask to simply overlay an element with a message. var target = Ext.get('target'); var mask = new Ext.LoadMask(target); mask.show(); In the above example, once we obtain an element using Ext.get , we pass it into the Ext.LoadMask constructor and call the show method on the LoadMask instance. read more..

  • Page - 221

    Effects [ 200 ] Data binding and other tales Although it initially seems that the Ext.Element approach is better, there are actually a few compelling reasons for using the full LoadMask . The most interesting reason is that it can be tied to a specified Ext.data.Store instance, allowing you to automatically mask and unmask your element based on when the store is read more..

  • Page - 222

    Chapter 10 [ 201 ] The Ext.QuickTips class is a singleton that provides a very easy method of creating rich tooltips. It allows you to put your QuickTip setup information directly into the markup of your page—a great method for reducing the configuration required. In many cases, having the description text within your main HTML makes the most sense. This approach is read more..

  • Page - 223

    Effects [ 202 ] Ext.ToolTip has a number of other interesting options, such as the ability to tweak the time it takes for the tooltip to appear and then vanish, by using the showDelay and hideDelay configuration properties. This can be useful if you need the tooltip to appear promptly when the user hovers over its associated element, or if you want to make sure read more..

  • Page - 224

    Chapter 10 [ 203 ] The second of the classes we covered, LoadMask , can form a critical part of a system, ensuring not only that your users are prevented from interrupting a load operation, not only that your users are prevented from interrupting a load operation, that your users are prevented from interrupting a load operation, your users are prevented from interrupting a read more..

  • Page - 225

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 226

    Drag-and-Drop In the world of software development, desktop applications are still number one. Although web sites and, latterly, web applications are developing rapidly using frameworks such as Ext JS, they are yet to reach the level of complexity that we see in our most extensive desktop programs. Drag-and-drop, the subject matter of this chapter, is a good example of this. read more..

  • Page - 227

    Drag-and-Drop [ 206 ] In addition, the Ext.dd package contains a number of classes that allow you to create simple drag-and-drop features with ease—shopping carts included. There is sufficient granularity to support more advanced scenarios as well, providing you with a means of creating custom drag-and-drop solutions that are fully integrated into your Ext application. In this read more..

  • Page - 228

    Chapter 11 [ 207 ] If you're using an element with a little bit of text in, you'll see that Ext uses that as the contents of the status proxy, but that's as far as it goes in trying to replicate your element when creating a visualization of the drag action. The dimensions of your element will be discarded, and the proxy will try and fit the content in as read more..

  • Page - 229

    Drag-and-Drop [ 208 ] The DropTarget constructor accepts a mixed element object—in this case, the ID of an element on our page—and defines that element as a valid target for any drop operations. Running these two examples together will illustrate the changing status of the drag proxy icon—from red to green, when it's hovering over a drop target. But wait: Nothing's read more..

  • Page - 230

    Chapter 11 [ 209 ] Interacting the fool While the previous examples are interesting in the abstract sense—they give us an idea of how the Ext JS drag-and-drop system works—they aren't going to be setting your newest development alight. For that, we need to consider how multiple drag targets and drop targets can interact, and how we can set up more complicated systems read more..

  • Page - 231

    Drag-and-Drop [ 210 ] Why the extra step? In complex applications, we may have many nested child nodes. So automatically setting all of them up as draggable could cause performance problems and unexpected behavior. Instead, we could do so manually, avoiding these potential issues. In order to make our list items draggable, we need to register them with the Ext.dd.Registry : read more..

  • Page - 232

    Chapter 11 [ 211 ] We use the arguments passed to this function to get hold of three elements: the item that is being dragged, the list that it came from, and the list it's being dragged to. With this information, we can remove the item from the source list and then append it to the destination list. We then return a value of true to prevent the item's read more..

  • Page - 233

    Drag-and-Drop [ 212 ] In our previous examples, we used the Ext.dd.Registry.register method with a single parameter: the element to be registered. However, register also takes a second, optional parameter that allows you to add an extra metadata object to the item being dragged around. This metadata can be leveraged in any way you see fit for your application, but a read more..

  • Page - 234

    Chapter 11 [ 213 ] '</div>' + '</tpl>', itemSelector: 'div.person', store: personStore }); personView.render('people'); You'll notice that the implementation of the personStore isn't shown, but it needs to have an ID, name, image, city, and country items within its records in order to support what we're going to do. Note that read more..

  • Page - 235

    Drag-and-Drop [ 214 ] As mentioned earlier, we get the person container node from the mousedown event, and we use it to populate the ddel property of the object that is returned from getDragData . Earlier in the chapter, when dealing with dropping a node onto a DropZone , we looked at the dragData.ddel property to find the node that was being dropped. This is read more..

  • Page - 236

    Chapter 11 [ 215 ] We can actually pass the record associated with the item that was clicked as a data item in our drag operation. This is going to come in very handy when we come to populate our FormPanel . Dropping in the details This is the other side of the coin—handling the drop action that is triggered when we release a dragged node from our DataView . read more..

  • Page - 237

    Drag-and-Drop [ 216 ] Drag-drop groups We started off our tour of Ext.dd by looking at how individual nodes could be moved around the screen and placed in designated containers. From there, we described the methods used to enable dragging for many nodes at once, and how these could be dropped within containers with child nodes. When you're dealing with lots of draggable read more..

  • Page - 238

    Chapter 11 [ 217 ] It's all in the details We've had a good overview of the main classes within the Ext.dd package now. So it's time to start looking at some of the interesting configuration options, properties, methods, and events that allow us to tweak the behavior of the drag-and-drop classes. Configuration The "big four" of Ext.dd— DragSource , DragZone , read more..

  • Page - 239

    Drag-and-Drop [ 218 ] We've already seen how the notifyDrop and onNodeDrop methods for DropZone need to be overridden to complete the drop process, but there are plenty of other abstract methods that we can hook in to. In fact, even for the drop action, there are a number of similar-sounding methods available for use in certain situations: notifyDrop onContainerDrop read more..

  • Page - 240

    Chapter 11 [ 219 ] This means that the edges of the drag source and drop target are used to establish interaction. If the two items overlap them, then the drop target is considered valid. This can be handy if the items you wish to drag are going to be large as it could be easier for the user to simply make the edges touch rather than move the mouse pointer read more..

  • Page - 241

    Drag-and-Drop [ 220 ] Although the Ext.dd.ScrollManager performs a simple purpose and does so with very little code, the utility of this class should not be underestimated. Setting up this functionality manually would be taxing, and it is such a crucial part of drag–and-drop that without ScrollManager , we'd be hand-coding read more..

  • Page - 242

    Chapter 11 [ 221 ] GridPanel The Ext.grid.GridPanel also provides drag-and-drop support out of the box with the use of the enableDragDrop configuration option. Setting this to true will allow you to begin dragging rows out of your grid. But you would still need to provide a custom DropTarget for the row destination. This could even be another GridPanel , but it read more..

  • Page - 243

    Drag-and-Drop [ 222 ] That said, the visual element of drag-and-drop is still its most important feature. There is no better way of organizing a list or a tree of information than by pulling it around the screen using the mouse. When completing tasks like these, a graphical representation of what's going on will not only help your users to get the job done more read more..

  • Page - 244

    It's All about the Data Ext JS is an extremely powerful, cross-browser library, providing any developer with a beautiful, consistent set of tools for laying out browser-based applications. But there's a lot more here than just pretty boxes and grids. As the title says, it's all about the data! An application without data is really nothing more than an interactive static page, read more..

  • Page - 245

    It’s All About The Data [ 224 ] Applying dynamic data to a basic panel is super simple, because it takes the simplest of formats: straight text or HTML. Our first example will load a simple HTML page into a panel. First, we'll need the rendering page: Example 1: ch12ex1.html … <div id="mainContent"> <div read more..

  • Page - 246

    Chapter 12 [ 225 ] Author's note: Ext JS is a client-side scripting library and, as such, you can use any server-side programming language that you feel comfortable with. You may have noticed that some earlier examples in this book are coded in PHP. Examples within this chapter require the Adobe ColdFusion server to process the dynamic data, and require you to download read more..

  • Page - 247

    It’s All About The Data [ 226 ] You'll notice that the URL is now calling an Adobe ColdFusion Component(CFC), passing in some parameters to get its results. We have a very basic CFC, which runs a small query based on the passed parameters to generate the content that is passed back through the AJAX call. Example 2: chapter_12\Chapter12Example.cfc <cfcomponent read more..

  • Page - 248

    Chapter 12 [ 227 ] Gotchas with HTML data You must remember that you should call data only via AJAX from the domain of your site. Attempting to reference data from a site outside of your domain will error out at the browser level, as it's considered to be cross-site scripting. Cross-site scripting is a read more..

  • Page - 249

    It’s All About The Data [ 228 ] Format Example JavaScript Array var PinkFloyd = [ ['1','David','Gilmour'], ['2','Roger','Waters'], ['3','Richard','Wright'], ['4','Nick','Mason'] ] The format that you choose may be decided according to the Ext JS object you are using. Many developers like to use XML, as many databases (MS SQL, Oracle, MySQL, PostgreSQL, and DB2 to name read more..

  • Page - 250

    Chapter 12 [ 229 ] The TreePanel object doesn't use a traditional data Store, but has its own specialized store called a TreeLoader , which is passed into the configuration through the loader config option. The TreeLoader accepts simple arrays of definition objects, much like those expected by an ArrayReader . See the Ext JS API (http://extjs.com/deploy/dev/ docs/ ) for read more..

  • Page - 251

    It’s All About The Data [ 230 ] },{ name: 'LastModified', mapping: 'lastmod', type: 'date', dateFormat: 'm/d/Y' }]); We've applied a name that each field will be referenced by within our application, mapping it to a variable within a dataset object. Many variables will automatically be typed, but you can force (cast) the 'type' of a variable for greater read more..

  • Page - 252

    Chapter 12 [ 231 ] <lastname>Paige</lastname> </member> <member> <firstname>Robert</firstname> <lastname>Plant</lastname> </member> ... To create a mapping of the first_name node you would have the config look like this: mapping:'member > first_name' JavaScript arrays are easier, as they don't require read more..

  • Page - 253

    It’s All About The Data [ 232 ] type: 'float' },{ name: 'DATELASTMODIFIED', mapping: 'lastmod', type: 'date', dateFormat: 'm/d/Y' }]); var ourStore = new Ext.data.JsonStore({ url:'Chapter12Example.cfc', baseParams:{ method: 'getFileInfo', returnFormat:'JSON', startPath: '/images/' read more..

  • Page - 254

    Chapter 12 [ 233 ] Using a DataReader to map data Some applications can natively return data in XML, or even JSON, but it might not always be in the format Ext JS is expecting. As an example, the JsonStore, with its built-in JsonReader, expects an incoming dataset in the following format: { 'rootName': [ { 'variableName1': 'First record', read more..

  • Page - 255

    It’s All About The Data [ 234 ] All of the data we need is here, but the format can't be properly parsed by the base JsonReader. So what do we do now? Using a custom DataReader Ext JS's built-in classes provide outstanding ease of use 'out-of-the-box', but (as we can see) sometimes we need something a little special, possibly due to a different implementation for a read more..

  • Page - 256

    Chapter 12 [ 235 ] Now, we'll define our new DataReader as a CFJsonStore object: var ourReader = new Ext.data.CFJsonReader(recordModel, {id: 'NAME' , root: 'DATA'}); Next, we'll change our data Store from being a JsonStore to being the base Store object type, and apply our reader config option to ourReader : read more..

  • Page - 257

    It’s All About The Data [ 236 ] A word about events Many Ext JS objects have events that are fired when certain actions are taken upon them, or when they reach a certain state. An event-driven application, unlike a procedural programming model, can listen for changes in the application, such as the receipt of data or the change of a Record's value. Ext JS provides read more..

  • Page - 258

    Chapter 12 [ 237 ] load: { fn: function(store,records,options){ console.log(records); } }, scope:this } }); ourStore.load(); This now wraps up our code pieces, defining what our data will look like, configuring our custom reader, and setting up our data Store read more..

  • Page - 259

    It’s All About The Data [ 238 ] The getAt() method of the Store object will get a Record at a specific index position within the Store. Finding data by record ID The best way to look for a unique record is by ID . If you already know the ID of your record, this process just becomes easier. We used the NAME field as our ID , so let's find the read more..

  • Page - 260

    Chapter 12 [ 239 ] Sorting data on remote calls is pretty easy, as we can set the Store's remoteSort property to true . So, if our Store was attached to a grid object, clicking on a column heading to sort the display would automatically pass the value in its AJAX request. Filtering data on remote requests is a bit harder. Basically, we would read more..

  • Page - 261

    It’s All About The Data [ 240 ] <cfset attrArgs.directory = ourDir /> <cfelse> <cfthrow type="Custom" errorcode="Our_Custom_Error" message="The directory you are trying to reach does not exist." /> </cfif> <!--- Conditionally apply some optional filtering and sorting ---> <cfif read more..

  • Page - 262

    Chapter 12 [ 241 ] This might look complicated, but it really isn't! Again, our mission here isn't to learn ColdFusion, but it is important to have some understanding of what your server-side process is doing. What we have here is a method that takes some optional parameters related to sorting and filtering via an HTTP POST, statement. We use related to sorting and read more..

  • Page - 263

    It’s All About The Data [ 242 ] The clearFilter() method does not work with remote filtering, so we need to have a way to recall our initial baseParams when we need to clear our filters, and get our original dataset back. For this, we first abstract our baseParams configuration: var initialBaseParams = { method: 'getDirectoryContents', returnFormat: read more..

  • Page - 264

    Chapter 12 [ 243 ] else this[i] = config[i]; } } Ext.onReady(function(){ var recordModel = [ {name:'file_name',mapping:'NAME'}, {name:'file_size',mapping:'SIZE'}, {name:'type',mapping:'TYPE'}, {name:'lastmod',mapping:'DATELASTMODIFIED'}, {name:'file_attributes',mapping:'ATTRIBUTES'}, {name:'mode',mapping:'MODE'}, read more..

  • Page - 265

    It’s All About The Data [ 244 ] }, scope:this } }); ourStore.load({recurse:true}); filterStoreByType = function (type){ ourStore.load({dirFilter:type}); } filterStoreByFileType = function (fileType){ ourStore.load({fileFilter:fileType}); } clearFilters = function (){ ourStore.baseParams = new read more..

  • Page - 266

    Chapter 12 [ 245 ] One of the easiest things to do is to apply an update event listener to our Store object. We've applied two other listeners in the past: the beforeload and load listeners. Now, let's apply an update listener to our script. listeners:{ beforeload:{ fn: function(store, options){ for(var i in options){ read more..

  • Page - 267

    It’s All About The Data [ 246 ] One other option that we can address is the Ext.record.COMMIT state. It is sometimes better to let the user affect many different changes, to many different records, and then send all the updates at once. ourStore.commitChanges(); This will collect all of the edited Records, flag them by using Ext.record.COMMIT , and then the update read more..

  • Page - 268

    Chapter 12 [ 247 ] Store in a DataView The DataView object is one of the most powerful objects within Ext. This object can take a Store object, let us apply a Template or XTemplate to each Record (which the DataView refers to as a Node), and have each item render within the DataView , contiguously, wrapping items as they run out of space. The DataView opens read more..

  • Page - 269

    It’s All About The Data [ 248 ] The Grid objects and the ComboBox are probably the most prevalent uses of Store objects, with the Grid and the DataView being the two primary means of displaying multiple Records of data. The Tree object takes a special data source called a TreeLoader . The TreeLoader is actually part of the Tree package of classes, and read more..

  • Page - 270

    Code for Reuse: Extending Ext JS In this chapter, we'll discuss how we can create our own custom components by extending the Ext JS library. We'll talk about how we can create our own namespaces, differentiating our custom components from others. We'll also discuss some other core object-oriented concepts (just enough to understand what we need here) and the concept of read more..

  • Page - 271

    Code For Reuse: Extending Ext JS [ 250 ] These events led to very hard times for client-side developers, as a great deal of time and effort went into creating client-side code that was cross-browser compliant. Netscape and Internet Explorer had been waging the browser war over several versions, slowly growing more divergent in their standards acceptance, with cross-browser read more..

  • Page - 272

    Chapter 13 [ 251 ] Object-oriented programming with Ext JS Ext JS is a perfect example of this shift. The Ext JS library is an extremely extensive collection of packages of classes of re-usable code: small pieces of functionality that can be taken on their own, or combined to create some truly fantastic client-side magic. An additional part of its beauty is the ability read more..

  • Page - 273

    Code For Reuse: Extending Ext JS [ 252 ] Author's note Class diagrams, and UML diagramming in general, are a great way to visually represent different programming constructs. A full explanation is outside the purview of this text, but I highly recommend that you become familiar with them. Our diagrams here show the class name, the attributes, and methods of the class. Note read more..

  • Page - 274

    Chapter 13 [ 253 ] This creates a new instance of the SalesPerson object, with all of the attributes and methods of the SalesPerson object, including those of the parent Person object, by extension. Sounds cool, but what does it mean? By default, the SalesPerson object, being an extension of Person , allows you to set that SalesPerson 's name as: read more..

  • Page - 275

    Code For Reuse: Extending Ext JS [ 254 ] Understanding packages, classes, and namespaces There are a few final pieces that of the object-oriented puzzle we need, in order to we need, in order to , in order to keep a solid grasp of our goals. We've talked about how Ext JS is a large collection of objects extending other objects, but it's also important to understand read more..

  • Page - 276

    Chapter 13 [ 255 ] Ok, what do we extend? Typically, we'll be writing an application and will see ourselves writing the same basic piece over and over again. Or, we may be lucky enough to identify it early enough that we can just choose the best piece and move forward right away. It usually comes down to deciding which Ext JS component is the best one to extend. read more..

  • Page - 277

    Code For Reuse: Extending Ext JS [ 256 ] We need to place this line at the top of each class definition template. Our first custom class First, let's take a look at a fairly simple script that takes a single record of information and lays it out in a Panel on the screen. Example 1: ch13ex1.js var userData = [ read more..

  • Page - 278

    Chapter 13 [ 257 ] '<img src="/resources/images/icons/silk/database_edit.gif" width="16" height="16" id="phoneEdit_{ID}" class="iconLnk" align="Edit Phone" border="0" />{PHONE} ({PHONETYPE})<br />', '<b>{ADDRESSTYPE} Address</b><br />', '<img src="/resources/images/icons/silk/database_edit.gif" read more..

  • Page - 279

    Code For Reuse: Extending Ext JS [ 258 ] Turning this into a reusable component is very easy, as the majority of our code will just be moved into our custom class definition. First, we'll create a new class template, ContactDetails.js , and define its initial class declaration as extending the Ext.Panel class. Ext JS actually provides custom methods for extending read more..

  • Page - 280

    Chapter 13 [ 259 ] '<b>{ADDRESSTYPE} Address</b><br />', '<img src="/resources/images/icons/silk/database_edit.gif" width="16" height="16" id="addrEdit_{ID}" class="iconLnk" align="Edit Address" border="0" />{STREET1}<br />', '<tpl if="STREET2.length &gt; 0">', '<img src="/resources/images/s.gif" read more..

  • Page - 281

    Code For Reuse: Extending Ext JS [ 260 ] Author's note Ext JS uses superclass as the programmatic reference to the object's parent class object, as CRM.panels.ContactDetails is a subclass of it's parent (superclass) Ext.Panel . With our component, we needed a way to apply a new XTemplate to our component, should one be passed into our ContactDetails class. Because a read more..

  • Page - 282

    Chapter 13 [ 261 ] When can we do what? Our XTemplate does not get immediately applied to our component, as it isn't able to overwrite the Panel body until the Panel body has actually been rendered. This is what we mean by 'order of events', and can initially be very confusing, until you put a little thought into it. For instance, say we had dynamically tried to read more..

  • Page - 283

    Code For Reuse: Extending Ext JS [ 262 ] The Ext.Panel object has already defined an event listener for the render event. Once the render event has been handled, it calls the onRender() method. this.addListener('render',this.onRender,this, {ct:this.ct,position:this.position}); An event has been reached, which is then broadcast. An event listener is read more..

  • Page - 284

    Chapter 13 [ 263 ] By way of example, let's create a new update event within our custom component. We'll adjust our initComponent() method to register our new event: initComponent: function(){ CRM.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === 'string') { this.tpl = new Ext.XTemplate(this.tpl); } this.addEvents('update'); }, This new read more..

  • Page - 285

    Code For Reuse: Extending Ext JS [ 264 ] Here we broadcast our update event by calling the Ext JS's fireEvent() method, and passing along our data as the argument to any method listening for the update event. We can have any number of event listeners configured for a particular event, either internal to the component, or externally within a script referencing our read more..

  • Page - 286

    Chapter 13 [ 265 ] '<img src="/resources/images/icons/silk/database_edit.gif" width="16" height="16" id="addrEdit_{ID}" class="iconLnk" align="Edit Address" border="0" />{STREET1}<br />', '<tpl if="STREET2.length &gt; 0">', '<img src="/resources/images/s.gif" width="21" height="16" read more..

  • Page - 287

    Code For Reuse: Extending Ext JS [ 266 ] CITY:'New York',STATE:'NY',ZIP:'12345',PHONETYPE:'Cell', PHONE:'123-456-7890'}, {ID:2,FIRSTNAME:'Paul',LASTNAME:'McCartney', EMAIL:'paul@beatles.com',PASSWORD:'linda', ADDRESSTYPE:'Work (Mailing)', STREET1:'108 Penny Lane',STREET2:'', STREET3:'',CITY:'Los Angeles',STATE:'CA',ZIP:'67890', PHONETYPE:'Home',PHONE:'456-789-0123'}, {ID:3,FIRSTNAME:'George',LASTNAME:'Harrison', read more..

  • Page - 288

    Chapter 13 [ 267 ] What's next? Breaking it down Ok, we've now created our first custom component. That was fairly painless. But, looking back at what we've done, it looks as if we've pushed ourselves into a small corner again. As it stands, every aspect of our application that requires contact information would have to display the name, email address, phone number, and read more..

  • Page - 289

    Code For Reuse: Extending Ext JS [ 268 ] PHONE: '' }, split: false, tpl: new Ext.Template([ '<img src="/resources/images/s.gif" width="21" height="16" /><b>{FIRSTNAME} {LASTNAME}</b><br />', '<img src="/resources/images/icons/silk/database_edit.gif" read more..

  • Page - 290

    Chapter 13 [ 269 ] EMAIL: '', ADDRESSTYPE: 'Home (mailing)', STREET1: '', STREET2: '', STREET3: '', CITY: '', STATE: '', ZIP: '', PHONETYPE: 'Home', PHONE: '' }, split: false, tpl: new Ext.XTemplate([ '<b>{ADDRESSTYPE} Address</b><br />', '<img read more..

  • Page - 291

    Code For Reuse: Extending Ext JS [ 270 ] By breaking these into two separate components, we can now use either piece in any area of our application, independently. Example 3: ch13ex3.js var userData = [ {ID:1,FIRSTNAME:'John',LASTNAME:'Lennon',EMAIL:'john@beatles.com' ,PASSWORD:'apple1',ADDRESSTYPE:'Home (Mailing)',STREET1:'117 Abbey Roa d',STREET2:'',STREET3:'',CITY:'New York', read more..

  • Page - 292

    Chapter 13 [ 271 ] Best Practice Ok, looking at our two custom components, it's fairly obvious that they are essentially the same object with different XTemplates applied, and it would probably be best for them to have their own parent class of overloaded, template-applying methods, and just be repositories of the XTemplate defaults and our xtypes . But, for our examples, read more..

  • Page - 293

    Code For Reuse: Extending Ext JS [ 272 ] frame: true, items:[{ region: 'west', xtype: 'userdetail', width: 200, data: userData[0] },{ region: 'center', xtype: 'addrdetail', width: 200, data: userData[0] }] }); We have identified the West and read more..

  • Page - 294

    The Power of Ext JS: What Else Can You Do? Throughout this book, we've gone over some of the core components of Ext JS: Windows and Dialogs, Grids, Trees, Data Stores, and more. This is some of the flashiest, coolest, and most consistent stuff on the Web today, for taking a drab old HTML display and giving it the sizzle and pop such a dynamic development platform read more..

  • Page - 295

    The Power of Ext JS: What Else Can You Do? [ 274 ] DateField The DateField is a perfect example. Handling dates within most HTML forms can be a chore, but Ext JS provides a very basic component for handling dates: Example 1: ch14ex1.js Ext.onReady(function(){ var formPanel = new Ext.form.FormPanel({ title:'DateField Example', applyTo:'chap14_ex01', read more..

  • Page - 296

    Chapter 14 [ 275 ] Apart from its rich display, the DateField also provides a rich set of attributes for specialized customization, including the ability to determine different accepted date formats, and the ability to disable entire blocks of days. The component will also automatically validate manually-entered data. TimeField Dealing with time can be more difficult than dealing read more..

  • Page - 297

    The Power of Ext JS: What Else Can You Do? [ 276 ] As in our last example, this simple FormLayout contains one item, in this case the TimeField . Click on the trigger, and we get our options, defined by our code as times between 9 AM and 6 PM in increments of 30 minutes. Other configuration options allow you to define multiple accepted time formats, and read more..

  • Page - 298

    Chapter 14 [ 277 ] HtmlEditor Ext JS includes a nice, limited, WYSIWYG HtmlEditor, to drop right into your forms: Example 3: chapter14_03.j s Ext.onReady(function(){ var formPanel = new Ext.form.FormPanel({ title:'HtmlEditor Example', applyTo:'chap14_ex03', layout:'form', labelAlign:'top', width:600, autoHeight:true, frame:true, read more..

  • Page - 299

    The Power of Ext JS: What Else Can You Do? [ 278 ] Data formatting We all know that we don't always receive data in the format in which we want it to be displayed. Ext JS provides many different components specifically for address such issues. First among these is the Format object in the Ext.util package, which gives us a wide variety of functions for read more..

  • Page - 300

    Chapter 14 [ 279 ] This small block of code displays a simple Panel element, which calls the formatting function to build the HTML of the Panel . The format() method's arguments are applied to different parts of the string that we are building. Formatting dates The Date object has also been extended to provide additional formatting and parsing capabilities. The API read more..

  • Page - 301

    The Power of Ext JS: What Else Can You Do? [ 280 ] Other formatting The Ext.util package provides many different classes and methods for formatting various types of data, including many for working with strings , dates , and numbers . A good example is the usMoney() method: var annualSalary = 123456.345; Ext.util.Format.usMoney(annualSalary); This will return a pre-formatted US read more..

  • Page - 302

    Chapter 14 [ 281 ] Managing application state Core to any application (especially an event-driven application) is maintaining and controlling 'state'. This can encompass many different things, from keeping user preferences on grid sorting, to managing multiple Windows or layout areas on the screen, and even being able to use the Back button in the browser and have it change read more..

  • Page - 303

    The Power of Ext JS: What Else Can You Do? [ 282 ] How do I get that window? Many Ext JS applications will be confined to a single HTML page, and might commonly come down to a collection of Ext JS Window objects on the screen. But what happens if a user is in one window, and we want to show them another window that is already open, without closing the read more..

  • Page - 304

    Chapter 14 [ 283 ] Finding DOM elements The first task when manipulating the DOM(Document Object Model) is to find what we're looking for. The DomQuery class provides us with several methods for this purpose, including returning entire groups of DOM nodes that meet specific criteria, or selecting a single node by its selector. We can even start the search from a read more..

  • Page - 305

    The Power of Ext JS: What Else Can You Do? [ 284 ] Working with styles The DomHelper class also provides a simple method for setting the style of an individual element, through the use of the applyStyles() method. But sometimes we may need to change the style sheet of our entire document. For this, Ext JS has the Ext.util.CSS class, which allows us to create a read more..

  • Page - 306

    Chapter 14 [ 285 ] But, part of what they truly gained was an understanding of how to create a cross-platform application delivery engine. So, they built upon their new-found knowledge, and set out to create the Adobe Integrated Runtime, better known as AIR. AIR is a desktop engine for rendering content written in HTML, JavaScript, and/or Flash (and more), which allows read more..

  • Page - 307

    The Power of Ext JS: What Else Can You Do? [ 286 ] Ext JS community extensions Chapter 13 of this book discussed how developers can write their own custom extensions to Ext JS. Being an open source project, the Ext JS community is very active in contributing new components to extend existing functionality, and sometimes these components even go on to become a part of read more..

  • Page - 308

    Chapter 14 [ 287 ] PowerWizard The PowerWizard class allows us to create powerful, multi-step 'wizard-like' processes, with field (and multi-field) validation and decision trees, as well as data persistence between frames. TinyMCE Yes, for those times when the HtmlEditor just isn't enough, someone wrote a custom extension to wrap the TinyMCE WYSIWYG editor into the Ext JS read more..

  • Page - 309

    The Power of Ext JS: What Else Can You Do? [ 288 ] SwfUploadPanel How many times would it have been nice to be able to upload more than one file at a time through our web application interface? Someone converted the popular SwfUpload project into a custom Ext JS component, allowing multi-file uploads from within our application. ColorPicker The built-in ColorPalette read more..

  • Page - 310

    Chapter 14 [ 289 ] These are just a few of the outstanding community contributions to the library. There are many more available through the Community Extensions section of the Learning Center area of the Ext JS website, as well as throughout the Forums (Checkout the Ext: User Extensions and Plugins topic for more). Additional resources Knowing where to find good read more..

  • Page - 311

    The Power of Ext JS: What Else Can You Do? [ 290 ] Step-by-step tutorials Step-by-Step Tutorials(http://extjs.com/learn/Tutorials) can be found within the Learning Center, with content ranging from simple component usage to advanced project development. Some of these tutorials come directly from the Ext JS development team, but many are contributed by members of the Ext JS community. read more..

  • Page - 312

    Chapter 14 [ 291 ] Summary In this chapter we've discussed some of the lesser known pieces of the Ext JS library. We briefly covered some of the form components not found in traditional HTML, such as the DateField and the HtmlEditor . We also learned about the various classes available for formatting data for the desired output, as well as those classes needed for read more..

  • Page - 313

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 314

    Index A accordion, layouts about 128 movie form, adding 131 nesting, in tab 128, 129 toolbar, adding 129-131 adapters, Ext about 18 using 18, 20 Adobe AIR 285 Adobe Integrated Run time. See Adobe AIR AJAX 12 Asynchronous JavaScript and XML. See AJAX B built-in features, Ext client-side sorting 86 column, reordering 86, 87 columns, hidden 86 columns, read more..

  • Page - 315

    [ 294 ] data store, setting up 75 data types, specifying 78 data formats about 223 HTML data 227 other formats 227, 228 remote panel data 223-226 DataReader, using custom DataReader, using 234-237 to map data 233, 234 data saving to server, editable grids afteredit event, options 114 data, deleting from server 114, 115 new rows, saving 115, 116 updates, read more..

  • Page - 316

    [ 295 ] grid 74 GridPanel 101 online community 22 panels 119 regions 121 SDK (Software development Kit) file 13, 14 using, in pages 14 viewport 119, 120 Ext.Button 61 Ext.dd 206 Ext.Element about 183, 197 animations 197 Ext.Components, using with 198 Ext.Element.animate 198 methods 197 Ext.Fx about 184 anchor position string 192 blocking method, StopFx read more..

  • Page - 317

    [ 296 ] form 37 form widgets 273 Fxcellent functions 184 layouts 121, 122 LoadMask 198, 199 QuickTip 201, 202 Recordset changes, dealing with 244-246 store 246 tab panel 124 ToolTip 201 tree 137 WindowGroup 282 WindowMgr 282 windows 166 Ext JS community, extensions ColorPicker 288, 289 DatePickerPlus 286 PowerWizard class 287 SwfUploadPanel 288 TinyMCE read more..

  • Page - 318

    [ 297 ] server-side data, displaying 88 grid, formatting about 95, 96 grid, paging 96-98 grouping 98 grouping store 98, 100 grid, programming about 92 cell, working with 92 data, manipulating 94 grid, altering 94, 95 grid, manipulating 94 listener, adding to selection model 93, 94 selection models 92 GridPanel data, displaying 74, 75 displaying 78, 79 read more..

  • Page - 319

    [ 298 ] Q QuickTip 201, 202 R radio button, form adding, to form 46 check box 46 Recordset 244-246 regions 121 Rich Internet Applications problems 282 S SDK 13 server-side data displaying, grid data loading from database, PHP used 91, 92 movie database, loading from JSON file 90, 91 movie database, loading from XML file 88, 89 Software development read more..

  • Page - 320

    [ 299 ] configuration options, framing 171, 172 events 173, 174 example 166, 167 Ext.layout.FormLayout 168 Ext.layout package 168, 169 Ext.Window class 159, 160, 166, 167 Ext.WindowGroup 160 Ext.WindowManager 160 managing 175 manipulating 172, 173 paneling 167, 168 paneling, layout 168, 169 state handling 174 windows, managing about 175 customer service WindowGroups read more..

  • Page - 321

    This material is copyright and is licensed for the sole use by Roman Heinrich on 25th December 2008 Am Hilligenbusch 47, , Paderborn, NRW, 33098 read more..

  • Page - 322

    Thank you for buying Learning Ext JS Packt Open Source Project Royalties When we sell a book written on an Open Source project, we pay a royalty directly to that project. Therefore by purchasing Learning Ext JS, Packt will have given some of the money received to the Ext JS project. In the long term, we see ourselves and you—customers and readers of our books—as read more..

  • Page - 323

    Learning Dojo ISBN: 978-1-847192-68-4 Paperback: 230 pages A practical, comprehensive tutorial to building beautiful, scalable interactive interfaces for your Web 2.0 applications with Dijits 1. Learn real-world Dojo programming with detailed examples and analysis of source code 2. Comprehensive guide to available Dojo widgets (dijits) and how to use them 3. read more..

  • Page - 324

    AJAX and PHP ISBN: 190-4-811-82-5 Paperback: 275 pages Enhance the user experience of your PHP website using AJAX with this practical tutorial featuring detailed case studies 1. Build a solid foundation for your next generation of web applications 2. Use better JavaScript code to enable powerful web features 3. Leverage the power of PHP and MySQL to read more..

Write Your Review