Ext JavaScript 4 Cookbook: Exploring Further

Only available on StudyMode
  • Download(s) : 77
  • Published : April 2, 2013
Open Document
Text Preview
Ext JS 4 Cookbook— Exploring Further
We've compiled an additional 20 recipes with more useful hints and tips to help you to get the most out of Sencha's Ext JS 4 framework. Following the same format as the book, these extra recipes cover a wide variety topics and we hope they further broaden your knowledge of the framework.

Creating your applications folder structure
This recipe will give you Sencha's best-practice application folder structure. By following these guidelines, your application will be well organized, easily maintainable, and sharing components between applications will be straight-forward. In addition to these benefits you can use the Ext JS SDK tools to easily create and deploy an optimized copy of your application when you're ready to go live. We have explained how to do this in the recipe Building your Application with Sencha's SDK Tools, in Chapter 12, Advanced Ext JS for the Perfect App. To illustrate this, we'll create an application to list our project's enhancement log.

Getting ready
We recommend having a web server (for example, Apache or IIS) installed and running on your development computer.

Ext JS 4 Cookbook—Exploring Further

How to do it...
1. If you are not following an MVC pattern for your application use the following directory structure: ‰

enhancementLog
‰

app
‰

enhancement
‰

EnhancementGrid.js

‰ ‰

extjs resources
‰ ‰ ‰

css images .…

‰ ‰

app.js index.html

2. If you are following an MVC pattern use the following structure: ‰

enhancementLog
‰

app
‰

controller
‰

Enhancement.js Enhancement.js Enhancement.js enhancement
‰

‰

model
‰

‰

store
‰

‰

view
‰

Enhancement.js

‰ ‰

extjs resources
‰ ‰

css images

‰ ‰

app.js index.html

2

Appendix

How it works...
f f

The directory enhancementLog is where you will store the application files The directory app will contain the applications classes (in their respective group's sub-folder) and will follow the naming conventions described in the There's more section The directory extjs will contain a copy of the Ext JS framework and associated files The directory resources is intended for images, additional CSS, and any other static resources the application requires index.html is the application's entry-point app.js contains the application's launch logic

f f

f f

There's more...
Sencha has also defined some naming conventions for Ext JS 4 applications that should be followed as they will keep your code organized, well-structured, and readable. The conventions are summarized as follows:

Class naming conventions
f f f f

You are strongly encouraged to use alphanumeric characters only for naming classes Camel case for the top-level namespaces and class names only Everything else should be lowercase Acronyms should also follow the camel case convention Best practice: EnhancementLog.enhancement.views. EnhancementGrid Bad practice: Enhancement_Log.enhancement.enhancement_Grid

Source file naming conventions
f f

Where possible, class names should map directly to the file path in which they exist One class per file only The EnhancementLog.controller.Enhancement class will exist in /enhancementLog/app/controller/Enhancement.js.

3

Ext JS 4 Cookbook—Exploring Further

Methods and variables naming conventions
f

You are strongly encouraged to use alphanumeric characters only for naming methods and variables Camel case method names and variables Example: getEnhancementStore() or decodeEnhancementJson()

f

Properties naming conventions
f

You are strongly encouraged to use alphanumeric characters only for naming properties Camel case properties that are not static constants Static constants should always be uppercase Example: Ext.MessageBox.YES = "Yes"

f f

See also
f

The Dynamically Loading Ext JS Classes recipe in Chapter 1, Classes, Object-Oriented Principles, and Structuring your Application, as this folder...
tracking img