Book Image

Learning Ext JS 4

By : Crysfel Villa, Armando Gonzalez
Book Image

Learning Ext JS 4

By: Crysfel Villa, Armando Gonzalez

Overview of this book

<p>Ext JS is a JavaScript library for building interactive web applications using techniques such as Ajax, DHTML, and DOM scripting.<br /><br />Ext JS 4 features expanded functionality, plugin-free charting, and a new MVC architecture, it's the best Ext JS web application development platform yet. It helps develop incredible web apps for every browser.<br /><br />Learning Ext JS 4 will teach you how to get the best of each Ext JS component and also show you some very practical examples that you can use in real world applications. You will also learn why it is so useful and powerful in developing fast and beautiful applications.<br /><br />The book starts with the very basics of Ext JS. You will learn to create a small application step-by-step, and add new features to it in every chapter.<br /><br />Once you grasp the basics, you will learn more complicated topics such as creating new components, templates, architecture, patterns, and also tips and techniques that will help you improve your skills on JavaScript and Ext JS 4. We also cover how to create themes to make your application design beautiful and customize it the way you need.<br /><br />At the end of the book, you will have a working application built using all the knowledge you gained from the book.</p> <p>&nbsp;</p>

Related Content you might be interested in

Current Title:

Small book image
Learning Ext JS 4
Crysfel Villa | Armando Gonzalez
Jan, 2013 | 434 pages
No titles found
Table of Contents (20 chapters)
Learning Ext JS 4
Learning Ext JS 4
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
The Basics
The Basics
Should I use Ext JS for my next project?
Getting started with Ext JS
Our first program
Editors
Building an application
Summary
2
The Core Concepts
The Core Concepts
The class system
Loading classes on demand
Working with the DOM
Manipulation – How to change it?
Summary
3
Components and Layouts
Components and Layouts
The components lifecycle
About containers
The layout system
Summary
4
It's All About the Data
It's All About the Data
Ajax
Models
Dealing with the store
Retrieving remote data
Sending data
Summary
5
Buttons and Toolbars
Buttons and Toolbars
Event driven development
A simple button
Adding menus
Toolbars
The main menu for our application
Summary
6
Doing it with Forms
Doing it with Forms
The form component
Available fields
The field container
Submitting the data
Summary
7
Give me the Grid
Give me the Grid
The data connection (models and stores)
A basic grid panel
Columns
Columns renderers
Selection models
Grid listeners
Features
Plugins
Grid paging
Infinite scrolling
Summary
8
Architecture
Architecture
The MVC pattern
Creating our first application
Creating a module
Summary
9
DataViews and Templates
DataViews and Templates
The data connection (models and stores)
A basic dataview
Handling events on the dataview
Templates
A more complex dataview
Summary
10
The Tree Panel
The Tree Panel
A basic tree panel
The TreeStore
Tree nodes
Tree drag-and-drop
Adding and removing nodes
The check tree
The grid tree
Adding an invoices' categories tree panel
Summary
11
Drag and Drop
Drag and Drop
Make an item draggable
Hitting the drop zone
Drag and drop between Ext JS components
Enhancing our application with drag and drop
Summary
12
Look and Feel
Look and Feel
Setting up our environment
The resources folder
Variables
Advanced theming
Different styles for the same component
Supporting legacy browsers
Summary
13
From Drawing to Charting
From Drawing to Charting
Basic drawing
Adding interaction
Charts
Series examples
Enhancing our application with charts
Summary
Index
Index

A basic grid panel

Once we have our model and store, we are ready to define the grid that will show our clients information as shown in the following code:

/**
 * @classMyApp.view.BasicGridPanel
 * @extendsExt.grid.Panel
 * @author Armando Gonzalez <[email protected]>
 * This the basic grid panel definition.
 */
Ext.define('MyApp.view.BasicGridPanel', {
  extend: 'Ext.grid.Panel',

  width:700,
  height:180,
  title:'Clients',

  initComponent: function() {
    var me = this;
    me.createModel();
    me.columns = me.buildColumns();
    me.store =  me.buildStore();

    this.callParent(arguments);
  },
  createModel:function(){ //The definition of the client model

  },
  buildStore:function(){  //defining the client`s store

  },
  buildColumns : function(){
    return [
            {
            text:'Name',
            width:100,
            dataIndex:'name'
            },{
            text:'Last Name',
            width:100,
            dataIndex:'lastname'
            },{
       ...
Previous Section
End of Section 3
Next Section