Buy our new book – Sencha Ext JS 5 Bootcamp in a Book!

May 22, 2015 7 comments

Sencha Ext JS 5 Bootcamp in a Book teaches you everything that you need to know in order to build a cross-browser, x-device compatible, next-generation web application using nothing but Javascript and good intentions. This book contains over 60 hands-on exercises that cover nearly every aspect of developing enterprise-grade web apps using Sencha’s Ext JS 5 javascript framework.

This book contains over 60 hands-on exercises that cover nearly every aspect of developing enterprise-grade web apps using Sencha’s Ext JS 5 javascript framework. Course files are downloadable from Github and Sencha Fiddle.

Table of Contents:

  1. Introducing the Course
  2. Introducing Ext JS 5
    • Implementing the 3-tier architecture
    • Reviewing features and capabilities
    • Reviewing the Ext JS examples
    • Introducing MVC and MVVM
    • Introducing the Class System
    • Generating App Scaffolding with Sencha Cmd
    • Using the API Docs
    • Debugging and troubleshooting your app
    • Getting Help from the Sencha Network
  3. Defining Views
    • Deep-Diving into the Class System
    • Working with DOM Elements vs. Ext Components
    • Using the Component Hierarchy
    • Instantiating a Viewport
    • Using the Border Layout
    • Defining Panels
    • Defining Toolbars, Buttons, and Menus
    • Handling User Events with ViewControllers
    • Working with Tab Panels
    • Supporting the “back” button with Routes
    • Working with Windows
    • Implementing a Dashboard
  4. Reading Complex Data from an App Server
    • Understanding AJAX and REST
    • Implementing View Models and Data Binding
    • Implementing Roles-Based Security
    • Defining a Data Model
    • Defining a Proxy
    • Reading Multiple Records into a Data Store
    • Using Chained Stores
  5. Visualizing Tabular Data in Grids
    • Defining a Grid
    • Using Grid Widgets
    • Implementing Data Pagination
    • Defining Grouped Grids
    • Enhancing Grouped Grids
    • Editing Data in Grids
  6. Generating Markup from Data
    • Working with XTemplates
    • Looping Through Data
    • Implementing Conditional Processing
    • Executing Inline JavaScript
    • Binding Custom JavaScript Methods to XTemplates
    • Performing Basic Calculations in an XTemplate
    • Binding a Template to a Component
    • Using the DataView
  7. Visualizing Hierarchical Data in Trees
    • Introducing the TreeStore
    • Understanding the NodeInterface Class
    • Implementing a Tree Panel
    • Implementing a Tree Grid
    • Working with Heterogeneous Node Types
    • Using Trees as an Input Mechanism
  8. Visualizing Data in Charts
    • Instantiating a Chart
    • Configuring Chart Axes
    • Configuring Chart Labels
    • Configuring Chart Legends
    • Using Chart Interactions
    • Working with Bar Charts
    • Working with Line Charts
    • Working with Gauges
  9. Maintaining State
    • Configuring the State Provider
    • Saving the State of Components
    • Adding State Management to Non-Stateful Components
  10. Creating Data Entry Forms
    • Creating Data Entry Forms
    • Defining a Form
    • Configuring Form Fields
    • Using the Combo Box Field
    • Sizing Fields with the Anchor Layout
    • Sizing Fields with the Form Layout
    • Assigning Default Configuration Values
    • Grouping Fields
    • Validating Input Data
    • Formatting the Data Validation Error Messages
    • Submitting Data to the Server for Processing
    • Binding Grids to Forms
  11. Theming your App
  12. Going into Production
    • Documenting your App with JSDuck
    • Unit Testing with Jasmine and Siesta
    • Generating Testing and Production Builds
  13. Appendix A: Configuring your Development Environment
  14. Appendix B: Congressional Earmarks Lab
  15. Appendix C: Proposal Manager Lab

Buy it today from Amazon.com at:
http://www.amazon.com/Sencha-Ext-JS-Bootcamp-Book/dp/1511659580/ref=sr_1_6?ie=UTF8&qid=1432283001&sr=8-6&keywords=sencha+ext+js

Categories: Uncategorized

Sencha Ext JS 5: Supporting Different Themes for Different Devices

March 31, 2015 Leave a comment

Sencha Ext JS 5 is the first version of the Ext framework to fully support iOS tablets.

Perhaps the most important task  that you’ll need to do in order add tablet support to your application is to automatically switch between desktop and touch-based themes (CSS files), depending on the type of device being used.

This tutorial demonstrates how to add this capability to your application.

Step 1: Create the App

  1. Open a command prompt to your Ext JS 5 folder
  2. Run the following command:
    sencha generate app TestApp ../TestApp

Step 2: Define the Themes

  1. In your command prompt, change directories to the TestApp folder.
  2. Enter the following commands:
    1. sencha generate theme TestApp-Desktop
    2. sencha generate theme TestApp-Tablet
  3. Using your editor, open /TestApp/packages/TestApp-Desktop/package.json
  4. Modify the “extend” property to extend ext-theme-neptune.
  5. Save the file.
  6. Using your editor, open /TestApp/packages/TestApp-Tablet/package.json
  7. Change the “extend” property from ext-theme-classic to ext-theme-neptune-touch.

Step 3: Modify your App.json file to support multiple platform builds

  1. Using your editor, open /TestApp/app.json
  2. Add a “builds” property as illustrated here:
    "builds": {
        "testAppDesktop": {
            "theme": "TestApp-Desktop"
        },
        "testAppTouch": {
            "theme": "TestApp-Tablet"
        }
    }

Step 4: Modify your output definition to create multiple application manifests

Replace the output config property in your app.json with the following:

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",
    "page": "./index.html",
    "manifest": "../${build.id}.json",
    "deltas": {
        "enable": false
    },
    "cache": {
        "enable": false
    }
}

Step 5: Refresh your App

Return to your command prompt and type the following:
sencha app refresh

This will generate two manifest files: testAppDesktop.json and testAppTouch.json

Step 6: Replace the CSS config in the App.json

Replace the css configuration property in your App.json with the following:

"css": [{
    "path": "${build.out.css.dir}/TestApp-all.css",
    "bootstrap": true
 }]

Step 7: Replace the bootstrap property to load the appropriate manifest file

"bootstrap": {
   "manifest": "${build.id}.json"
}

Step 8: Add the following code into a script tag in your index.html file, just above the microloader, to load the appropriate manifest:

var Ext = Ext || {};
Ext.beforeLoad = function(tags){	
    var theme = location.href.match(/theme=([\w-]+)/);
 	theme  = (theme && theme[1]) || (tags.desktop ? 'testAppDesktop' : 'testAppTouch');
   
    Ext.manifest = theme;
    tags.test = /testMode=true/.test(location.search);
    Ext.microloaderTags = tags;
};

Step 9: Build the Application

Return to your command prompt and type the following:

sencha app build development

Step 10: Test the Application in a Desktop and Mobile Browser

Categories: Ext JS 5 Tags:

Sample Node.JS REST API Implementation with MySQL

March 10, 2015 1 comment

Here’s a simple example of a RESTful API implementation that I cobbled together for one of the students in our Node.JS Fundamentals course. It’s illustrates how to use the Express framework, along with a mysql datasource to implement create/read/update/destroy functionality on records.

Enjoy!

var express = require('express');
var router = express.Router();

var mysql = require('mysql');
var pool = mysql.createPool({
	host: 'localhost',
	user: 'root',
	password: '',
	database: 'NodeJSExamples'
});

/* GET users listing. */
router.get('/', function(req, res) {

	console.log(req);

	pool.getConnection(function(err, connection) {

		if (err) {
			console.error("An error occurred: " + err);
		}

		connection.query('select * from Person', function(err, rows) {
			if (err) {
				throw err;
			} else {
				res.writeHead(200, {
					"Content-Type": "application/json"
				});
				var result = {
					success: true,
					rows: rows.length,

				}
				res.write(JSON.stringify(rows));
				res.end();
			}

			connection.release();
		});

	});

});


router.delete('/:id', function(req, res) {

	console.log(req);

	pool.getConnection(function(err, connection) {

		if (err) {
			console.error("An error occurred: " + err);
		}

		connection.query('delete from Person where id=?', [req.params.id], function(err, rows) {

			if (err) {
				throw err;
			} else {

				res.writeHead(200, {
					"Content-Type": "application/json"
				});
				var result = {
					success: true,
					rows: rows.length,
					detail: rows

				}
				res.write(JSON.stringify(result));
				res.end();

			}

			connection.release();
		});

	});

});

router.put('/:id', function(req, res) {

	console.log(req.body);

	req.assert('lastName', 'Last Name is required').notEmpty();
	var errors = req.validationErrors();

	pool.getConnection(function(err, connection) {

		if (err) {
			console.error("An error occurred: " + err);
		}

		connection.query('update Person set ? where id = ?', [req.body, req.params.id],
			function(err, rows) {
				if (err) {
					throw err;
				} else {
					res.writeHead(200, {
						"Content-Type": "application/json"
					});
					var result = {
						success: true,
						detail: rows

					}
					res.write(JSON.stringify(result));
					res.end();
				}

				connection.release();
			});

	});

});


router.post('/', function(req, res) {

	console.log(req.body);

	// req.assert('lastName', 'Last Name is required').notEmpty();
	// var errors = req.validationErrors();

	pool.getConnection(function(err, connection) {

		if (err) {
			console.error("An error occurred: " + err);
		}

		connection.query('insert into Person set ?', req.body,
			function(err, rows) {
				if (err) {
					throw err;
				} else {
					res.writeHead(200, {
						"Content-Type": "application/json"
					});
					var result = {
						success: true,
						detail: rows,
						id: rows.insertId

					}
					res.write(JSON.stringify(result));
					res.end();
				}

				connection.release();
			});

	});

});

module.exports = router;
Categories: JavaScript

Ext JS: Generating a Checkbox Group from a Store

February 12, 2015 Leave a comment

Ext JS checkbox groups enable you to group checkboxes into a single logical field. Since these checkboxes are often times dynamically generated from a store, I thought that it might make sense to extend the class with some store binding. Here’s my first, lightly tested attempt:

 Ext.define('Ext.ux.CheckboxStoreGroup', {
    extend: 'Ext.form.CheckboxGroup',
    alias: 'widget.checkboxstoregroup',
    config: {
        store: null,
        labelField: 'label',
        valueField: 'id',
        checkedField: 'checked',
        columns: 3,
        boxFieldName: 'mycheckbox'
    },
    applyStore: function(store) {
        if (Ext.isString(store)) {
            return Ext.getStore(store);
        } else {
            return store;
        }
    },
    updateStore: function(newStore, oldStore) {
        if (oldStore) {
            store.removeEventListener('datachanged', this.onStoreChange, this)
        }
        newStore.on('datachanged', this.onStoreChange, this);
    },
    onStoreChange: function(s) {
        
        Ext.suspendLayouts();
        this.removeAll();
        
        var vField = this.getValueField();
        var lField = this.getLabelField();
        var cField = this.getCheckedField();
        var fName = this.getBoxFieldName();
        var rec = null;
        
        for (var i=0; i<s.getCount(); i++) {
            rec = s.getAt(i);
           
            this.add({
                xtype: 'checkbox',
                inputValue: rec.get(vField),
                boxLabel: rec.get(lField),
                checked: rec.get(cField),
                name: fName
            });
        }
        
        Ext.resumeLayouts(true);
        
    }, 
    initComponent: function() {
        this.callParent(arguments);
        this.on('afterrender', this.onAfterRender);
    },
    onAfterRender: function() {   
        if (this.getStore().totalCount) {
            this.onStoreChange(this.getStore);
        }
    }
});

You can test and play around with the code here:
https://fiddle.sencha.com/#fiddle/i51

Categories: Ext JS 4, Ext JS 5

Using Brackets for Ext JS Development

February 12, 2015 3 comments

Recently I evaluated using Brackets, a free, open-source, multiplatform-editor as a potential replacement for Sublime Text in our Javascript training courses.
brackets1
Brackets has a lot going for it:

  • It’s free
  • Installation is simple
  • It’s open source
  • Projects are directory-based, just like Sublime
  • It has a js linter built in
  • It has some intellisense
  • It does *not* auto-complete array and object syntax (brackets and curly braces)
  • It supports scss (Sassy CSS)
  • Performance doesn’t completely suck
  • It’s supports 3rd Party Plugins
  • It’s available for multiple OS.

And while it doesn’t fully support Sencha’s massive Ext JS library, it should help students quickly identify syntax problems with their json configs. I was able to configure Bracket’s built-in JS Linter to ignore nearly all of its “false-positive” errors and warnings.

The trick is to modify Bracket’s preferences file (Debug > Open Preferences File) as follows:

{
    "linting.collapsed": false,
    "themes.theme": "light-theme",
    "jslint.options": {
        "plusplus": true,
        "devel": true,
        "predef": [
            "Ext"
        ],
        "sloppy": true,
        "browser": true,
        "white": true
    },
    "useTabChar": false
}

You’ll need to restart Brackets for these changes to take effect.

So if you’re looking for a change of pace from using Sublime, or money is tight and you can’t afford JetBrains WebStorm or Sencha Architect, it’s worth giving Brackets a try.

Download Brackets at http://brackets.io/

Happy coding!

Categories: Ext JS 5, JavaScript

Fig Leaf Software’s Ext JS 5 Fiddles

February 9, 2015 Leave a comment
Categories: Ext JS 5 Tags: ,

I Can’t Fight This Framework Anymore…

January 26, 2015 4 comments

I can’t fight this framework any longer.
It seems like such a really great gizmo
What started out as a small ZIP
Has grown larger.
And its learning curve will make my work go slow

I tell myself that I can’t hold out forever.
Friends said there is no reason for my fear.
I feel so secure when I read their forums
It should give my work direction,
And make everything so clear.

And even as I ponder,
Converting every app in sight
Its docs make my brow furrow
As I code late into the night
But I’m getting closer than I ever thought I might.

And I can’t fight this framework anymore.
Writing my own code is such a chore.
Gotta learn before my job gets shipped offshore
And stays in Eastern Europe forever

And I can’t fight this framework anymore.
I’ve forgotten what I started fighting for.
It’s time to put my app into the store,
And delete the backdoors, forever.

Cause I can’t fight this framework anymore.
I’ve forgotten what I started fighting for.
Tired of my ux being an eyesore
Gonna show my boss I am hardcore!
Baby, I can’t fight this framework anymore.

Categories: Humor
Follow

Get every new post delivered to your Inbox.

Join 616 other followers