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

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
             });

         }
     }
 });


    }
});

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

Add to Calendar

LOCATION

Microsoft India Development Center

Building 3, MPR Halls 1, 2 & 3

Gachibowli

Hyderabad, Telangana 500081

View Map

Register

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.

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/

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);

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();

      });

}

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();
}
 

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');
}
            }
}
}});

Using Angular with Salesforce and Getting started with Elm

• Saturday, February 11, 2017

  10:30 AM
• 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. 

Register

Extjs treelist

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});    

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

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.

Hyderabad dotnetConf 2016

Hyderabad dotnetConf 2016 Welcomes You!

Microsoft User Group Hyderabad presents Hyderabad dotnetConf 2016. Immerse yourself 

in the world of .NET.

Hyderabad dotnetConf 2016 featuring speakers from the Microsoft Most Valuable

Professionals, .NET Community and Microsoft. Mark your calendar on August 27th.

Learn to develop for web, mobile, desktop, games, services, libraries and more for a variety

of platforms and devices all with .NET! We'll have presentations on .NET Core 

and ASP.NET Core, C#, F#, Roslyn, Visual Studio, Universal Windows Platform (UWP),

 Xamarin, and much more.

Venue:

Microsoft India Development Center

Building 3, Gachibowli, Hyderabad, Telangana 500032, India

Register

For more details and Agenda MUGH

Difference between renderer and convert

In Extjs everyone has small confusion what is the Difference between renderer and convert.

renderer: renderer is an "Interceptor" method which can be used to transform the data like value, appearence..before it rendered to the browser.

renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    // style the cell using the dataIndex of the column
    var headerCt = this.getHeaderContainer(),
        column = headerCt.getHeaderAtIndex(colIndex);

    metaData.tdCls = 'app-' + column.dataIndex;
    return value;
}

It will returns the HTML string.

convert: convert is a function this converts the value provided by the reader into an object that will be stored into the Model.
This function access the rows information inside the store, based on this we can modify the data.