 |
| ExtJS Simple Grid Sample |
{
id: 'absolute',
title: 'Astute Absolute Layout',
layout: 'absolute',
defaults: {
bodyStyle: 'padding:15px;',
width: 200,
height: 100,
frame: true
},
items:[{
title: 'Astute Panel 1',
x: 50,
y: 50,
html: 'Astute - Positioned at x:50, y:50'
},{
title: 'Astute Panel 2',
x: 125,
y: 125,
html: 'Astute - Positioned at x:125, y:125'
}]
}
 |
ExtJS Component Hierarchy |
|
ExtJS Object oriented programmingBelow Example to Understand EXTJS classesParent Class calc
Ext.define('calc', { //Define Key word to create Class in ExtJS
x:0, y:0, constructor: function (config) { Ext.apply(this, config); }, getSum: function () { return this.x + this.y; }, getMultiplication: function () { return this.x * this.y; }, getDivision: function() { return this.x / this.y; } }); Child Class Add extends Parent calc
Ext.define('Add', {
extend: 'calc', add: function() { return this.getSum(); } }); Instance Created for class Add
var sum = Ext.create('Add', {x:10, y:15});
Ext.Msg.alert('Addition', sum.add()); Pictorial representation of Class and objects |
 |
| ExtJS 5 |
 | ||
Traditional One Way Binding |
 |
Angular JS Two Way Binding
<body ng-app ng-init="firstName = 'Sathish'; lastName = 'kumar';"> <strong>First name:</strong> {{firstName}} <strong>Last name:</strong> <span ng-bind="lastName"></span> Set the first name: <input type="text" ng-model="firstName"/> Set the last name: <input type="text" ng-model="lastName"/> </body> Above Code binds the value in the view {{ firstName}} and ng-bind="lastName", When value is entered in the following input box <input type="text" ng-model="firstName"/> <input type="text" ng-model="lastName"/> In Angular JS two way binding can be acheived without writing any javascript events on the DOM object.
|