Astute JS : July 2015

Wednesday, July 15, 2015

Angular JS - What is $rootScope?

$Scope is a javascript object associated to controller.
Controller constructor function is responsible for setting the properties and methods to the $scope object.
Methods and properties are created in the $Scope object are only accessed from the controller(Html view).
$rootScope is a javascript object which is parent of all $scope object.
All other scopes are descendant scopes of the root scope.
$rootScope object could communicate across the scopes.

<body ng-app="sampleApp">
    <div ng-controller="AppCtrl1" style="border:1px solid blue; padding:5px">
     Hello {{msg}}!
     <br />
     Hello {{name}}! (rootScope)
    </div>
    <br />
    <div ng-controller="AppCtrl2" style="border:1px solid green; padding:5px">
     Hello {{msg}}!
     <br />
     Hey {{myName}}!
     <br />
     Hi {{name}}! (rootScope)
    </div>
    <script src="angular.js"></script>

   <script>
     var app = angular.module('sampleApp', []);
     app.controller('AppCtrl1', function ($scope, $rootScope) {
     $scope.msg = 'World';
     $rootScope.name = 'Angular JS';
     });
     app.controller('AppCtrl2', function ($scope, $rootScope) {
     $scope.msg = 'Astute JS';
     $scope.myName = $rootScope.name;
     });
     </script>

Sunday, July 5, 2015

ExtJS - Simple ExtJS Grid

ExtJS Grid

ExtJS Grid Panel is one of the versatile and most used component in this framework.
Ext.grid.Panel is a component that displays the data contained in Ext.data.Store.
Ext.data.Store maintains the data CACHE for ExtJS components.
Ext.data.Store is the instance of Ext.data.Model .

As mentioned above, the job of EXT JS grid to display the data and provides the functionality of the grid.
The purpose of the Ext.data.Store is fetching the data and maintains the data for the component.

Ext Data Model

Ext.data.Model represents the data model or data structure of Ext.data.Store.

Ext.define('Employee', {

extend: 'Ext.data.Model',

fields: [ 'name', 'designation', 'age' ]

});

Ext Data Store

Ext.data.Store is the instance of data model Employee

var empStore = Ext.create('Ext.data.Store', {
model: 'Employee',
data: [
{ name: 'Sathish', email: 'sathish@example.com', phone: '555-111-1224' },
{ name: 'Vinod', email: 'vinod@example.com', phone: '555-222-1234' },
{ name: 'Nagamuthu', email: 'naga@example.com', phone: '555-222-1244' }
]
});

Now Ext.data.Model Employee and Ext.data.Store is available to populate the data in Ext.grid.Panel.

Following snippet explains how to make use of Ext.data.Store to display the data in Ext.grid.Panel.

Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: empStore,
width: 400,
height: 200,
title: 'Employee details',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Designation',
width: 150,
dataIndex: 'designation',
hidden: true
},
{
text: 'Age',
flex: 1,
dataIndex: 'age'
}
]
});

ExtJS Simple Grid Sample

Thursday, July 2, 2015

ExtJS - Border Layout

Border layout allows you you to create a layout based on the regions.
Layout needs to be allocated as regions
Typical ExtJS application has border layout has initial layout

Following are the regions defined in border layout
- East
- West
- Center - Main Content
- North - Header
- South - Footer
          { id:'border-panel',
            title: 'Border Layout',
            layout: 'border',
            bodyBorder: false,
            defaults: {
                collapsible: true,
                split: true,
                animFloat: false,
                autoHide: false,
                useSplitTips: true,
                bodyStyle: 'padding:15px'
            },
            items: [{
                title: 'Footer',
                region: 'south',
                height: 150,
                minSize: 75,
                maxSize: 250,
                cmargins: '5 0 0 0',
                html: '<p>Footer content</p>'
            },{
                title: 'Navigation',
                region:'west',
                floatable: false,
                margins: '5 0 0 0',
                cmargins: '5 5 0 0',
                width: 175,
                minSize: 100,
                maxSize: 250,
                html: '<p>Secondary content like navigation links could go here</p>'
            },{
                title: 'Main Content',
                collapsible: false,
                region: 'center',
                margins: '5 0 0 0',
                html: '<h1>Main Page</h1><p>This is where the main content would go</p>'
            }]
        },

Wednesday, July 1, 2015

ExtJS - Anchor Layout

Extjs Provides anchoring of contained items to the container's edges.
This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) Fields are sized relative to the container without hard-coding their dimensions.

{
            id:'anchor-panel',
            title: 'Astute Anchor Layout',
            layout:'anchor',
            defaults: {bodyStyle: 'padding:15px'},
            items: [{
                title: 'Astute Panel 1',
                height: 100,
                anchor: '50%',
                html: '<p>Width = 50% of the container</p>'
            },{
                title: 'Astute Panel 2',
                height: 100,
                anchor: '-100',
                html: '<p>Width = container width - 100 pixels</p>'
            },{
                title: 'Panel 3',
                anchor: '-10, -262',
                html: '<p>Width = container width - 10 pixels</p><p>Height = container height - 262 pixels</p>'
            }]
        }

ExtJs - Accordion Layout

Extjs provides the layout property to achieve the accordion Menu.
Defining layout as Accordion and adding elements is enough to make accordion menu.
There is no extra configuration for accordion menu.

            {
            id: 'accordion-panel',
            title: Astute Accordion Layout',
            layout: 'accordion',
            bodyStyle: 'background-color:#DFE8F6',
            defaults: {bodyStyle: 'padding:15px'},
            items: [{
                title: 'Astute Introduction',
                tools: [{type:'gear'},{type:'refresh'}],
                html: '<p>Here is some accordion content. Click on one of the other bars below for more.</p>'
            },{
                title: 'Astute Basic Content',
                html: '<br /><br /><p>More content. Open the third panel for a customized look and feel example.</p>',
                items: {
                    xtype: 'button',
                    text: 'Show Next Panel'
                }
            },{
                id: 'acc-custom',
                title: 'Astute Custom Html Panel ',
                html: '<p>HTML Content</p>'
            }]
        }

ExtJS - Absolute Layout

Absolute is the simple layout that allows to position the component inside the container.
Basically it applies the css absolute property to the component.
Provides the configuration to position the container.

      {
            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 - Lazy Instantiation(xtype)

Every component has the alias name in ExtJS.
Alias name are used to create the instance of the component.
Alias name to be provided in the component property xtype.
By creating components using xtype will help us to create the instance of the component when required.
In large applications, This is the ideal way to create the components.

         Ext.create('Ext.tab.Panel', {
        renderTo: Ext.getBody(),
        height: 100,
        width: 200,
        items: [
            {
                xtype: 'panel',
                title: 'xtype Panel',
                html: 'Panel created using xtype',
                listeners: {
                    render: function() {

                    }
                }
            }
        ]
    });