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

         }
     }
 });


    }
});

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

      });

}

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

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.

Sencha cmd: How to create view using sencha cmd

Today am going to explain the basic sencha CMD commands.

In previous posts i explained about to install sencha CMD. Now we are going to generate Common MVC components such as controller, mode, view.

Using sencha generate command help us to quickly generate files. You can verify the which sencha cmd is installed in our system and what are the commands available.

Note: Before executing the Sencha commands.The current directory on the console must be inside your application. This commands are compatible to the Sencha Architect Project.

1. Generating views

Adding a view is 

cd path/MyApplication sencha generate view Users.UsersList

The above code will generate the following files in our application.

app/

      view/

               Users/                                     - Creates the Folder for the implementing the classes

                         UsersList.js                  - The New view

                         UsersListModel.js        - The Model for the New view

                         UsersListController.js  -The controller of New view.

Ext.data.reader.Reader: Using the deprecated "root" configuration. Use "rootProperty" instead.

Hello,

While am working on upgrade from Extjs 4 to Extjs 5, am getting this error in Store.

Ext.data.reader.Reader: Using the deprecated "root" configuration. Use "rootProperty" instead.

In Extjs 4 we are using the root property in Proxy reader. But in Extjs we ahve to change the Proxy reader from root to  rootProperty.

Extjs V4:

proxy: {

        type: 'ajax',

        url: 'data/GetClients',

        reader: {

            type: 'json',

            root: 'rows',

            total: 'totalCount'

        }

    }

Extjs V5:

    proxy: {

        type: 'ajax',

        url: 'data/GetClients',

        reader: {

            type: 'json',

            rootProperty: 'rows',

            totalProperty: 'totalCount'

        }

    }