Sunday, 26 March 2017

EXTJS3 JSON GRID

In last posts i explained about the Array grid and grouping grid. Now i will explain about the Json Grid.

Ext.onReady(function () {
    var Grid1Store = new Ext.data.JsonStore({
        root: 'users',
        fields: ['id', 'name', 'email'],
        //autoLoad: true,
        data: {
            users: [{
                "id": 1,
                "name": "John Smith",
                "email": "jsmith@example.com"
            }, {
                "id": 2,
                "name": "Anna Smith",
                "email": "asmith@example.com"
            }, {
                "id": 3,
                "name": "Peter Smith",
                "email": "psmith@example.com"
            }, {
                "id": 4,
                "name": "Tom Smith",
                "email": "tsmith@example.com"
            }, {
                "id": 5,
                "name": "Andy Smith",
                "email": "asmith@example.com"
            }, {
                "id": 6,
                "name": "Nick Smith",
                "email": "nsmith@example.com"
            }]
        }
    });

    var onReadyFunction = function () {

        var grid = new Ext.grid.GridPanel({
            renderTo: Ext.getBody(),
            frame: true,
            title: 'Database',
            width: 500,
            height: 300,
            store: Grid1Store,
            columns: [{
                header: "Id",
                dataIndex: 'id'
            }, {
                header: "Name",
                dataIndex: 'name'
            }, {
                header: "Email",
                dataIndex: 'email'
            }]
        });

    }
    Ext.onReady(onReadyFunction);

});

Saturday, 25 March 2017

Extjs3 Grouping grid

In last post  explained about the Array grid and how to use arrayStore and how to bind the data to grid. Now i will explain about the Extjs3 Grouping grid.

Following code having the the some static dummy data and Store grid.






Ext.onReady(function(){

    Ext.QuickTips.init();

    var xg = Ext.grid;


    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

    var store = new Ext.data.GroupingStore({
            reader: reader,
            data: xg.dummyData,
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        });

    var grid = new xg.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
            {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),

        frame:true,
        width: 700,
        height: 450,
        collapsible: true,
        animCollapse: false,
        title: 'Grouping Example',
        iconCls: 'icon-grid',
        fbar  : ['->', {
            text:'Clear Grouping',
            iconCls: 'icon-clear-group',
            handler : function(){
                store.clearGrouping();
            }
        }],
        renderTo: document.body
    });
});



// Array data for the grids
Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
    ['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
    ['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
    ['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
    ['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
    ['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
    ['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
    ['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
    ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
    ['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
    ['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
    ['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
    ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
    ['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
    ['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
    ['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
    ['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
    ['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
    ['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
    ['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
    ['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
    ['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
    ['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
    ['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
    ['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
    ['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
    ['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
    ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
    ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']

];


Source from sencha

Extjs3 Array Grid


Today i will explain about the Array grid in Extjs3, In Extjs3 We have different types of stores like ArrayStore, JsonStore, XmlStore. based on the type of service response we have to use the store for the grid.

Following code having the the some static dummy data and Store grid.



Ext.onReady(function () {
    var myData = [
        ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
        ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
        ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
        ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
        ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
        ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
        ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
        ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
        ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
        ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
        ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
        ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
        ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
        ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
        ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
        ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
        ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
        ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
        ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
        ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
        ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
        ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
        ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
        ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
        ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
        ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
    ];

    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [{
            name: 'company'
        }, {
            name: 'price',
            type: 'float'
        }, {
            name: 'change',
            type: 'float'
        }, {
            name: 'pctChange',
            type: 'float'
        }, {
            name: 'lastChange',
            type: 'date',
            dateFormat: 'n/j h:ia'
        }]
    });

    // manually load local data
    store.loadData(myData);

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: document.body,
        columns: [{
            id: 'company',
            header: 'Company',
            width: 160,
            sortable: true,
            dataIndex: 'company'
        }, {
            header: 'Price',
            width: 75,
            sortable: true,
            renderer: 'usMoney',
            dataIndex: 'price'
        }, {
            header: 'Change',
            width: 75,
            sortable: true,
            dataIndex: 'change'
        }, {
            header: '% Change',
            width: 75,
            sortable: true,
            dataIndex: 'pctChange'
        }, {
            header: 'Last Updated',
            width: 85,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex: 'lastChange'
        }]
    });
});

Source From Sencha

Monday, 20 March 2017

Introduction to Xamarin for Visual Studio 2017 Webinar

Introduction to Xamarin for Visual Studio 2017

Join James Montemagno as he walks through how Xamarin for Visual Studio 2017 makes it even easier to deliver fully native Android, iOS, and UWP apps from a single C# codebase. You’ll learn what’s new, including: the Xamarin Inspector and Profiler, new language features in C# 7, and how Visual Studio 2017 streamlines mobile development for .NET developers everywhere. In this webinar, you will: • Get step-by-step demos and technical documentation to build your first apps with Xamarin for Visual Studio 2017 • Add mobile-essential backend features faster with Connected Templates and Connected Services • Utilize the latest Xamarin features, including Inspector, Workbooks, Profiler, Remote iOS Simulator, and more • Learn how to create amazing apps with the latest C# 7 features Download Visual Studio 2017

Register

Friday, 17 March 2017

Extjs Actionsheet

ActionSheet

An actionsheet are used to display the popup message with list of buttons.

The difference between ActionSheet and Sheet is ActionSheet are docked at the bottm of the screen  the default type of items are button. Sheet is a floated model panel widget

While creating the actionsheet no need to mention xtype: 'button'. There are lot config option to dispaly actionsheet in sencha.

var actionSheet = Ext.create('Ext.ActionSheet', {
    items: [
        {
            text: 'Delete draft',
            handler : function(){
                actionSheet.hide();
                }
        },
        {
            text: 'Save draft',
handler : function(){
                actionSheet.save();
                }
        },
        {
            text: 'Cancel',
            ui  : 'confirm',
handler : function(){
                actionSheet.hide();
                }
        }
    ]
});

Ext.Viewport.add(actionSheet);
actionSheet.show();



Wednesday, 15 March 2017

AngularJS Hyderabad - March 2017 meet

FreeCodeCamp Meetup on Ionic Framework


Register


  •  to 
  • T-Hub

    IIIT Hyderabad Campus, Gachibowli Circle, Hyderabad (map)

    Our friends at FreeCodeCamp are running a Meetup on Ionic Framework. They are another active and tech savvy developer community in the city.
    Details as below,
    Build Hybrid Apps with Ionic Framework | Mobile Dev Month
    Mobile Dev Month is a series of three meetups that explores building mobile apps in Android, Ionic Framework and React Native.
    In this meetup, we'll introduce you to the Ionic Framework, and walk you through building a simple to-do app. Following that, we'll have a break for lunch where you can network with other developers.
    From 2 pm - 6 pm, we'll have an open house pair programming session, where you can collaborate with others to build something with Ionic, debug some GitHub issues of the todo app, or go through some learning resources together.
    Location : T-Hub, IIIT-H
    Important Note :
    - You need to be familiar with Angular 1 basics.
    - Laptops are mandatory. Get them fully charged.
    - You need to have Node JS installed on your laptop.
    - This meetup is free of cost. If you're familiar with HTML/CSS/JavaScript, but new to Angular 1, we recommend you go through this office quick guide and/or this official tutorial prior to the meetup.
    If you're already familiar with Ionic, we would recommend you to skip the morning session and attend the pair programming session at 2 pm instead. You can collaborate with others at the same level as you, and approach the experts directly with questions. If you have any other questions, post them in the comments below.

Extjs sencha column chart item click not working

In sencha column chart( Bar chart) itemclick not working this is not an issue. for this we need to add the chartitemevents plugin to the cartesian, the all the events will work.

This is the plugin
  plugins: {
        ptype: 'chartitemevents',
        moveEvents: true
    },


Bar 3D chart example as below.


Ext.create({
   xtype: 'cartesian',
   renderTo: Ext.getBody(),
   plugins: {
        ptype: 'chartitemevents',
        moveEvents: true
    },
   width: 600,
   height: 400,
   innerPadding: '0 10 0 10',
   store: {
       fields: ['name', 'apples', 'oranges'],
       data: [{
           name: 'Eric',
           apples: 10,
           oranges: 3
       }, {
           name: 'Mary',
           apples: 7,
           oranges: 2
       }, {
           name: 'John',
           apples: 5,
           oranges: 2
       }, {
           name: 'Bob',
           apples: 2,
           oranges: 3
       }, {
           name: 'Joe',
           apples: 19,
           oranges: 1
       }, {
           name: 'Macy',
           apples: 13,
           oranges: 4
       }]
   },
   axes: [{
       type: 'numeric3d',
       position: 'left',
       fields: ['apples', 'oranges'],
       title: {
           text: 'Inventory',
           fontSize: 15
       },
       grid: {
           odd: {
               fillStyle: 'rgba(255, 255, 255, 0.06)'
           },
           even: {
               fillStyle: 'rgba(0, 0, 0, 0.03)'
           }
       }
   }, {
       type: 'category3d',
       position: 'bottom',
       title: {
           text: 'People',
           fontSize: 15
       },
       fields: 'name'
   }],
   listeners:{
     itemclick: function(){
         alert('itemclick');
     }
   },
   series: {
       type: 'bar3d',
       xField: 'name',
       yField: ['apples', 'oranges']
   }
});







Source from sencha



Saturday, 11 March 2017

Extjs Tooltip examples

Using the sencha ExtJs we can show the tooltip to the target fields. In many ways like below.

1. Button
     Using the tooltip config property of the button, we can show the tooltip on move over on the button.

Ext.create('Ext.Button', {
    text: 'Click me',
    tooltip: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        alert('You clicked the button!');
    }
});




The same result we can achieve in render function creating tooltip and assigning target and text.


 Ext.create('Ext.Button', {
    text: 'Click me',
   tip: 'Click me',
    renderTo: Ext.getBody(),
      listeners: {
        render: function(c) {
            Ext.create('Ext.tip.ToolTip', {
                target: c.getEl(),
                html: c.tip
            });
        }
    }

});

OR

Ext.application({
    name: 'Fiddle',

    launch: function() {
Ext.tip.QuickTipManager.init(); // Instantiate the QuickTipManager

 Ext.create('Ext.Button', {

     renderTo: Ext.getBody(),
     text: 'My Button',
     listeners: {

         afterrender: function(me) {

             // Register the new tip with an element's ID
             Ext.tip.QuickTipManager.register({
                 target: me.getId(), // Target button's ID
                 title : 'My Tooltip',  // QuickTip Header
                 text  : 'My Button has a QuickTip' // Tip content
             });

         }
     }
 });


    }
});




Friday, 10 March 2017

Adding tooltip to Extjs Grid panel

ToolTip is Ext.tip.Tip ( xtype:tooltip ). This handles a displaying a tooltip when hovering over a certin element or element on the page.

In this post i will explain how to show the tooltip to the perticular column in the grid.

Using the grid renderer config we can show the tooltip to the column information.


Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'hari', email: 'hari@gmail.com', phone: '555-111-1224' },
        { name: 'sandy', email: 'sandy@gmail.com', phone: '555-222-1234' },
        { name: 'lucy', email: 'lucy@gmail.com', phone: '555-222-1244' },
        { name: 'rita', email: 'rita@gmail.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' ,
        renderer: function(value, metaData, record, rowIdx, colIdx, store) {
            metaData.tdAttr = 'data-qtip="' + value + '"';
            return value;
    }}
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});





Source from Sencha 

MUGH Visual Studio 2017 Community Launch

MUGH Visual Studio 2017 Community Launch



DATE AND TIME

LOCATION

Microsoft India Development Center
Building 3, MPR Halls 1, 2 & 3
Gachibowli
Hyderabad, Telangana 500081









Wednesday, 8 March 2017

Sencha Eclipse Plugin 6.0.4

Sencha's Eclipse Plugin is now availabel to develop Extjs Applications faster in Eclipse Plugins.

This plugin avalible for Mars and Luna.

You can download the new version from one of the following places:Try it for free today*

*Note: when you receive the Ext JS free trial confirmation email, you can choose to download Eclipse plugin only, if you already have Ext JS.


Ext JS Pro and Premium customers:

Download the plugin from the Support portal.Download the plugin from Eclipse Marketplace.
Read the docs to get installation instructions.


Tuesday, 7 March 2017

Visual Studio 2017 is here !

Visual Studio 2017 is here ! Any developer, any app, any platform ! , Watch the launch event live



https://launch.visualstudio.com/


Friday, 24 February 2017

How to add dynamically store data to combobox

Am going to bind the data to combobox store dynamically. below is the combobox how to define the properties and all.

xtype: 'combobox',
width: '10%',
reference: 'Amount',
fieldLabel: 'Amount',
labelSeparator: "",
labelAlign: 'top',
queryMode: 'local',
store: new Ext.data.JsonStore({
fields: ['id', 'display', 'value']
}),
displayField: 'display',
valueField: 'value',
emptyText: 'Select',
name: 'relationType',
submitEmptyText: false,
allowBlank: false,
style: '141px',
listeners: {
change: 'onSelectionChange'
}



In controllerthe code will be.


var multiplyCombo = fieldsContainer.down('combobox').getStore();
var bulkAddArray = [];
for (var i = 1; i <= multiplyFactor; i++) {
bulkAddArray.push({
display: i,
value: i
});
}
multiplyCombo.loadData(bulkAddArray, true);


Thursday, 23 February 2017

How to call controller method from Html element click

I got idea like i would like to show some forms while am click on HTML label , Calling Extjs viewController from HTML DOM element tried to add click event to fetch the controller but didnt worked that.

Then i realized after rendering that DOM i will add function to that elementt click function. The code will like below.

This is the code of HTML text from JSON object.

<label id='lblShowDep'>Privacy Policy</label>

After rendering adding the controller method to that DOM Element

if(Ext.get('lblShowDep')){
     Ext.get('lblShowDep').on('click', function() {
           controller.onClickShowDep();
      });
}




Sunday, 19 February 2017

ExtJS Close all opend windows

Today i would like to tell  today how to close all windows currently opend in application.

Using  Ext.WindowManager we can get all windows in our app. Using the following code we close all opend windows.


var activeWin = Ext.WindowManager.getActive();
if (activeWin) {
    activeWin.close();
}
 

Sunday, 12 February 2017

responsecode from store callback not coming

Hello Folks,

The callback method does not have the server response passes as object. There are many ways to load the data into the store and not all of them have a server response.

For this we have to override the proxy processResponse function in the store withe operation object contains serverResponse.


    Ext.define('Ext.data.proxy.ServerOverride', {
            override: 'Ext.data.proxy.Server',
            processResponse: function (success, operation, request, response, callback, scope) {
               operation.serverResponse = response;
               this.callParent(arguments);
            }
         });




storeDepartments.getProxy().setUrl(config.CUSTOMER_DEPARTMENTS_URL);
        storeDepartments.load({
        callback: function(records, operation, success, response) {
        if(success == false){
              var response = operation.serverResponse;            
              if(response){
            var responseText = Ext.decode(response.responseText);
if(responseText.status == 404){
 Ext.Msg.alert('Service Unavailable');
}
            }
}
}});



Wednesday, 1 February 2017

Using Angular with Salesforce and Getting started with Elm

  • Fission Labs

    Plot No: 703/A, 3rd Floor, Road No: 36, Jubilee Hills, Hyderabad (map)
  • Join us for a two session meetup on 11th February 2017. We will have the following sessions:
    Using Angular with Salesforce by Shashank Srivatsavaya - 10:30 AM to 11:30 AM
    In this talk, we will see how to integrate Angular/Angular2 applications with salesforce APIs through a sample contact management application hosted on Heroku PaaS. (This talk could be a hands-on based session, we will update soon.) 
    Getting Started with Elm by Khaja Minhajuddin - 11:30 AM to 12:30 PM 
    Elm is a delightful language to build your web apps. It eliminates almost all of your runtime exceptions. In this talk we'll build a two simple web applications using Elm and will understand the Elm ecosystem.