Sencha ExtJS how to select Grid First row

In ExtJs Grid we can select the first row when the grid is loaded.

Sencha Extjs grid. we can do it  as store load callback like this.

Now am getting the grid from my view.

  var myGridstore = this.getViewModel().getStore('myStore');

     var myGrid = this.getView().down('grid');

     myGridstore.load({

                    callback: function(records, operation, success, response) {

                    if(success){

                    //Grid row index start from Zero.

                    myGrid.getSelectionModel().select(0);

                    }

                    }});

Sencha Extjs What is the use of Ext.beforeLoad in index.html

In Extjs we have  Ext.beforeLoad  method in sencha cmd generated file index.html.

We have to know what is the purpose of Ext.beforeLoad.

This function is called by the Microloader after it has performed basic device detection. The results are provides in the tags object are.

android: 0

androidstock: 11

bada: 0

blackberry: 0

chrome: 0

chromeios: 0

chromemobile: 0

chromeos: 0

cordova: false

desktop: true

dolfin: 0

edge: 0

firefox: 0

ie: 0

ie8: 0

ie8m: 0

ie8p: 0

ie9: 0

ie9m: 0

ie9p: 0

ie10: 0

ie10m: 0

ie10p: 0

ie11: 0

ie11m: 0

ie11p: 0

ie12: 0

ie12m: 0

ie12p: 0

ios: 0

ipad: 0

iphone: 0

ipod: 0

linux: 0

mac: true

opera: 0

phone: false

phonegap: false

rimtablet: 0

safari: 11

silk: 0

tablet: false

tizen: 0

touch: undefined

webos: 0

webosbrowser: 0

webview: false

windows: 0

windowsphone: 0

         use these tags here or even add custom tags. These can be used by platform
        filters in your manifest or by platformConfig expressions in your app.

Ext.beforeLoad = function (tags) {

            var s = location.search,

                profile;

            if (s.match(/\bclassic\b/)) {

                profile = 'classic';

            }

            else if (s.match(/\bmodern\b/)) {

                profile = 'modern';

            }

            else {

                profile = tags.desktop ? 'classic' : 'modern';

                //profile = tags.phone ? 'modern' : 'classic';

            }

            Ext.manifest = profile;

        };

Sencha Extjs how to find deviceType

This is very useful while working on responsive applications, some places we need to know the what is DeviceType and operating system like that.

Extjs came with os singleton class  Ext.os

Provides information about the current operating system environment.

Like below:

1. 
   deviceType:"Phone"
2. name:"Android"
3. version:Version
1. build:0
2. major:5
3. minor:0
4. pad:0
5. parts:(2) [5, 0]
6. patch:0
7. releaseValue:0
8. shortVersion:"50"
9. version:"5.0"

Sencha Extjs How to make textfield as password field

Today am going to tell basic thing how to make textfield like as a password field.

We have predefind component for modern but not for classic  so we have to make with inputType config.

writing at the time of field declaration. using inputType config.

        xtype: 'textfield',

        name: 'password',

        msgTarget: 'under',

        allowBlank: false,

        labelSeparator: '',

        fieldLabel: 'Password',

        maxLength: 16,

        enforceMaxLength: true,

        reference: 'password',

        inputType: 'password'

Sencha Extjs online training