While app watch is running, a basic web server is serving the application directory. Sencha Cmd is also monitoring your application directory for changes. Should you make changes to the styling or JavaScript code, Sencha Cmd will detect these changes and update the necessary build outputs to keep the application rendering correctly in the browser. As your changes are detected, Sencha Cmd will log a few lines of output and in typically a couple seconds end with "Waiting for changes…" to let you know everything is ready.
This means that to make changes to your application, you edit the code in your IDE or text editor and hit Save The application we've just created is extremely minimal: it only displays a message box!
Even so, it is helpful to look at the generated code. If you look in "index. That is to say, the user interface and its logic are all defined in JavaScript. The necessary styling is provided by the various included themes such as Material. Since this is not necessary to create applications in Ext JS, this guide will not explore that approach further.
Ext JS is a class-based, object-oriented framework. There are many hundreds of classes provided by Ext JS that you can use or extend to create your application. These classes range from non-visual classes that manage data and server communication to user interface components that provide powerful functionality.
By creating your own classes based on these components, you can concentrate on making a compelling application. The starting point of an Ext JS application is app.
The generated app. The Ext. In this case, this is just a name and a launch method. We also describe the classes we are using in the application with "requires". Once the required classes are loaded and the browser is ready, the launch method is called. This is where the application performs its startup sequence. To get things started, let's define an application class and our main view. By default the Ext. For example, applications typically need to handle things like deep-linking and the browser's Forward and Back buttons commonly called "routing".
While this guide will not address these issues, it is a best practice to have an Application class, so let's create a bare-bones version:. This application does not require special logic at launch, so we have replaced the launch method with the mainView config property.
The inherited launch method will create an instance of this class. Aside: Config properties are special properties declared by Ext JS classes that are similar to the attributes of HTML elements such as "disabled" or "value". These config properties or just "configs" can be specified on the class body as above or passed in the "config object" which is the single argument to the constructor.
The class name we've chosen for the main view is "MyApp. Main", so by convention we will create the JavaScript file '. The "app" folder is where Sencha Cmd looks for application classes as configured by app. The reason for the "main" directory will become clear when we add a controller and styling to the view as these files will also be placed in this directory. A common main view for many applications is a tab panel, so let's start by extending this class for our main view:.
A tab panel is a specialized container. A container is simply a component that contains other components. These child components typically called "items" are added to the container by assigning the "items" config. In the above, the tab panel extends the basic container class and adds a tab bar to enable the user to switch between its child items. This is also why we added the "requires" for the Ext. Button class. This allows us to use its "xtype" in the items of the Home tab.
An "xtype" is a component alias much like the tag name of an HTML element. This button, however, is rather inert. Clicks do nothing but ripple the button. To add logic, we need a handler method. With Ext JS we can write this handler directly in the view, but this is discouraged.
Instead we put this code in a controller. This class extends ViewController and is thus a controller suitable for controlling views. We've also assigned it the alias "controller.
This alias allows us to easily associate the controller to our main view:. Now we can direct the Go button to the onGo handler in the controller:. TabPanels can be used similarly to standard Panel for layout purposes, but they also have special support for containing child Components items. These items are managed using a Card layout manager, and displayed as separate tabs.
Tabs typically default to horizontally residing at the top of your item content. However, in this application, we have gotten a little clever with the tabs.
You may notice that our tabs don't look like traditional tabs. That's because we've created a custom UI for them. Every component in the Ext JS framework has a ui configuration that defaults to default. This property can be changed to allow components in your application to have different styles.
These include: Ext. Panel, Ext. Button, Ext. Toolbar, Ext. Window, and many more. Let's open our tabpanel's custom UI and take a look at what's being done. You can find your tabpanel UI definitions here:.
As you can see, creating UIs is simple. Simply call the associated mixin for the component for which you want to create a UI. You may have also noticed that we added the Responsive plugin to the tabPanel and the tabConfig. In this case, if you make the browser window less wide than tall, the tabpanel will move to the top of the screen and the tab text and glyphs will reposition. You can read more about the responsive plugin and building your application for multiple environments here.
You may notice that there's no hard-coded data in tabs 2, 3, and 4. That's because we're binding data from a ViewModel. Together, View Models and Data Binding allow you to do more with less code and write in a much more declarative style. A View Model is a class that manages a data object. It then allows components interested in this data to bind to it and be notified when it changes. The ViewModel, like ViewController , is owned by the view that references it.
For the most part, any config that may be "set" with a setter method, can be bound to the data in the ViewModel. For this example, we'll utilize setHtml and setTitle. The data in the ViewModel is set statically, but in most cases, this would be generated via proxy.
Next, let's look at the Ext. With this minimal amount of code, we've created a fully functional grid. Each column header is also re-orderable by default, and each gains a drop-down menu with options to hide and show columns. As you can see, we are setting store to a type of personnel.
If you look carefully, you'll probably notice that there isn't a store definition anywhere in the classic area. We have placed the store here so that the Classic grid AND the Modern grid can share the same store and data. In a real world situation, the above store would have a proxy with a url property allowing the proxy to pull information from a server. Stuart Ashworth is a web and mobile consultant, developer and an all-round web geek currently living in Glasgow, Scotland, with his wife Sophie and wee dog Meg.
There's a package perfect for you depending on your budget and the level of detail you want to get into. If you have any questions or comments on the book or about what package is best for you, drop me an email at stuart stuartashworth.
If you want more Sencha related resources head over to my website at www. I look forward to hearing from you! A practical guide to understanding and getting started with Sencha's Ext JS 6. Understand the key concepts introduced with Ext JS 6 and how they apply to when developing applications. Learn how to integrate the new features and components introduced in Ext JS 6 into your applications.
Discover how to customise an application for different environments using Application Profiles. Learn how to architect Universal Applications, including how to identify and structure shared code. Learn how to prepare your applications for testing and production deployment. Overview of Ext JS 6: Getting Started This eBook and its accompanying resources are packed with information, tutorials and step-by-step walkthroughs on all the important aspects of getting up to speed with Ext JS 6.
Chapter Two. Chapter Three. Chapter Four. Chapter Five. Protected class members are stable public members intended to be used by the owning class or its subclasses. Protected members may safely be extended via a subclass. Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.
Below is an example class member that we can disect to show the syntax of a class member the lookupComponent method as viewed from the Ext. Button class in this case. This may be overridden in subclasses when special processing needs to be applied to child creation. The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.
Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type this count is updated as filters are applied. Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.
0コメント