- Talking back—the server responses 54. - Chapter 5 covers grids—the most widely-utilized component in the Ext JS library. - In Chapter 10, we take a tour of the visual effects available in the Ext JS effects package. - Chapter 11 shows how you can harness Ext.dd —the rich drag-and-drop functionality provided by Ext JS. - Chapter 12 gets straight to the heart of every application—the data. - Ext.onReady(function(){. - Ext.Msg.show({. - One of the most striking examples is the Feed Viewer. - So for the sake of the examples in this book, uncompress all of the files in the SDK into a folder named lib. - It's the engine of the Ext car. - Ext.Msg.alert('Hello', 'World');. - utilities folder of the YUI Library download:. - I would suggest getting the Google forum search tool that is available in the Learn section of the Ext web site.. - We will start by covering some of the core functions of Ext. - In this section, we'll look at the onReady event—the first thing that you need to deal with when you are working with Ext. - Ext.onReady(stapler());. - We have also included a function to be executed when a user clicks on any of the buttons in the dialog. - Ext.Msg.alert('You Clicked', btn);. - Ext.Msg.prompt('Milton', 'Where is it?');. - Of these functions, get is one of the most used.. - Ext.get('my_id');. - Ext.fly('another_id');. - And finally, the part that pulls it all together—the actual function used to test our field value:. - Ext.Msg.alert('Success', 'It worked');. - Ext.Msg.alert('Warning', 'Error');. - Talking back—the server responses. - Let's do a quick comparison of the two methods.. - We will add one of each of the main button types, so we can experiment with each:. - new Ext.Toolbar({. - 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. - Here is a list of the commonly-used shortcuts:. - Fill '->' The fill that is used to push items to the right side of the toolbar.. - Ext.Msg.alert('Boo', 'Here I am');. - We can take this reference to the button—a reference to itself—and access all of the properties and functions of that button. - Note the helpfile config option that we have added to each of the menu items config.. - Now we have a text field in our toolbar that enables us to type in the name of the text file to load. - Try some of the samples used in our menu, such as director or title.. - All of the toolbars we have been working with have an items config. - new Ext.Window({. - The grid is, without doubt, one of the most widely-used components of Ext. - 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. - In Ext JS, this information is part of the Column Model. - The dataIndex config is the name of the data field to be used in that column. - The width of the column. - Just for good measure, here is a compacted version of the same function. - All of this is enabled by default as part of the built-in functionality of the grid.. - Ext.Msg.alert(title,dirmsg);. - Some of the selection models are:. - We will also change the text of the button based on the visibility of the column:. - This PHP script will take care of the server-side part of paging. - A special store is required, which is called...wait for it...the GroupingStore ...tada!. - These are some of the standard types:. - 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.. - Ext.Msg.alert('Error','Mel Gibson movies not allowed');. - field The name of the column that was edited. - row The index of the row that was edited. - column The index of the column that was edited. - Once we have this definition of the data, we can insert a new row fairly easily. - Value : What the new value of the field is. - Ext.Msg.alert('Error', 'Unable to delete movie');. - Ext.Msg.alert('Error','Unable to add movie');. - 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.. - 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. - The dividers are set up for each panel by setting the split flag—the positioning of the dividers is determined automatically based on the region the panel is in.. - Here are some of the more commonly-used options:. - bodyStyle CSS CSS styles applied to the body element of the panel.. - spacing is applied outside of the body of the panel. - Let's explore this by adding another widget to our layout—the grid.. - minus icons along the rightmost side of the panel.. - A couple of things are needed for a nested layout—the layout type must be set, and in this case, we are turning off the border so we don't get a doubled-up border, as the container has its own border. - Each of the items represents one of our. - In this chapter, we have been able to use many of the components outlined in the previous chapters, within a layout. - TreeNode The main class representing a node within a TreePanel TreeNodeUI Provides the underlying interface for the TreeNode TreePanel A tree-like representation of data—the main tree class TreeSorter Supports sorting of nodes within a TreePanel Ouch! Fortunately, you don't have to use all of them all at once. - Despite the fact that the Ext.tree classes are some of the most feature-rich available in the framework, you can still get everything up and running with only a few lines of code.. - 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. - The Ext.tree.. - You can see an example of the finished product here:. - To be fair, it's not as simple as that, because we skimmed over a crucial part of building an Ext JS tree—the data.. - The text property is the label of the node as it appears in the tree. - oldParent : The previous parent of the node being moved 4. - newParent : The new parent of the node being moved 5. - If it is the latter, it will be used instead of the default, which means that you can add NumberField , DateField or another Ext.form.Field in a similar manner.. - They also allow manipulation of the current selection. - Because TreePanel extends from Ext.Panel , it supports all of the standard Panel features. - Here, we have a representation of the location of the node with the ID n-101 . - Ext.Msg.prompt('Node', 'Please enter a product name', function(btn, text){. - In such cases, the collapse of the node wouldn't be saved. - Now we're going to take a look at the other part of the puzzle—Ext JS Window and dialog support. - 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. - Window , making it a cut-down version of the superclass.. - This is arguably a better default, particularly when you use a question in the body text of the. - Here's the list of the icon constants:. - Ext.Msg.show({progress:true});. - Ext.Msg.show({prompt:true, multiline:true});. - customized Ext.Window s. - With the default functionality under control, we can begin to review the ways we can further tweak and augment the features of the Ext.Window . - 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. - Here's a screenshot of the a simple application developed to support this:. - That's a whistle-stop tour of the showSession function
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt