Ext JS 6.5 GA, Progressive Web Apps, Sencha Test Futures, and Ext JS Tips

	NEWSLETTER MAY 2017

Announcing Ext JS 6.5 and Sencha Cmd 6.5 GA by Don Griffin and Sandeep Adwankar Ext JS 6.5 and Sencha Cmd 6.5 enable you to deliver rich mobile and desktop experiences for your data-intensive, cross-platform web apps – using the Modern toolkit. See all the new features.  READ MORE

Creating Progressive Web Applications using SenchaExt JS  by Ajit Kumar We’ve made progressive web app development very easy with Ext JS. You can create a rich user experience and increase user engagement by delivering the best of both web and mobile apps. Learn how to create your PWA. READ MORE

Sencha Test Futures API for End-to-End Testing by Jon Jarboe, Don Griffin, Subu Baskaran Learn how to use a key feature of Sencha Test, the Futures API, which allows automation engineers to write tests targeting JavaScript components rather than depending on DOM elements.  READ MORE

Sencha Cmd 6.5 Tech Tips by Sandeep Adwankar Get started quickly with Sencha Cmd 6.5 key features including support for ECMAScript 2015 (or ES6), dynamic package loading, and building progressive web apps. Try the code samples in your apps. READ MORE

Ext JS Customer Spotlight: Crestone Digital by Mike Giddens Crestone Digital builds custom mapping solutions. The team uses Ext JS because it’s easy to create a full-fledged application in minutes, yet it’s designed with extensions in mind. READ MORE

Top Support Tips by Sencha Support Team Check out these Ext JS tips and learn how to scroll a component into view and customize a tree list component.  READ MORE

Sencha Test Tip: Execute Tests on Multiple Browsers Simultaneously by Subu Baskaran Sencha Test has built-in support to make it easy to run and debug tests on multiple browsers simultaneously using a browser farm. Join us for our upcoming webinar with Sauce Labs. READ MORE

Adding D3 visualizations to your Ext JS App Targeting Component Themes with UIs Getting Started with Sencha Test - Quick Start for Testers Learn Design Methods for Better Product Development

Upcoming Webinar: What's New in Sencha Ext JS 6.5 and Cmd 6.5 Presented by Jon Jarboe and Sandeep Adwankar Join us for our upcoming webinar, where you will learn how you can use Ext JS 6.5 to deliver rich desktop and tablet experiences for your data-intensive, cross-platform web applications – using the Ext JS Modern toolkit. With Cmd 6.5, you get support for ES2015 (formerly ES6) in Ext JS apps, dynamic package loading and support for Progressive Web Apps.  REGISTER NOW

Want Higher Quality & Faster Development Time? Sencha Professional Services has a team of experts that provides application modernization, code reviews, architecture planning, and custom development. Find out how we can help you. CONTACT US

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

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

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

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 

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.

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

      });

}

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

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.

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.