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. 

Wednesday, 30 November 2016

Extjs Grid Selection check model select all By default

Hello,

We need to add the selModel to Grid config selmodel, in afterLayout listener selectAll();




var selModel = Ext.create('Ext.selection.CheckboxModel', {
    checkOnly: true});    

Tuesday, 16 August 2016

How to add clear trigger to textfield


Hello all,

Today i would like to post the basic textfield enhancements in extjs. How to add the Clear trigger icon to textfield.

Below is the code to add triggers to textfield, we can multiple triggers like clear, search icon aswell.

                  {
                        xtype: 'textfield',
                        fieldLabel: 'Search',
                        triggers: {
                            clear: {
                                cls: 'x-form-clear-trigger',
                                handler:function(field) { field.reset(); }
                            }
                        }
                    }


OutPut




Sunday, 14 August 2016

Extjs - How to change style of item in combox

I would like to post the change the color of item in combox.

Recently i worked on changing the color of combobox item based on current year Quarter. This we can do using XTemplate. XTemplate we can do based on conditional operations, math operations we can do.

We need to create style Class for this.

div .comboColor {
    background-color#87CEFA;
    padding-left: 4px;
} 

And ComboBox definition like below.

{
  xtype: 'combobox',
  labelWidth: 70,
  store: AccountingPeriods,
  displayField: 'Description',
  valueField: 'AccountingPeriodId',
  name: 'Period',
  queryMode: 'local',
  fieldLabel: 'Year Periods',
  tpl: Ext.create('Ext.XTemplate',
  '<tpl for=".">',
  '<div class="{[this.getClass(values)]}">{Description}</div>',
  '</tpl>',
    {
        getClass: function (rec) {
              return rec.IsCurrent ? 'x-boundlist-item comboColor' : 'x-boundlist-item';
                               }
    }

  )}


The OutPut result will be.