Wednesday, 29 March 2017

Extjs - Loading Json data in Combo

In this post i am going to explain about the loading of the Jsoin data in combo Box.

Ext.onReady(function () {

var JsonData = {
'items': [{
'name': 'Lisa',
"id": "111"
}, {
'name': 'Bart',
"id": "222"
}, {
'name': 'Homer',
"id": "555"
}]
};

var colors = new Ext.data.JsonStore({
root: 'items',
id: "colors",
fields: ['id', 'name']
});
colors.loadData(JsonData);

var entitySearchForm = new Ext.form.FormPanel({
title: "Form loading with Json data",
width: 425,
frame: true,
items: [{
xtype: 'combo',
fieldLabel: 'Role Selection',
id: 'role',
hiddenName: 'role',
hiddenValue: 1,
editable: false,
emptyText: 'Please select a role',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
displayField: 'name',
valueField: 'id',
store: colors
}]
});
var entitySearchWindow = new Ext.Window({
layout: 'anchor',
closable: true,
resizable: false,
draggable: false,
modal: true,
items: [entitySearchForm]
});
entitySearchWindow.show();
});

Sunday, 26 March 2017

Extjs loading FormPanel using Json Data

In this post i will explain about the loading the form with Json data. Form panel having some fields like 3 textboxes on click of the button i will load the data.
Same time on click of clear button we can remove all text boxes values. The following example will show you how to do this.

Result:

Code:

Ext.onReady(function () {
var entitySearchForm = new Ext.form.FormPanel({
title: "Form loading with Json data",
width: 425,
frame: true,
items: [{
xtype: 'textfield',
fieldLabel:'Name',
allowBlank: false,
name: 'name'
}, {
xtype: 'textfield',
allowBlank: false,
fieldLabel:'Location',
name: 'location'
}, {
xtype: 'textfield',
allowBlank: false,
fieldLabel:'Department',
name: 'department'
}],
buttons: [{
text: "Load Data",
listeners: {
click: onbtnClick
}
}, {
text: 'Clear',
listeners: {
click: onbtnClearClick
}
}]
});

var entitySearchWindow = new Ext.Window({
layout: 'anchor',
closable: true,
resizable: false,
draggable: false,
modal: true,
items: [entitySearchForm]
});

//Preparing the Json Data
var record = {
data: {
name: 'Harikrishna',
location: 'India',
department: 'IT'
}
};

function onbtnClick() {
entitySearchForm.getForm().loadRecord(record);
}

function onbtnClearClick() {
entitySearchForm.getForm().reset();
}

entitySearchWindow.show();
});

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

Sunday, March 19, 2017
10:00 AM to 6:00 PM
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

by Microsoft User Group Hyderabad

DATE AND TIME

Sat, March 18, 2017

9:00 AM – 5:30 PM IST

LOCATION

Microsoft India Development Center

Building 3, MPR Halls 1, 2 & 3

Gachibowli

Hyderabad, Telangana 500081

View Map

Register

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 ! #VS2017 , Watch the launch event live

https://launch.visualstudio.com/