http://www.alib.spb.ru/download/web/learning_extjs.pdf
Examples.
http://dev.sencha.com/deploy/ext-4.0.0/examples/
Getting Ext.Elements
http://docs.sencha.com/core/manual/content/element.htmlSimple tutorial about EXT Designer.
http://aboutfrontend.com/extjs/ext-designer-tutorial-for-a-developer/
Tutorial
http://www.sencha.com/learn/Tutorials
Intro and APIs
http://docs.sencha.com/ext-js/4-0/
http://docs.sencha.com/ext-js/4-0/#/guide/tree
http://newsite.sencha.com/learn/Tutorial:Extending_Ext_for_Newbies
xtype
http://www.sencha.com/learn/Tutorial:Xtype_defined
Tree
To display hierarchical data in a collapsible list, you use a TreePanel container. A TreePanel contains a
root node and any number of child nodes. You can build a static tree, or use a TreeLoader to load data
into the tree asynchronously.
http://www.sencha.com/forum/showthread.php?98442-TreePanel-with-tri-state-checkboxes
Availability via ComponentMgr
Every component in Ext gets registered with the ComponentMgr on creation, so you can retrieve any component at any time simply by calling Ext.getCmp('id').
http://www.sencha.com/forum/showthread.php?123644-CodeMirror-and-Sencha-%28ExtJs%29
How to uncheck all tree node in Ext.tree.TreePanel
http://stackoverflow.com/questions/4450360/how-to-uncheck-all-tree-node-in-ext-tree-treepanel
FireBug
http://getfirebug.com/
Global var for js
http://stackoverflow.com/questions/944273/how-to-declare-a-global-variable-in-a-js-file
Misc
http://www.sencha.com/forum/showthread.php?12888-solved-programatically-unchecking-checked-tree-nodes&p=62845#post62845
http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.Checkbox-cfg-uncheckedValue
http://docs.sencha.com/ext-js/4-0/#/api/Ext.tree.Panel-event-checkchange
multiple tree root nodes
http://www.sencha.com/forum/showthread.php?39142-multiple-tree-root-nodes
EXT JS
-
Javascript
JavaScript is an object-based language. Every data item is an object. Numbers, strings, dates, and Booleans (true or false values) are all objects. JavaScript variables reference the objects we assign to them. In JavaScript, functions are also objects, and may be assigned to variables and passed as parameters just the same as other objects. A function declaration is a literal in just the same way that a quoted string is a literal.
var myVariable = "A string literal";
alert(myVariable);
myVariable = function() {
alert("Executing the function");
};
myVariable();
This concept is central to your understanding of much of what follows. Functions will be passed as parameters into Ext JS methods to be called by Ext JS to handle user interface events or network communication (AJAX) events.
It is important to remember that when a function reference is passed, it's only a pointer to a function object. If that function was a member method of an object, then this information is not included. If the function is to be executed as a member method of an object, then that information must be included when passing the function. This is the concept of scope, which will be very important in later chapters.
Three Main Files..
- ext-all.css: A stylesheet file that controls the look and feel of Ext JS
widgets. This file must always be included as-is, with no modifications. Any
changes to the CSS in this file would break future upgrades. If we decide that
the look and feel of Ext JS needs to be adjusted, another stylesheet containing
the overrides should be included after the ext-all.css file.
• ext-base.js: This file provides the core functionality of Ext JS. It's the
foundation upon which Ext JS builds its capabilities, and provides the
interface to the browser environment. This is the file that we would change
if we wanted to use another library, such as jQuery, along with Ext JS.
• ext-all-debug.js/ext-all.js: All of the widgets live in this file. The
debug version should always be used during development, and then
swapped out for the non-debug version for production.
The Ext.onReady function accepts a function as its first parameter. It will call that
function when the page has fully loaded, and the HTML document is ready to be
manipulated. If you pass a function to Ext.onReady when the document is already
fully initialized, it will be called immediately.
Widgets and classes
Ext JS has many "widgets". These are implemented as classes. These include components such as a message box, grid, window, tree, form, and pretty much everything else that serves a particular user interface function. These will mostly be referred to as 'Components'. There are also data, utility, and
other base classes to aid with development. Methods like onReady are part of the core functions. We only refer to classes that provide a specific user interface role as "widgets"—like the grid that is used to present tabular data to the user.
Ext.get
Ext JS is able to work so well, because it has a foundation that provides access to the DOM, and to many functions that allow manipulation of the DOM. These are part of the Ext Core library. Of these functions, get is one of the most used.
Var myDiv = Ext.get('my_id');
This gives us access to an element in the document with the ID, my_id by wrapping it in an Ext.Element object which provides cross-browser methods to work with DOM elements.
xtype:
Defines which type of Ext JS component will be used: text, date, number, or any of the many others. This could even be a grid or some other type of Ext JS component.
Be aware that the default xtype is a panel. Any {…} structure with no xtype property, as an element in an items config, results in a panel at that position.
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title'
}
name
The name config is just the same as its HTML counterpart and will be used as the parameter name when sending form data to the server.
The names of most of the config options for Ext components match their counterparts in HTML. This is because Ext was created by web developers, for web developers.
Validation
There are many more configuration options, specific to each specialized Ext JS Component class. To easily find what options are available in the online documentation, use the Hide inherited members button at the top right. This will hide config options from the base classes of the Component's heritage, and only show you options from the Component you are interested in:
EXT JS
-
Javascript
JavaScript is an object-based language. Every data item is an object. Numbers, strings, dates, and Booleans (true or false values) are all objects. JavaScript variables reference the objects we assign to them. In JavaScript, functions are also objects, and may be assigned to variables and passed as parameters just the same as other objects. A function declaration is a literal in just the same way that a quoted string is a literal.
var myVariable = "A string literal";
alert(myVariable);
myVariable = function() {
alert("Executing the function");
};
myVariable();
This concept is central to your understanding of much of what follows. Functions will be passed as parameters into Ext JS methods to be called by Ext JS to handle user interface events or network communication (AJAX) events.
It is important to remember that when a function reference is passed, it's only a pointer to a function object. If that function was a member method of an object, then this information is not included. If the function is to be executed as a member method of an object, then that information must be included when passing the function. This is the concept of scope, which will be very important in later chapters.
Three Main Files..
- ext-all.css: A stylesheet file that controls the look and feel of Ext JS
widgets. This file must always be included as-is, with no modifications. Any
changes to the CSS in this file would break future upgrades. If we decide that
the look and feel of Ext JS needs to be adjusted, another stylesheet containing
the overrides should be included after the ext-all.css file.
• ext-base.js: This file provides the core functionality of Ext JS. It's the
foundation upon which Ext JS builds its capabilities, and provides the
interface to the browser environment. This is the file that we would change
if we wanted to use another library, such as jQuery, along with Ext JS.
• ext-all-debug.js/ext-all.js: All of the widgets live in this file. The
debug version should always be used during development, and then
swapped out for the non-debug version for production.
The Ext.onReady function accepts a function as its first parameter. It will call that
function when the page has fully loaded, and the HTML document is ready to be
manipulated. If you pass a function to Ext.onReady when the document is already
fully initialized, it will be called immediately.
Widgets and classes
Ext JS has many "widgets". These are implemented as classes. These include components such as a message box, grid, window, tree, form, and pretty much everything else that serves a particular user interface function. These will mostly be referred to as 'Components'. There are also data, utility, and
other base classes to aid with development. Methods like onReady are part of the core functions. We only refer to classes that provide a specific user interface role as "widgets"—like the grid that is used to present tabular data to the user.
Ext.get
Ext JS is able to work so well, because it has a foundation that provides access to the DOM, and to many functions that allow manipulation of the DOM. These are part of the Ext Core library. Of these functions, get is one of the most used.
Var myDiv = Ext.get('my_id');
This gives us access to an element in the document with the ID, my_id by wrapping it in an Ext.Element object which provides cross-browser methods to work with DOM elements.
xtype:
Defines which type of Ext JS component will be used: text, date, number, or any of the many others. This could even be a grid or some other type of Ext JS component.
Be aware that the default xtype is a panel. Any {…} structure with no xtype property, as an element in an items config, results in a panel at that position.
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title'
}
name
The name config is just the same as its HTML counterpart and will be used as the parameter name when sending form data to the server.
The names of most of the config options for Ext components match their counterparts in HTML. This is because Ext was created by web developers, for web developers.
Validation
There are many more configuration options, specific to each specialized Ext JS Component class. To easily find what options are available in the online documentation, use the Hide inherited members button at the top right. This will hide config options from the base classes of the Component's heritage, and only show you options from the Component you are interested in:
No comments:
Post a Comment